alignment of popup box

Plus d'informations
il y a 7 mois 4 semaines #178501 par KompetenzZ
alignment of popup box a été créé par KompetenzZ
Hi community,

I created a popup box at the welcome page with this website: html-online.com/articles/simple-popup-box/
When you click on "Kontakt", the popup box opens but it is not aligned in the center, see screenshot.
Can someone please help me with the background of the popup box? It would be fine if the background would go over the whole screen (by staying responsive for mobile devices). Or the background would be centered. I guess it is a something with css?
This is the css class that is responsible for the background of the popup box:


.hover_bkgr_fricc{
    background:rgba(0,0,0,.4);
    cursor:pointer;
    display:none;
    height:100%;
    position:fixed;
    text-align:center;
    top:0;
    width:100%;
    z-index:10000;

Here is a test link: food-boku.limequery.com/296662?lang=de



Cheers kompetenzz
Pièces jointes :

Connexion ou Créer un compte pour participer à la conversation.

LimeSurvey Partners
Plus d'informations
il y a 7 mois 4 semaines #178502 par tpartner
Réponse de tpartner sur le sujet alignment of popup box
LS uses Bootstrap so have a look at Bootstrap Modal - getbootstrap.com/docs/4.0/components/modal/

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com
Les utilisateur(s) suivant ont remercié: LouisGac

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 7 mois 4 semaines - il y a 7 mois 4 semaines #178508 par KompetenzZ
Réponse de KompetenzZ sur le sujet alignment of popup box
Thank you, this looks fine.
P.S.: With "large modal", the width of the text box can be increased. Very partical.

Cheers kompetenzz
Dernière édition: il y a 7 mois 4 semaines par KompetenzZ. Raison: Didn't look through the whole website

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 7 mois 4 semaines - il y a 7 mois 4 semaines #178512 par tpartner
Réponse de tpartner sur le sujet alignment of popup box
Try adding something like this to your theme custom.css file for even more fluid sizing:

@media only screen and (min-width: 768px) {
	body .modal-dialog {
		width: 95%;
		max-width: 900px;
	}
}

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com
Dernière édition: il y a 7 mois 4 semaines par tpartner.

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 7 mois 4 semaines #178513 par KompetenzZ
Réponse de KompetenzZ sur le sujet alignment of popup box
Sorry, I changed my last post because there is actual a modal for increased width on this page
getbootstrap.com/docs/4.0/components/modal/#large-modal

Earlier on, I just didn't look on the whole page. Thanks, I will test your solution as well.

Cheers kompetenzz

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 7 mois 4 semaines - il y a 7 mois 4 semaines #178514 par DenisChenu
Réponse de DenisChenu sur le sujet alignment of popup box
LimeSurvey use bootsrap 3, not bootsrap 4.

Unsure modal have diferences, but getbootstrap.com/docs/3.3/javascript/#modals

Else, ls already have boostrap modal :
github.com/LimeSurvey/LimeSurvey/blob/ma...alert_modal.twig#L27

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand .
An error happen ? Before make a new topic : remind the Debug mode .
Dernière édition: il y a 7 mois 4 semaines par DenisChenu.

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 7 mois 4 semaines #178517 par tpartner
Réponse de tpartner sur le sujet alignment of popup box
I'm not sure what your point is. :)

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 7 mois 4 semaines #178558 par DenisChenu
Réponse de DenisChenu sur le sujet alignment of popup box

tpartner écrit: I'm not sure what your point is. :)

There are some difference in bootsrap 3 and bootsrap 4 , better to put the link to bootsrap 3 for LimeSurvey

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand .
An error happen ? Before make a new topic : remind the Debug mode .

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 7 mois 4 semaines - il y a 7 mois 4 semaines #178560 par KompetenzZ
Réponse de KompetenzZ sur le sujet alignment of popup box
Thank you for clarification.

There ist just a last positioning thing on my welcome page: I tried to move the button down to the same height of the "next"/"start" button. Is it not allowed to use the classes without the "#question{QID}" in javascript?
<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){
		$('#row.navigator.space-col').each(function(i) {
			$('#btn.btn-primary.pull-left').before($(this));
		});
	});
</script>


Cheers kompetenzz
Pièces jointes :
Dernière édition: il y a 7 mois 4 semaines par KompetenzZ.

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 7 mois 4 semaines #178566 par tpartner
Réponse de tpartner sur le sujet alignment of popup box
Given an ID of "myInsertedButtonID" for your inserted button, something like this will move the button down into the navigator container:

<script type="text/javascript" charset="utf-8">
	$(document).on('ready pjax:scriptcomplete',function() {		
		$('#navigator-container > div.text-left:eq(0)').prepend($('#myInsertedButtonID'));
	});
</script>

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com
Les utilisateur(s) suivant ont remercié: LouisGac

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 7 mois 4 semaines - il y a 7 mois 3 semaines #178582 par DenisChenu
Réponse de DenisChenu sur le sujet alignment of popup box

KompetenzZ écrit: $('#row.navigator.space-col').each(function(i) {
$('#btn.btn-primary.pull-left').before($(this));


Here, you search the elemnt with id row and class navigator + space-col : its don't exist.

See : learn.jquery.com/using-jquery-core/selecting-elements/

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand .
An error happen ? Before make a new topic : remind the Debug mode .
Dernière édition: il y a 7 mois 3 semaines par DenisChenu.
Les utilisateur(s) suivant ont remercié: LouisGac

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 7 mois 3 semaines #178648 par KompetenzZ
Réponse de KompetenzZ sur le sujet alignment of popup box
Thank you for the javascript. This works well. Great, with this link it's easier to understand identifying elements with javascript.

Cheers kompetenzz

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 7 mois 1 semaine - il y a 7 mois 1 semaine #178893 par KompetenzZ
Réponse de KompetenzZ sur le sujet alignment of popup box
Hi,

I discovered that when the modal-button is opened on a small screen width, the modal-dialog is shifted down to the bottom of the page, outside of the screen. I also tried to center the modal-dialog with getbootstrap.com/docs/4.0/components/modal/#vertically-centered but it has no effect. I think this problem has to do with my custumized theme, because there isn't this problem with the standard shipped themes.
When I change in theme options "bootswatch theme" to another theme than spacelab, it works. But I would like to use my current bootswatch theme "spacelab".

Do you have any idea how to vertical align the modal-dialog to the top?


Here is a test survey with the problem in spacelab:
food-boku.limequery.com/519354?lang=de


If necessary, here is my theme and survey.

Fichier attaché :

Nom du fichier : extends1_b...fix2.zip
Taille du ficher :191 ko

Fichier attaché :

Nom du fichier : limesurvey...3542.lss
Taille du ficher :39 ko


LS Version: 3.14

Cheers kompetenzz
Pièces jointes :
Dernière édition: il y a 7 mois 1 semaine par KompetenzZ.

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 7 mois 1 semaine #178895 par tpartner
Réponse de tpartner sur le sujet alignment of popup box
Try adding something like this to custom.css:

@media (max-width: 768px) {
	.bd-example-modal-lg.in {
		position: absolute;
		top: 20px;
		bottom: auto;
	}
}

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 7 mois 1 semaine #178896 par KompetenzZ
Réponse de KompetenzZ sur le sujet alignment of popup box
Thank you for the quick response. The only problem left now is that I cannot scroll down (on smartphone) until the end of the modal-dialog. I mean the scroll function is disabled now.

Cheers kompetenzz

Connexion ou Créer un compte pour participer à la conversation.

Commencez dès maintenant !

Créez simplement un compte et commencez à utiliser LimeSurvey dès aujourd'hui.

Inscrivez-vous maintenant

Inscrivez-vous à notre Newsletter!