Im using bootstrap 3.3.7 in my test project. This is the production link:
http://colorfill.ionic.host/test/
As you will notice in the top right corner there is a LANG dropdown menu. While hovering it display somehow the content but it looks like the z-index was to small. Increasing it - change nothing.
I'm using following code:
<ul class="social pull-right">
<li class="dropdown">
LANG:
<ul class="dropdown-menu zom">
<li>POL</li>
<li>ENG</li>
<li>UA</li>
</ul><!-- /.dropdown-menu -->
</li>
<li><i class="icon-s-facebook"></i></li>
</ul>
what is wrong then? should I write my own .dropdown class? I dont want to destroy current nav menu..
Increase the z-index of .navbar-header to 1, currently its 0. Like:
.navbar-header {
z-index: 1;
}
You need to increase the z-index of the parent element, no matter what
your child z-index is, If your parent's z-index is lower than child's
it will not work.
Hope this helps!
add this css code to custom.css in line9:
.navbar-header {
z-index: 1;
}
add style for parent div that have navbar-header class as
<div class="navbar-header" style=" z-index: 1;">
Add to .navbar-header z-index: 1;
Related
Usually navbar elements such as the menu link are placed where you want them in your html file. But for certain reasons I need to do this in my css file.
Is there any way for example to change the alignment of my navbar-menu links from left to right? By the way: Margin-left: xx px; does not help here because it destroys the responive behaviour of bootstrap.
Thanks a lot!
Try float: right; property to your navbar-menu links I think it should work.
or USE
.pull-right or .pull-left class of bootstrap.
<ul class="navbar-nav pull-right">
</ul>
<ul class="navbar-nav pull-left">
</ul>
Hi,
Attached screenchot is mockup of our application where in their are -n- number of widgets which are freely movable all through the screen. Everything else works fine except minimize widget functionality. PFA screen shot for the actual problem which comes up after clicking settings button (start of arrow in screen shot). The problem that we are facing is with the positioning of minimize block. We need to achieve it just below the setting button, but it is coming out of widget area.
Please find below code snippet and detail for the same.
The Minimize functionality is being formatted using the JQUERY file with forming the HTML using UL-LI
The CSS for the UL is done using below code snippet.
ul. editModule
{
Display:none;
z-index:200;
position:absolute;
left:177px;
top:3px;
padding-top:2px;
clear:left;
}
The minimize box in the screen shot is being made using below code snippet:-
<ul class=”editModule”><li class=”editColor”><ul class=”moduleColor”><li class=”module-colorWheel”></li><li class=”moduleChoice-blue” title=”module-blue”></li><li class=”moduleChoice-green” title=”module-green” ></li><li class=”moduleChoice-red” title=”module-red” ></li><li class=”moduleChoice-yellow” title=”module-yellow” ></li></ul></li>
<li class=”applyAll”><a href=”#” class=”closeModule”>Close Widget</a></li>
<li class=”minimize”><a href=”#” class=”minimizeModule”>Minimize Widget</a></li>
</ul></li></ul>
When I click on the settings button(start of arrow) it opens the minimize functional box for the widget in a wrong location. Ideally the position should be just below the Settings icon in the hearder i.e. Top right corner.
Any sort of help regarding this will be great. if any further input is required do post comments.
So the problem is that the pop-out div is showing up in the wrong location?
Please try to give the parent container of the pop-out element a CSS style of position:relative.
position:absolute works on the whole screen, unless the parent container of the absolute positioned element also has positioning set.
Erik
EDIT: I have made you some HTMl where the editModule is placed absolute relative to the titlebar:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<style>
ul li {text-decoration:none; float:left;}
.titlebar {
background-color:green;
height:20px;
position:relative;
}
.editModule
{
position: absolute;
right: 0px;
top: 20px;
border:1px solid red;
float:right;
padding-top:2px;
}
</style>
</head>
<body>
<div class="titlebar">
<ul class="editModule">
<li class="editColor">
<ul class="moduleColor">
<li class="module-colorWheel">CW</li>
<li class="moduleChoice-blue" title="module-blue">BLUE</li>
<li class="moduleChoice-green" title="module-green" >GREEN</li>
<li class="moduleChoice-red" title="module-red" >RED</li>
<li class="moduleChoice-yellow" title="module-yellow" >YEL</li>
</ul>
</li>
<li class="applyAll">Close Widget</li>
<li class="minimize">Minimize Widget</li>
</ul>
</div>
<!-- </li></ul> -->
</body>
</html>
Try removing the clear: left; command. Clear together with position: absolute doesn't really make sense.
I have the following button with associated context menu
<div class="control-action">
<button>Action</button>
<ul style="display:none">
<li class="action-remove">Remove</li>
<li class="action-detail">Detail</li>
<li class="action-assigned">Assign</li>
</ul>
</div>
When the button is clicked the associated ul shows beneath it as a context menu.
This is working great on all browsers except IE 7. In IE7 the context menu (ul) shows beneath the button below it. I imagine this is likely due to how the stacking context is resolving these elements.
My css currently looks like this:
.control-action
{
position: relative;
text-align:right;
width:100px;
}
.control-action ul
{
position:absolute;
z-index: 10000;
list-style:none;
}
Any ideas as to what I'm doing wrong?
IE up to IE7 uses the nearest positioned ancestor to determine the stacking context.
You seeing that in IE6 too?
Put your button after the ul and then try it.
I have resolved this by changing the element ordering. I have removed the relative position element from containing both my button and menu, and made it only the parent of menu.
<div class="control-action" style="float:right">
<div class="control-action-menu">
<ul style="display:none">
<li class="action-remove">Remove</li>
<li class="action-detail">Detail</li>
<li class="action-assigned">Assign</li>
</ul>
</div>
<button>Action</button>
</div>
With this markup change the css has changed into the following:
.control-action
{
text-align:right;
width:100px;
}
.control-action-menu
{
position:relative;
z-index:1;
}
.control-action ul
{
position:absolute;
z-index: 10000;
list-style:none;
}
IE7 has known bugs with z-index.
Without seeing your full page, the best I can do is point you to some resources which explain the issue:
IE 6 & IE 7 Z-Index Problem
IE7 Z-Index Layering Issues
http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
http://richa.avasthi.name/blogs/tepumpkin/2008/01/11/ie7-lessons-learned/
The idea, in its most basic form, is to test adding/removing position: relative and z-index on parents of the problematic element until it's fixed.
Could be the hasLayout bug.
This may help: IE7 relative/absolute positioning bug with dynamically modified page content
I am using ui tabs a lot.In my last project i add an icon just before tabs and the tab links start a strange behavior, you can not click to change the tabs if you are above tab name BUT only when you are outside tab name.
Here is the code
<div style="float:left;display:inline;width:718px;padding:5px;border:1px solid #ececec">
<!--ICON just before TABs-->
<div style="z-index:1;position:relative;top:30px;left:5px">
<img src="../graphics/icons/add.gif" onclick="AddTab();" href="javascript:void(0);" id="addNewTab"/>
</div>
<div id="tabs" >
<ul >
<li >
<img src="../graphics/icons/x.gif" onclick="RemoveTab(this)" style="cursor: pointer;" />
<span id="tabContent-1"><span class="tabText" >TAB1</span></span>
</li>
<li >
<img src="../graphics/icons/x.gif" onclick="RemoveTab(this)" style="cursor: pointer;" />
<span id="tabContent-2"><span class="tabText" >TAB2</span></span>
</li>
</ul>
<div id="tab-1" >
contents
</div>
<div id="tab-2" >
contents
</div>
</div><!--tabs-->
I know that ui.css has position relative for tabs
.ui-tabs .ui-tabs-nav {
list-style:none outside none;
padding:0.2em 0.2em 0;
position:relative;
}
and i dont know if meshing up with my icon.
If i remove the position:relative from the icon (add.gif) everything works fine
Any help is appreciated
From the code you've posted, and if I've understood your problem correctly, the "top: 30px" in your icon div is interfering with your tabs. The icon image height is not declared but I'm assuming it's less than 30px. Therefore, given that your icon has a z-index of 1, it would appear on top of the tabs.
If the icon is intended to appear on the same line as the tabs, this may still occur as no width is declared for the icon's parent div. This means it may take up the entire row.
There are several ways to fix this, but I think you're in the best position to come up with right solution, depending on the exact effect you're going for. The culprit seems to be "top: 30px" which pushes the div down by 30px. If you remove that, you can likely also remove the "position: relative" from the same div.
Hope that helps.
It is most likely the IE hasLayout bug and the image is not forcing the height of the tab to change as expected. This can be fixed by adding zoom:1 to any position:relative elements.
Also you might want to add a padding with 4 specifications like so...
.ui-tabs .ui-tabs-nav {
list-style:none outside none;
padding:0.2em 0 0.2em 0;
position:relative;
zoom:1; }
Hope that helps!
I'm trying to create a simple image navigation for my site, using CSS to declare the background-image property of a list-item (li). The problem is, when I use text-indent to put the image off-screen, the link is no longer there (off screen as well I presume). Any help would be greatly appreciated. Here is my XHTML:
<div id="nav">
<ul>
<li class="current about">
about
</li>
<li class="contact">
contact
</li>
<li class="networks">
networks
</li>
</ul>
</div>
Here is my CSS:
#nav li {
display: block;
float:left;
background-image: url("images/nav-normal.png");
height:47px;
text-indent: -9999px;
}
I have also set up background-positions for the individual list-items because I'm using image sprites. Thanks in advance!
Apply that style to the #nav li a. Otherwise everything inside the li, including the link, is shifted off screen.