enter image description here
enter image description here
header{
position:fixed;
top:0;
left:0;
background-color: $color;
width: $width;
height: 56px;
}
.utility{
#include lockPosition(10px);
right:10px;
width:700px;
height:20px;
padding-top:10px;
z-index:1000;
position:absolute;
}
I find that only absolute position fixes the z-index issue I am having but I want the header to be fixed so it does scroll. Is there a way to have a absolute position in a fixed element and not effect the z-index?
I think the easiest way is to push down the box with absolute position, i guess on .utility,
.utility{top: npx}
As for your question, the importances of the z-index is depending on how you lays the HTML DOM, so for example if your
<header>Your fixed position</header>
<main>
<nav>Your absolute position</nav>
</main>
with your fixed position z-index will be much more important than your
Hope that helps,
Related
I am using react-virtualized WindowScroller with CellMeasurer to scroll through a 100 sample records and by itself, it works great.
Now, when I place this component in a content pane with a frozen header and footer (using flex) above and below it, react-virtualized does not bring in additional data beyond the first page.
The structure of my container page is the same as the create-react-app template:
<div className="App">
<div className="App-header" />
<div className="App-intro" />
<div className="App-footer" />
</div>
and here is the CSS I use to freeze the header and footer:
html, body, #root {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.App {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.App-header, .App-footer {
flex-shrink: 0;
}
.App-intro {
flex-grow: 1;
overflow-y: auto;
}
FWIW, the official WindowScroller example accomplishes a frozen header using flex, but try as I might, I am not able to replicate it on my end.
I am at my wit's end after spending a whole entire day on this. I would really really appreciate any pointers to get this flex layout going with a functional window-scroller.
In the CodeSandbox you linked to (codesandbox.io/s/52j0vv936p)- window "scroll" events aren't reaching WindowScroller. That's because the window isn't actually what's scrollable, rather it's the middle "body" part. If that's what you want, you don't need to use WindowScroller at all and should remove it.
The only thing left that's broken is that your AutoSizer isn't getting a valid height because one of its parent <div>s doesn't have a correct height. For Stack Overflow convenience, here's the relevant bit:
Why is my AutoSizer setting a height of 0?
AutoSizer expands to fill its parent but it will not stretch the parent. This is done to prevent problems with flexbox layouts. If AutoSizer is reporting a height (or width) of 0- then it's likely that the parent element (or one of its parents) has a height of 0. One easy way to test this is to add a style property (eg background-color: red;) to the parent to ensure that it is the correct size. (eg You may need to add height: 100% or flex: 1 to the parent.)
Here is a diff to your sandbox that shows what I'm talking about and here is a fixed Code Sandbox demo.
I have the following fiddle for people to see http://jsfiddle.net/defaye/DhaHP/4/
The result on full screen: http://jsfiddle.net/defaye/DhaHP/4/embedded/result/
The problem I'm having is that when going past a certain width of resizing the window, the left column departs from the group. I need them to remain touching, with the centre column having a min-width 400 to max-width 800px, the sides width: 200px. The header should be 100% however.
Anyone know how to solve this problem? It is driving me insane.
Here is another example, compatible with IE6+: http://jsfiddle.net/DhaHP/12/
Result: http://jsfiddle.net/DhaHP/12/embedded/result
Abstract of the changes:
Changed #left and #right to be above the #center (#right before #left);
min-width and max-width on #container to 800px and 1200px respectively;
No float on #center;
margin-left and margin-right on #center equals the width of each side column;
float-left on #left and float-right on #right;
The only obs on this for IE6 is the min-width and max-width that doesn't work without a little hack or the use of IE7.js. On IE7, it works as should be.
Here's a working fiddle: http://jsfiddle.net/PhilippeVay/DhaHP/8/ (edit: now works with Chromium)
Modifications made:
HTML: #left before #center column
CSS: no relative positioning at all
display: table; on parent and table-cell on the 3 columns. This will be visually (and only visually) a table. Well, a table layout and not a table structure.
200px width on #left and #right
table-layout: fixed; on parent to switch the table algorithm to the one that respect dimensions as told by the author and not those guessed by dimensions of content of cells
Constrained widths for the parent min-width: 800px; (400+200+200) and on the grand-parent max-width: 1200px; (800+200+200) (edit: max-height on #container only worked on Fx, not Chrome). To my surprise, it works as is.
Compatibility: IE8+
You can play with inline-block with IE6/7 if needed (well, display: inline; zoom: 1; the IE6/7 equivalent of inline-block for outdated browsers)
Is there any way to achieve this in CSS3?:
height: 100% -110px;
My context:
You can't calulate it with pure CSS. (it will not work in all browsers, as mentioned by Litek ) But there is a organizational way to handle this, but you will need to wrap you element in a other one:
body {
height; 100%;
padding: 0 0 20px;
}
div#wrap {
background: #fff;
height: 100%;
padding: 0 0 20px;
margin: 0 0 -20px;
}
div#wrap div { //this would be your actual element
height: 100%;
background: pink;
}
What you want to use is calc() that is comming to FF and propably webkit, but don't count on it being widely supported anytime soon.
As for your example, maybe sticky footer will be some inspiration for you.
Edit
Nowadays it's well supported by major browsers:
http://caniuse.com/calc
Directly like that i'm not aware of any feature widely adopted to do that.
But there is a easy method to achieve the effect.
Put all element inside a container <div> with 'height: 100%', this container should have position relative so you can position the other elements inside it relative to its position. place the header on top and the footer at bottom with absolute positioning and calculate with javascript the height that the content div must have.
You can also subscribe the 'window.onResize' event to recalculate when the window is resized.
I know this is not a clean and prety solution, but is the one the you can make work well in almost any browser.
In the context it was given the 2nd div height value doesn't really matter. Actually it's only important where that div starts and where it ends.
In other words height = vertical end - vertical start:
#div2 {
position:absolute;
top:90px;/*20+50+20*/
bottom:20px;
}
http://jsfiddle.net/cGwrw/3/
I'm working on a resizable page with a sidemenu to the right, and it almost works as supposed on this simple example:
http://pastehtml.com/view/1do8cy9.html
The problem though is that position auto and min-width dont react as expected. If you drag the browserwindow smaller than 500px (as the min-width is set to), the red sidemenu continues over the green content..
How do I make the sidebar stop when it reaches the min-width, fx 500px?
The absolute positioned div should be inside the min width div which should have position relative
Edit, better explanation:
For the sidebar: add top: 0 to the red sidebar and place it inside the min-width container.
For the container: replace the margin-right property with padding-right and add position:relative
I have a fix !
It's weird though:
body{
position:absolute;
top:0;
left:0;
bottom:0;
min-width:1300px;
width:100%;
overflow:auto;
padding:0;
margin:0;
}
i want to center align an image of 18px height with text next to it. Here is the code i use:
<div style="line-height:18px; font-size:12px;">
<img src="somepic.jpg" style="height:18px; vertical-align:middle;">Some text here
</div>
With that code, the div container is rendered with a height of 19px instead of 18px and text isn't centered with image. I tried on Safari 4 and Firefox 3.6. What is the reason for that 1 px?
Thanks
Don't forget to reset styles
(margin/padding) : div, img, span {
margin:0; padding:0; border:0 }
For vertical-align to work, your
elements must me inline.
A classic choice to align text
vertically is to give a line-height
equal to container.
For example :
<div><img src="somepic.jpg" style="height:18px; vertical-align:middle;"><span style="line-height:18px;">Some text here</span></div>
Maybe you have a border somewhere in there you need to get rid of or set to zero width?
i'm not totally sure I understand what the problem is here but if its just that the image is a few pixels from where you would like it to be, then why don't you just position the image relatively. for example:
<div style="line-height:18px; font-size:12px;">
<img src="somepic.jpg" style="height:18px; vertical-align:middle; position: relative; bottom: 2px;">Some text here
</div>
this will shift the image up by 2px from where it originally was.