Modal Layer is behind the Page header

All WYSIWYG Web Builder support issues that are not covered in the forums below.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
Post Reply
User avatar
ruel.lago22
 
 
Posts: 126
Joined: Thu Feb 01, 2018 11:32 am

Modal Layer is behind the Page header

Post by ruel.lago22 » Fri Aug 17, 2018 5:20 am

Hi Pablo,

I have a question in regards to the Page header mode: Fixed with Stack level: in front of content. It goes in front of the Layer Mode: Modal layer with Model type: bootstrap and it looks ugly and it cuts the upper part of the Modal layer. How can we fix this? Thank you in advance!

Image

User avatar
Pablo
 
Posts: 14143
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Modal Layer is behind the Page header

Post by Pablo » Fri Aug 17, 2018 6:41 am

Fixed with Stack level: in front of content. It goes in front of the Layer Mode
Correct, that is the purpose of this option. The only way to prevent this is by (manually) giving the modal layer a higher z-index.

User avatar
ruel.lago22
 
 
Posts: 126
Joined: Thu Feb 01, 2018 11:32 am

Re: Modal Layer is behind the Page header

Post by ruel.lago22 » Fri Aug 17, 2018 7:50 am

Pablo wrote:
Fri Aug 17, 2018 6:41 am
higher z-index.
Where can I find the z-index Pablo? Thanks again!
Last edited by ruel.lago22 on Fri Aug 17, 2018 7:59 am, edited 1 time in total.

User avatar
Pablo
 
Posts: 14143
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Modal Layer is behind the Page header

Post by Pablo » Fri Aug 17, 2018 7:57 am

You will need custom code for that.
The exact code depends on the settings of your dialog.

User avatar
ruel.lago22
 
 
Posts: 126
Joined: Thu Feb 01, 2018 11:32 am

Re: Modal Layer is behind the Page header

Post by ruel.lago22 » Fri Aug 17, 2018 8:24 am

Pablo wrote:
Fri Aug 17, 2018 7:57 am
You will need custom code for that.
The exact code depends on the settings of your dialog.
Uhmmm... I tried to do some research and put a custom code

Code: Select all

 z-index:77777;
in the dialog object html: custom style but nothing happens even I make the number in millions. I hope you can help :D :D :D (cross-finger)

User avatar
BaconFries
 
 
Posts: 4152
Joined: Thu Aug 16, 2007 7:32 pm

Re: Modal Layer is behind the Page header

Post by BaconFries » Fri Aug 17, 2018 8:36 am

Page HRML Between <head></head>tag*

Code: Select all

<style>
#Layer1
{
   z-index: 8888 !important;
}
</style>

User avatar
ruel.lago22
 
 
Posts: 126
Joined: Thu Feb 01, 2018 11:32 am

Re: Modal Layer is behind the Page header

Post by ruel.lago22 » Fri Aug 17, 2018 8:46 am

BaconFries wrote:
Fri Aug 17, 2018 8:36 am
Page HRML Between <head></head>tag*

Code: Select all

<style>
#Layer1
{
   z-index: 8888 !important;
}
</style>
OMG!!! Haven't anyone told you that you are a rockstar! Thank you so much BaconFries!!! It worked!!!

Image

User avatar
BaconFries
 
 
Posts: 4152
Joined: Thu Aug 16, 2007 7:32 pm

Re: Modal Layer is behind the Page header

Post by BaconFries » Fri Aug 17, 2018 9:19 am

I have been called may things...but a rockstar is on of the more friendly...😅 Note if using more than once on same page then you need to change #Layer1 to Layer2 etc.

User avatar
Magical
 
 
Posts: 124
Joined: Thu Dec 14, 2017 5:08 pm
Contact:

Re: Modal Layer is behind the Page header

Post by Magical » Mon Sep 03, 2018 3:15 pm

I have the somewhat similar issue. I dropped the Newsletter dialog on the main page which is using a master_frame. The dialog box is stuck on the top and inside the menu.

I added this
<style>
#Layer1
{
z-index: 8888 !important;
}
</style>

but still stuck. Click on the URL and you can see it at very top.

http://d2biz.com

User avatar
Pablo
 
Posts: 14143
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Modal Layer is behind the Page header

Post by Pablo » Mon Sep 03, 2018 3:26 pm

Where exactly do I need to look for the dialog?

User avatar
BaconFries
 
 
Posts: 4152
Joined: Thu Aug 16, 2007 7:32 pm

Re: Modal Layer is behind the Page header

Post by BaconFries » Mon Sep 03, 2018 3:29 pm

About to ask the same!

User avatar
Magical
 
 
Posts: 124
Joined: Thu Dec 14, 2017 5:08 pm
Contact:

Re: Modal Layer is behind the Page header

Post by Magical » Mon Sep 03, 2018 4:32 pm

On the home page its at the very top - faded and merged in with menu bar.

User avatar
Magical
 
 
Posts: 124
Joined: Thu Dec 14, 2017 5:08 pm
Contact:

Re: Modal Layer is behind the Page header

Post by Magical » Mon Sep 03, 2018 4:38 pm

Here is an image of it Image

User avatar
Pablo
 
Posts: 14143
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Modal Layer is behind the Page header

Post by Pablo » Mon Sep 03, 2018 4:58 pm

There seems to be something wrong with the style sheet.
Please set all HTML formatting options (Tools->Options->HTML) to their defaults and remove any custom code you may have added.

User avatar
Magical
 
 
Posts: 124
Joined: Thu Dec 14, 2017 5:08 pm
Contact:

Re: Modal Layer is behind the Page header

Post by Magical » Mon Sep 03, 2018 5:15 pm

I removed the custom code - which were master_frame:

between head and /head
<!-- Insert Google Analytics code here -->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/j ... "></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'XA-96858582-1');
</script>

AFTER BODY TAG
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/en_US/sdk. ... sion=v2.11';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


And now it works.

Post Reply

Who is online

Users browsing this forum: No registered users and 8 guests