Like in the title.
I have three level menu and want it to look like:
[ FIRST LEVEL ITEM ]
--------------------
[ SECOND LEVEL ITEM ]
[ SECOND LEVEL ITEM ]
[ THIRD LEVEL ITEM ]
[ SECOND LEVEL ITEM ]
[ THIRD LEVEL ITEM ]
[ SECOND LEVEL ITEM ]
But third level items are displaying just behind the other items.
I added huge 50px red frame to them, so you will be able to see what's the point:
http://jsfiddle.net/TQH9v/
I'm a bit sleepy and tired & have to finish this code today, so sorry for so many stupid questions. At least easy reputation points :P
Thank you :)
Your CSS has a lot of superfluous stuff in it so I'm not going to edit it exactly.
What you need to learn about is the wonderful z-index model. You never mentioned if you wanted this to work in IE, so I will just explain it for real browsers.
First, add position: relative; for all LI elements. Something like
#page-navigation li { position: relative; }
will work.
Now, add a z-index to each UL element that contains a "popup" menu and set it to a z-index that is higher than the parent LI. If you do not set the z-index, it will default to 0.
https://developer.mozilla.org/en/understanding_css_z-index
If you want this to work in IE, you must set the parent LI to a higher z-index than it's contained popout UL. This is just how stupid IE works. http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
Related
I am currently using the following css to display a list of items with a flexbox
section ol li div ul {
display:flex;
flex-direction:row;
flex-wrap: wrap;
gap:7px;
row-gap:0;
list-style-type: none;
}
This satisfies me on all but one problem:
when I have a big item that will not fit entirely on the rest of the line, it will be set at the beginning of a new line, thus possibly making a huge part of the line before unused. I do not wish that (note that for small items, this is exactly what I want).
Initial goal (probably not achievable): I have been thinking on what kind of rule I would like and it would be something like "if more than x% of the line is wasted, then display the item inline instead". This would enable to continue filling the line.
I have currently abandoned on doing that with only html and css and I might consider trying to write such a rule in js later, but not for now (unless somebody has a very nice solution).
Current goal: I have thus decided to manually specify some items (that are "big") that should be inlined (sometimes using media queries, but we can ignore them for now). The idea is to add the following class to those objects.
.inlineitem {
display:inline;
}
Problem: display:inline; within a flex container does not work and I do not wish to change the whole flex container for the other items... Is there a way to achieve what I want ?
We have a React Virtualized Table with a header row.
One (or more) of the header cells will contain a drop down Componentallowing you to select values to filter the column by.
We have created the Component, and the ValuePanel has position: absolute; to make it float above the other elements on the page.
We included it in the header and it mostly works, except that the HeaderRow has overflow:none; on it.
<div
class="ReactVirtualized__Table__headerRow table-toplevel-row table-toplevel-header"
role="row"
style="height: 100px;overflow: hidden;padding-right: 17px;width: 1920px;"
>
This "chops off" the bottom of the panel showing the values.
Reading up on overflow: none; and position: absolute; it seems that the ValuePanel must have a (positional) parent outside of the HeaderRow.
This can be achieved by either:
Moving the ValuePanel element so it's no longer an ancestor of the HeaderRow.
Having the nearest ancestor of the ValuePanel element with a position of absolute or relative (i.e. it's positional parent) outside of the HeaderRow.
The problem with 1, is that the Component is supposed to be a self-contained and reusable anywhere, so it shouldn't require part of it's HTML to exist outside of itself ... that violates the "self-contained" bit.
The problems with 2 are that we won't always be able to guarantee where the positional parent is in the hierarchy above the ValuePanel unless the positional parent is inside the Component. And the ValuePanel gets it's width from it's positional parent, so if the positional parent is outside of the Component then the width could well be wrong.
We very much want to avoid having to specify a fixed width for the component and/or the ValuePanel. And we want to keep the Component self-contained.
The thought occurred to remove overflow: none; from the HeaderRow, but it's obviously there for a reason. I haven't tested, but I assume getting rid of that would cause issues with header content that, well, overflows. We could replace it with overflow-y: none;overflow-x: hidden;, but again this seems like it's likely to cause issues under certain circumstances.
I had a search around, but I couldn't find any results for it.
Has anyone achieved this before and can provide some insight? Or otherwise has some ideas/advice?
Slightly longer answer now that I'm back at my computer: Check out react-portal.
It lifts content out of the z-index stack (and so avoids clipping problems) while maintaining the visual position of it (top/left), allowing it to render outside of the clipping rect/box of its parent. It's perfect for things like drop-down menus within List or Table.
I have a website which has to be working on all browsers. I am designing a menu like the below image
I made this menu by using the following html and css code
Html
<ul class="menu">
<li><img src="images/ico1.png" alt="home"><span>Home</span></li>
li><img src="images/ico2.png" alt="products"><span>Products</span></li>
<li><img src="images/ico3.png" alt="Quality Assurance"><span>Quality Assurance</span></li>
<li><img src="images/ico4.png" alt="Gallery"><span>Gallery</span></li>
<li><img src="images/ico5.png" alt="Contact"><span>Contact Us</span></li>
</ul>
Css
.menu { float:left;}
.menu li {float: left;padding: 19px 45px; background:url(../images/seperator.png) no-repeat right;}
.menu li.last{ background:none !important;}
.menu li a { text-decoration:none; color:#553614; font-size:18px; font-family: 'fengardo_neueregular';}
.menu li a:hover{ color:#fff;}
.menu li span { float: left; margin-left: 5px;margin-top: 9px;}
It works perfectly in chrome, Ie9, firefox etc. But when i check in Ie8 the menu is collapsed like the below image
How do i rectify this error?
don't have ie8 at my disposal currently, but after looking # your markup/styles here are my thoughts:
1. the misalignment is more than likely margin-padding issues...looks like there is not enough room for the spans on the same line as the icon, and this break is amplifying it because once the spans are pushed off that line, they have margin-top declared, which is just pushing them farther away.
You have a few options here: 1st of all, target the menu in IE8 with conditional comments; illuminate the involved elements (i like to use contrasting bgs/borders/etc., whatever makes each element stand out from the group) and inspect them in F12...if the answer(s) isn't obvious off the bat, start comparing physical pixel sizes to another browser. So if you use Chrome in this case...you can find an element's dimensions by hovering over if Developer Tools are open...how does Chrome's size(s) compare to IE8's size(s)? If they sizes are not disparate, repeat this process for the same elements, only checking positioning, layout, padding, and margins. (# least) One of these should not match up to the other browser. You're going to want to compensate for the user agent rendering differences, and this is achievable using the conditional comments we've already used to target the menu. So lets pretend that all the li elements are vaguely 130px wide...if you notice that they're only 115px in IE, apply 15 more pixels of width to IE8 and only IE8 via the cc's.
i'm rambling bc i suck, but i'll try and wrap this up...your markup example is missing an opening bracket on the second li, prolly want to fix that first before you do anything else.
ditch the padding on the lis. also, apply display:inline to them and make your anchors display:block; float:left...that's a super easy to way to get rid of and/or test margin/padding issues.
i'd also place the icon into the a as background-images...that's me being particular, but that's actually a solution to your problem too...the spans can't collide with the imgs if there are no more img elements in the markup.
another possible easy solution here: the spans are floating left and applying a left margin...simply having the float:right could be a solution; floating them right and ditching the margin-left would be my second attempt, if simply float:right didn't resolve it.
Basically creating a webpage with a dropdown menu I wrote following a tutorial. My page layout consists of 3 separate tables which include 1 for the title/banner, one for the drop down menu and one for the body/content.
The problem I am having first off is that when I scroll over my drop-down menu it drops behind my body/content table. I found a fix for this which was to include z-index:-1. This worked perfectly in IE but after testing it in chrome it prevented links and iframes to be interacted with on the content/body table.
#bodytable {width:1100px;
height:100%;
margin:auto;
position:relative;
top:10px;
z-index:-1;
}
The entire .css code can be found here:
http://pastebin.com/T97JAjQ8
Try giving them each a positive z-index value. Obviously the higher numbes will be "on top" of the other with lesser value. Instaed of giving a table "-1", give it something positive, like 10 and make the dropdown menus "20". You can even set the z-index of the body, to 0 as a baseline.
I haven't confirmed this, but it could be that chrome doesn't like negative z-index values.
Giving Negative z-index makes your element to go under body or wrapper div and hence, prevent them to be interacted because the body element is on the top of that table when you click the event occurs on the body tag not table tag. You have to give positive z-index value. Default stack order of elements is determined the position where the element is defined. For example, your table will be have a larger z-index value if it is defined after menu div. You can fix your problem by changing only the current stack order. By just changing that negative value to positive.
element {
z-index:1;
}
The above code will set the target element to be on top of others beside the current stack order.
I'm trying to get a grid to occupy the entire space within a panel and after having searched through this forum i read that a fit layout should help with such a case. However, i'm still having problems getting it to do so.
{
xtype:'panel',
layout:'fit',
items: [{
xtype: 'grid',
store: 'DimensionStore',
id: 'dimension-grid',
padding: '0 5 0 5',
viewConfig: { emptyText: '<div style="padding:10px;">No dimensions found...</div>' },
columns: [{
header: 'Name', dataIndex: 'DimensionName', flex: 2
}]
}
}]
}
The only way it works is to set an absolute height for the grid,but that defeats the purpose since the panel + grid lies within a window that is expandable and doesnt look nice when it does get expanded.
Based on the image you showed us, it looks like the layout issue is with the top "Dimensions" panel containing your text field and grid. That's actually the component in charge of layout here, not the grid.
There are a couple things you can do, depending on how you intend for this to be used. The easiest solution would be to use a "vbox" layout. The "Dimensions" panel would have two items, one for a panel with a fixed height containing your text field, the other containing your grid with a flex of 1. That way, the grid will fill the remaining area.
Ext.layout.container.VBox documentation
You could also use a border layout with your text field as the "north" region and your grid as the "center" region with "fit" layout, which will accomplish the same thing.
Ext.layout.container.Border documentation
This is all based off your limited code sample and linked image. You may need to provide a more complete code example to facilitate further assistance.