JSP masthead component in portal

[Former Member]

Hi All,

I have a JSP component as the masthead in a AJAX Framework page. The masthead is 34px high and has a drop down menu on the top right hand corner.

When the user clicks on the drop down button, the masthead height is increased to render the drop down menu. This affects the overall UI.

How can i make the drop down menu to render without having the masthead height to increase?

Please see the images attached for the UI

css and html code also attached

thanks

Adnan

[Former Member · Accepted solution]

Hi Adnan,

     In the CSS code, do following changes to resolve the issue. Replace the .dropdown-cotent division code with the below attached code.

1. Change the position to absolute. (As of now it is relative).
2. Remove the left property. (as of now it is left:10px).
3. Add padding property as padding: 0px 0px 0px 0px; (optional)

.dropdown-content

{

  display:block;

  position:absolute;

   padding: 0px 0px 0px 0px; /*Optional you can add or leave it*/

  background-color: #374043;

  min-width: 160px;

  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

}

[Former Member · Accepted solution]

bakshar,

the code above renders the drop down outside the framework page:

[saar_dagan · Accepted solution]

Hi Adnan,

Combine our suggestions, add z-index:200 to the dropdown container.

and set right: 200px;

BR,

Saar

[Former Member · Accepted solution]

Thanks for you reply Saar Dagan,

I have combined the code and seems like the drop down doesn't extend the height of the masthead. however, as you can you see from the picture, not all of the drop down menu renders. I have tried increasing the z-index value but still same issue.

[saar_dagan · Accepted solution]

Hi Adnan,

It means that in your portal something has either a higher z-index or you are rendering in an IFrame.

Increase the z-index to 12000 and check if it shows, if not then you need to debug your framework and see what is it that blocks you.

If this doesn't help then increase the z-index for your entire masthead, set your masthead container z-index to 400 and the dropdown to 1000.

BR,

Saar

[Former Member · Accepted solution]

Hi Saar

I forgot to mention I am rendering in an IFrame - is there alternative way I can achieve this with IFrame (preferably) or without IFrame?

Adnan

[Former Member · Accepted solution]

Hi Saar,

Finally it works! I set the z-index for the drop down container to 400 and the dropdown content to 1000

Thank you for your help, appreciated

[saar_dagan · Accepted solution]

Hi Adnan,

Great to hear and you are welcome .

BR,

Saar

[saar_dagan]

Hi Adnan,

Try to use a higher z-index for the drop-down.

In the CSS add:

z-index: 200;

This is a neutral z-index for portal.

BR,

Saar

[Former Member]

tried this, still same issue