I'm using the Dropkick jquery plugin for custom select boxes.
It seems the absolute positioned dropdown always gets its width from the parent, and not the full width of the child list items.
How can I fix this?
See this jsfiddle.
Structure:
<label class="filter-lbl">
<div class="dk_container dk_theme_default" style="display: block;">
<a class="dk_toggle">
<span class="dk_label">
<nobr>status</nobr>
</span>
</a>
<div class="dk_options">
<ul class="dk_options_inner">
<li class="dk_option_current">
<a>state</a>
</li>
<li class="">
<a>longerwords</a>
</li>
<li class="">
<a>longerwords</a>
</li>
<li class="">
<a>longerwords</a>
</li>
</ul>
</div>
</div>
</label>
UPDATE:
It seems like the float on my .filter-lbl, is causing this.
It's because of the inline style of my .filter-lbl.
Is there a workaround to this?
Your dk options class does not need to be absolute unless you are looking for an overflow, absolute will ignore anything else.
Try this in your CSS
.dk_options {
/*display: none;*/
margin-top: -1px;
position: relative;
right: 0;
width:auto;
}
This should ensure the wrapper is the right width.
Related
I found only opposite problems with Google where people wanted the fixed element to stay inside it's parent. My problem is that I can't get fixed element out of it's parent element.
This css moves fixed-element at the bottom of it's parent and acts like position absolute.
There's no positioning on any parent or grandparent.
I checked from inspect styles and nothing is overwriting it.
What could possibly cause this?
li.fixed-element {
position: fixed;
display:block;
left: 0;
bottom: 0;
width: 100vw;
background:#fff;
z-index: 100000000000000000000;
}
Edit. Here's the html. It's from Gravity Forms plugin.
<form>
<div>
<ul>
<li>
<ul>
<li id="field_2_2" class="fixed-element gfield gfield_price gfield_price_2_ gfield_total gfield_total_2_ field_sublabel_below field_description_below gfield_visibility_visible">
<label class="gfield_label" for="input_2_2">Total</label>
<div class="ginput_container ginput_container_total">
<span class="ginput_total ginput_total_2" aria-live="polite">0,00 €</span>
<input type="hidden" name="input_2" id="input_2_2" class="gform_hidden">
</div>
</li>
</ul>
</li>
</ul>
</div>
</form>
I'm trying to add sprite images to the menu items in wordpress/ubermenu.
The custom class:
#menu-item-4.sprite.icon-image a > img:first-child
{ background-position: -161px 0px!important; width: 22px; height: 22px;}
is applied to
id="menu-item-4"
It should affect only the first image element, instead the style is applied to most images menu-item-4.
How to select this specific image?
<ul class="menu-id-1">
<li id="menu-item-2">
<ul class="submenu-id-3">
<li id="menu-item-4" class="sprite icon-image"> <-- Costum CSS Class added here
<a href="">
<img> <-- CSS to select this element only
<span></span>
<span></span>
</a>
<ul class="menu-submenu-id-5">
<li id="menu-item-6">
<a href="">
<img> <-- This element will have other icon
<span></span>
<span></span>
</a>
</li>
<li d="menu-item-7">
<a href="">
<img>
<span></span>
<span></span>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
Your CSS selector selects all img-tags, that are directly a child of an a-tag inside your #menu-item-4.
try this:
#menu-item-4 > a img
{ background-position: -161px 0px!important; width: 22px; height: 22px;}
Its probably better to add classes to a-tags or the img-tags
Remove the *:first-child at the end. Your > selector is searching for the first image that appears inside your anchor and the *:first-child selector is confusing its path since there are no child elements for this image.
Your selector should be something like this:
#menu-item-4.sprite.icon-image a > img
This literally means - find and apply only to, the first image that you come across.
I suggest that you add a class to your anchor and simply address that.
e.g.
#menu-item-4.sprite.icon-image .anchor-class > img
Hi I have a responsive Dropwdown menu:
<div class="main-nav">
<ul id="menu-horizontalnav" class="menu">
<li <a> </a> </li>
<li <a> </a> </li>
<li <a> </a> </li>
</ul>
</div>
The size of the main-nav is smaller than the size if the ul.
See the red box in the picture above. The .css parameter for the ul is
.js .main-nav .menu {
position: absolute;
z-index: 1000;
top: 30px;
width: 100%;
}
If somebody could help me get it to work that the width of the 2 elements aligns i would be very happy.
It looks width is not including the border
Add box-sizing:border-box for the element on which border is given it will fix it, which will give padding, border from inside without extending the width
I've put together a jsfiddle to illustrate my problem here. Essentially, I've got an absolutely-positioned menu system above my main content, but the content seems to be floating in front of the menus. Hover over "Link 3" to see that it's just the main content that's hiding it; the menus show up below when they're long enough.
My nav-header looks something like this:
<div id='nav-header'>
<div class='nav-bar'>
<div class='nav-item '>
<a class='link-3' href='#'>
<div class='nav-text-container'><p>Link 3</p></div>
</a>
<div class='flydown-container link-3'>
<div class='flydown'>
<div class='header'>Heading 1</div>
<ul>
<li><a class='secondary-menu-link' href='#'><span>Sub-link 1</span></a></li>
<li><a class='secondary-menu-link' href='#'><span>Sub-link 2</span></a></li>
<li><a class='secondary-menu-link' href='#'><span>Sub-link 3</span></a></li>
<li><a class='secondary-menu-link' href='#'><span>Sub-link 4</span></a></li>
<li><a class='secondary-menu-link' href='#'><span>Sub-link 5</span></a></li>
</ul>
<div class='header'>Heading 2</div>
<ul>
<li><a class='secondary-menu-link' href='#'><span>Sub-link 1</span></a></li>
<li><a class='secondary-menu-link' href='#'><span>Sub-link 2</span></a></li>
<li><a class='secondary-menu-link' href='#'><span>Sub-link 3</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
There's quite a bit of CSS, it's all at that jsfiddle link above.
Use the z-index CSS property (stacking level). Lower z-index means lower stacking context (so if two overlapping sibling elements have different z-indices, the one with the higher z-index will display on top).
Note that z-index establishes a new stacking context for each level of elements so they need to be on the same level of the DOM. Also, z-index only works on positioned elements so it won't do anything unless you set them to relative, absolute or fixed position.
Fixed your code:
#nav-header {
width: 940px;
margin-bottom: 20px;
position: relative;
z-index: 2;
}
#upper-section {
height: 300px;
font-size: 0;
position: relative;
z-index: 1;
}
More z-index info: http://css-tricks.com/almanac/properties/z/z-index/
You have a position: relative; in the #media-slider , if you dont have a purpose to use this property, remove and will work.
Here is my css rule together with the markup:
<div style = "height:100%;">
<div style = "width:220px; margin-left: 200px;font-size:16px; height:auto;">
<div class='navbar-inner'>
<div class='container'>
<ul class="nav nav-list">
<div>
<li <?php if($page == 'upload_track'){ echo "class = \"active\""; }?>>Upload a new Track</li>
<li>View all blog post</li>
<li>View all tracks uploaded</li>
</div>
</ul>
</div>
</div>
</div>
<div style = "width:220px; margin-left: 200px;font-size:16px; height:auto;">
as of now I am making them an inline style so that it would be easy for me to change them. since switching texteditors is kind of a hassle for me.
How would I make that div take up all the available height? like the very bottom of the page. as of now it looks something like this
what I wanted to see is that the black div takes up all the available height in the page
Yes it can be done. Check out this example JSFiddle.
Basically I changed your HTML to this:
<div id="navbar">
<div class='navbar-inner'>
<div class='container'>
<ul class="nav nav-list">
<div>
<li>Upload a new Track</li>
<li>View all blog post</li>
<li>View all tracks uploaded</li>
</div>
</ul>
</div>
</div>
</div>
Essentially all I did was remove the outermost div (the one with only the style="height: 100%" on it) and gave the next div an id.
The CSS is as follows:
html, body { height: 100%; }
#navbar {
/* this was moved from being an inline style in the div: */
width:220px; margin-left: 200px;font-size:16px;
height: 100%;
}
Basically, in order for the navbar strip to use up 100% of the height, you need to make sure that the html and body actually take up 100% of the available height. (That is, 100% on #navbar is 100% of the height of the parent element; if the parent element isn't the height of the browser, then it doesn't work.)