alignment of popup box

Plus d'informations
il y a 3 mois 3 jours #178501 par KompetenzZ
COM_KUNENA_MESSAGE_CREATED_NEW
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 3 mois 3 jours #178502 par tpartner
COM_KUNENA_MESSAGE_REPLIED_NEW
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.
Les utilisateur(s) suivant ont remercié: LouisGac

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

Plus d'informations
il y a 3 mois 3 jours - il y a 3 mois 3 jours #178508 par KompetenzZ
COM_KUNENA_MESSAGE_REPLIED_NEW
Thank you, this looks fine.
P.S.: With "large modal", the width of the text box can be increased. Very partical.

Cheers kompetenzz
Last edit: il y a 3 mois 3 jours by 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 3 mois 3 jours - il y a 3 mois 3 jours #178512 par tpartner
COM_KUNENA_MESSAGE_REPLIED_NEW
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.
Last edit: il y a 3 mois 3 jours by tpartner.

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

Plus d'informations
il y a 3 mois 3 jours #178513 par KompetenzZ
COM_KUNENA_MESSAGE_REPLIED_NEW
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 3 mois 3 jours - il y a 3 mois 3 jours #178514 par DenisChenu
COM_KUNENA_MESSAGE_REPLIED_NEW
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 (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .
Last edit: il y a 3 mois 3 jours by DenisChenu.

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

Plus d'informations
il y a 3 mois 3 jours #178517 par tpartner
COM_KUNENA_MESSAGE_REPLIED_NEW
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.

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

Plus d'informations
il y a 3 mois 2 jours #178558 par DenisChenu
COM_KUNENA_MESSAGE_REPLIED_NEW

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 (or search sondages pro).
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 3 mois 2 jours - il y a 3 mois 2 jours #178560 par KompetenzZ
COM_KUNENA_MESSAGE_REPLIED_NEW
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 :
Last edit: il y a 3 mois 2 jours by KompetenzZ.

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

Plus d'informations
il y a 3 mois 2 jours #178566 par tpartner
COM_KUNENA_MESSAGE_REPLIED_NEW
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.
Les utilisateur(s) suivant ont remercié: LouisGac

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

Plus d'informations
il y a 3 mois 1 jour - il y a 3 mois 23 heures #178582 par DenisChenu
COM_KUNENA_MESSAGE_REPLIED_NEW

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 (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .
Last edit: il y a 3 mois 23 heures by DenisChenu.
Les utilisateur(s) suivant ont remercié: LouisGac

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

Plus d'informations
il y a 3 mois 23 heures #178648 par KompetenzZ
COM_KUNENA_MESSAGE_REPLIED_NEW
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 2 mois 2 semaines - il y a 2 mois 2 semaines #178893 par KompetenzZ
COM_KUNENA_MESSAGE_REPLIED_NEW
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 :
Last edit: il y a 2 mois 2 semaines by KompetenzZ.

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

Plus d'informations
il y a 2 mois 2 semaines #178895 par tpartner
COM_KUNENA_MESSAGE_REPLIED_NEW
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.

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

Plus d'informations
il y a 2 mois 2 semaines #178896 par KompetenzZ
COM_KUNENA_MESSAGE_REPLIED_NEW
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!