alignment of popup box

More
5 months 4 weeks ago #178501 by 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
Attachments:

Please Log in or Create an account to join the conversation.

LimeSurvey Partners
More
5 months 4 weeks ago #178502 by tpartner
Replied by tpartner on topic 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
The following user(s) said Thank You: LouisGac

Please Log in or Create an account to join the conversation.

More
5 months 4 weeks ago - 5 months 4 weeks ago #178508 by KompetenzZ
Replied by KompetenzZ on topic 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
Last edit: 5 months 4 weeks ago by KompetenzZ. Reason: Didn't look through the whole website

Please Log in or Create an account to join the conversation.

More
5 months 4 weeks ago - 5 months 4 weeks ago #178512 by tpartner
Replied by tpartner on topic 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
Last edit: 5 months 4 weeks ago by tpartner.

Please Log in or Create an account to join the conversation.

More
5 months 4 weeks ago #178513 by KompetenzZ
Replied by KompetenzZ on topic 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

Please Log in or Create an account to join the conversation.

More
5 months 4 weeks ago - 5 months 4 weeks ago #178514 by DenisChenu
Replied by DenisChenu on topic 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 .
Last edit: 5 months 4 weeks ago by DenisChenu.

Please Log in or Create an account to join the conversation.

More
5 months 4 weeks ago #178517 by tpartner
Replied by tpartner on topic 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

Please Log in or Create an account to join the conversation.

More
5 months 4 weeks ago #178558 by DenisChenu
Replied by DenisChenu on topic alignment of popup box

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

Please Log in or Create an account to join the conversation.

More
5 months 4 weeks ago - 5 months 4 weeks ago #178560 by KompetenzZ
Replied by KompetenzZ on topic 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
Attachments:
Last edit: 5 months 4 weeks ago by KompetenzZ.

Please Log in or Create an account to join the conversation.

More
5 months 4 weeks ago #178566 by tpartner
Replied by tpartner on topic 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
The following user(s) said Thank You: LouisGac

Please Log in or Create an account to join the conversation.

More
5 months 4 weeks ago - 5 months 4 weeks ago #178582 by DenisChenu
Replied by DenisChenu on topic alignment of popup box

KompetenzZ wrote: $('#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 .
Last edit: 5 months 4 weeks ago by DenisChenu.
The following user(s) said Thank You: LouisGac

Please Log in or Create an account to join the conversation.

More
5 months 4 weeks ago #178648 by KompetenzZ
Replied by KompetenzZ on topic 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

Please Log in or Create an account to join the conversation.

More
5 months 1 week ago - 5 months 1 week ago #178893 by KompetenzZ
Replied by KompetenzZ on topic 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.

File Attachment:

File Name: extends1_b...fix2.zip
File Size:191 KB

File Attachment:

File Name: limesurvey...3542.lss
File Size:39 KB


LS Version: 3.14

Cheers kompetenzz
Attachments:
Last edit: 5 months 1 week ago by KompetenzZ.

Please Log in or Create an account to join the conversation.

More
5 months 1 week ago #178895 by tpartner
Replied by tpartner on topic 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

Please Log in or Create an account to join the conversation.

More
5 months 1 week ago #178896 by KompetenzZ
Replied by KompetenzZ on topic 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

Please Log in or Create an account to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!