Popup overlay does not cover the header/menu bar - Web

Popup overlay does not cover the header/menu bar - Web

  

Hi,

I am trying to display custom session timeout message using javascript and CSS inside a web block and the web block is placed in the footer. The issue is that the popup overlay does not cover the header and menu bar. Below is the CSS I have applied for the outer container. 


SyntaxEditor Code Snippet

padding : 100px 0 0 0;
display: none;
z-index: 5;
position:fixed;
left: 0;
top: 0;
width: 100%;
max-height:100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.6)

The above CSS does not cover the header and menu bar. Any thoughts on this ? Please refer to the screenshot attached.

Regards,

Keerthana

Hi Keerthana,

What do you want to do exactly? I did not understood what you mean by "The issue is that the popup overlay does not cover the header and menu bar."

Regards,

Hi Keerthana,


You should remove the height and with properties that you set to 100% (meaning, it will cover 100% of the parent element).

To make sure you cover the entire scree, can you try to set:

top: 0;
bottom: 0;
left: 0;
right: 0;


Sam

Hi Marco,

Thank you for the reply. The exact issue is that the grey area behind the pop up in not covering the header as you can see in screenshot <SessionTimeout.png> . I need the grey area also to  cover the header part.

Thanks

Keerthana

Sam Rijkers wrote:

Hi Keerthana,


You should remove the height and with properties that you set to 100% (meaning, it will cover 100% of the parent element).

To make sure you cover the entire scree, can you try to set:

top: 0;
bottom: 0;
left: 0;
right: 0;


Sam

Thank You Sam. I tried the same but I see no changes :(

Regards

Keerthana



Hi Keerthana,

Could you share the oml, or the link to the application so I can play with it a little? (If you share the link, make sure you allow the anonymous role to access the screen).

Hi Sam,

I have attached the OML file which has the webblock <SessionExpiration2> for the session time out popup.

This webblock is used in the footer of another application(consumer module).

I am attaching the consumer module in the next reply.

Regards

Keerthana

Hi Keerthana

The Head wrapper has a z-Index of 10. So, besides what Sam told you, you need to add a higher z-index.
A z-index of 10 or higher will be enough to make it work.

But by default, if you're talking about the LONDON theme (Web Application theme), the z-index is 4011, so it should work.

Why don't you use a PopUp, instead of trying to do this in a web block? The popup works out of the box.

Cheers.

Keerthana Hemachandran wrote:

Hi Sam,

I have attached the OML file which has the webblock <SessionExpiration2> for the session time out popup.

This webblock is used in the footer of another application(consumer module).

I am attaching the consumer module in the next reply.

Regards

Keerthana

I am attaching the consumer module.

Regards,

Keerthana

Eduardo Jauch wrote:

Hi Keerthana

The Head wrapper has a z-Index of 10. So, besides what Sam told you, you need to add a higher z-index.
A z-index of 10 or higher will be enough to make it work.

But by default, if you're talking about the LONDON theme (Web Application theme), the z-index is 4011, so it should work.

Why don't you use a PopUp, instead of trying to do this in a web block? The popup works out of the box.

Cheers.

Thank you Eduardo. I tried using higher z-index and it did work :)