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."
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
Sam Rijkers wrote:
Thank You Sam. I tried the same but I see no changes :(
Regards
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
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.
Keerthana Hemachandran wrote:
I am attaching the consumer module.
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.
Eduardo Jauch wrote:
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.
Thank you Eduardo. I tried using higher z-index and it did work :)