alignment of popup box

Mehr
1 Monat 17 Stunden her #178501 von KompetenzZ
KompetenzZ erstellte das Thema alignment of popup box
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
Anhang:

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
1 Monat 16 Stunden her #178502 von tpartner
tpartner antwortete auf das Thema: 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.
Folgende Benutzer bedankten sich: LouisGac

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
1 Monat 14 Stunden her - 1 Monat 14 Stunden her #178508 von KompetenzZ
KompetenzZ antwortete auf das Thema: 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
Letzte Änderung: 1 Monat 14 Stunden her von KompetenzZ. Begründung: Didn't look through the whole website

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
1 Monat 14 Stunden her - 1 Monat 14 Stunden her #178512 von tpartner
tpartner antwortete auf das Thema: 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.
Letzte Änderung: 1 Monat 14 Stunden her von tpartner.

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
1 Monat 14 Stunden her #178513 von KompetenzZ
KompetenzZ antwortete auf das Thema: 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

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
1 Monat 14 Stunden her - 1 Monat 14 Stunden her #178514 von DenisChenu
DenisChenu antwortete auf das Thema: 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 (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .
Letzte Änderung: 1 Monat 14 Stunden her von DenisChenu.

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
1 Monat 13 Stunden her #178517 von tpartner
tpartner antwortete auf das Thema: 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.

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
4 Wochen 2 Tage her #178558 von DenisChenu
DenisChenu antwortete auf das Thema: alignment of popup box

tpartner schrieb: 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 .

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
4 Wochen 2 Tage her - 4 Wochen 2 Tage her #178560 von KompetenzZ
KompetenzZ antwortete auf das Thema: 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
Anhang:
Letzte Änderung: 4 Wochen 2 Tage her von KompetenzZ.

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
4 Wochen 2 Tage her #178566 von tpartner
tpartner antwortete auf das Thema: 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.
Folgende Benutzer bedankten sich: LouisGac

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
4 Wochen 2 Tage her - 4 Wochen 1 Tag her #178582 von DenisChenu
DenisChenu antwortete auf das Thema: alignment of popup box

KompetenzZ schrieb: $('#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 .
Letzte Änderung: 4 Wochen 1 Tag her von DenisChenu.
Folgende Benutzer bedankten sich: LouisGac

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
4 Wochen 1 Tag her #178648 von KompetenzZ
KompetenzZ antwortete auf das Thema: 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

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
1 Woche 6 Tage her - 1 Woche 6 Tage her #178893 von KompetenzZ
KompetenzZ antwortete auf das Thema: 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.

Dateianhang:

Dateiname: extends1_b...fix2.zip
Dateigröße:191 KB

Dateianhang:

Dateiname: limesurvey...3542.lss
Dateigröße:39 KB


LS Version: 3.14

Cheers kompetenzz
Anhang:
Letzte Änderung: 1 Woche 6 Tage her von KompetenzZ.

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
1 Woche 6 Tage her #178895 von tpartner
tpartner antwortete auf das Thema: 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.

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
1 Woche 6 Tage her #178896 von KompetenzZ
KompetenzZ antwortete auf das Thema: 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

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Jetzt loslegen!

Melden Sie sich jetzt an, und erstellen Sie in wenigen Minuten Ihre erste Umfrage.

Account einrichten

Abonnieren Sie unseren Newsletter

Abonnieren Sie unseren Newsletter für alle Neuigkeiten rund um LimeSurvey
captcha