on 03-29-2016 12:40 PM
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
Hi Adnan,
In the CSS code, do following changes to resolve the issue. Replace the .dropdown-cotent division code with the below attached code.
.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);
}
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
82 | |
10 | |
10 | |
9 | |
6 | |
6 | |
5 | |
5 | |
4 | |
3 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.