Skip to Content
avatar image
Former Member

JSP masthead component in portal

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

UIDropDown.png (10.4 kB)
html.png (10.0 kB)
css.png (15.1 kB)
Add comment
10|10000 characters needed characters exceeded

  • Follow
  • Get RSS Feed

2 Answers

  • Best Answer
    avatar image
    Former Member
    Mar 30, 2016 at 07:48 AM

    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);

    }

    Add comment
    10|10000 characters needed characters exceeded

  • Mar 30, 2016 at 07:41 AM

    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

    Add comment
    10|10000 characters needed characters exceeded