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)
Related
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,
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.
Could any one help me with this, vaadin table cell borders are not aligned properly with header border, but I don't have this issue in other browser.
I have followed the rules given by vaadin to style the table, even though I have this issue.
Any help would be great!
I am sorry I have not elaborated it properly.
Below are the instructions given by vaadin for table theme.
Table theme building instructions
Vaadin scroll table is very complex widget with dozens of features. These
features set some limitations for theme builder. To keep things working, it
is safest to try to just override values used in default theme and comfort to
these instructions.
Borders in table header and in table body need to be same width
specify vertical borders on .v-table-header-wrap and .v-table-body
*
Table cells in body:
padding/border for cells is to be defined for td elements (class name: .v-table-cell-content)
in default theme there are no borders, but they should work. Just set border-right or border-bottom
no padding or border is allowed for div inside cells (class name: .v-table-cell-wrapper) element
background is allowed for both elements
*
Table headers:
table cells in header contain .v-table-resizer and
.v-table-caption-container div elements, which are both floated to right
to align header caption to body content resizer width + .v-table-caption-container
padding right should be equal to content cells padding-right and border-right.
Possible cell border in header must be themed into column resizer.
*
*/
I have followed the same instructions and below is my SCSS...
<pre>
.v-table-header-wrap{
border-top:1px solid #c6c6c6;
border-left:1px solid #e2e2e2;
background:none #e2e2e2;
height:33px;
.v-table-header{
height:33px;
position:relative;
.v-table-resizer{
height:33px;
border-left:1px solid #d0d0d0;
border-right:1px solid #eee;
width:auto;
position:relative;
z-index:1;
}
}
}
.v-table-caption-container{
background:0 none;
#include box-sizing(border-box);
padding:0.813em 0.9em;
line-height:normal;
overflow:hidden;
position:relative;
top:1px;
}
.v-table-table tr{
td{
padding:4px;
border-color:$ClDwnClr $ClLtClr rgba(0, 0, 0, 0) $ClRtClr;
vertical-align:middle;
border-style:solid;
border-width:1px;
.v-table-cell-wrapper{
color:$Color;
position:relative;
top:0;
overflow:hidden;
text-overflow:ellipsis;
}
}
}
</pre>
The real issue is table cell borders are not aligned properly with table header cell borders in SAFARI browser but this is fine with other browsers.
I'm new to stackoverflow.com and this is my first post so:
I want to have a h1-text with underline. This underline will be an image and it should have a fixed width of 420px. The text in h1 will often be wider than the 420px, but sometimes shorter. Now I know that these are the solutions to get the underline as an image, but how do I set the fixed width for the underline only?
h1 {
background-image:url('images/hrBg.jpg');
background-position: 0px bottom;
background-repeat: repeat-x;
}
Create the background image with the width of 420px.
Then use the following css
h1 {
background:url('https://images.squarespace-cdn.com/content/v1/5834a5fd9de4bb511a531745/1572560269010-YEGGAHEJ1O3AG5OAMO7M/ke17ZwdGBToddI8pDm48kEnLsHrnzeww6Ind1smsg7N7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UZMvWVOiG2zXPfa_FplZumXplNQ97KbZI2EjeHIoBACLnr1xKjsq_-rO8kOgOtwYvw/Burning-Up-BG.jpg?format=2500w') no-repeat left bottom;
min-width:420px;
}
<h1>Text here</h1>
This will ensure that the background is shown only once to with of 420px. I have added the min-width property in case the content of h1 is smaller than 420px. The no-repeat property ensures that the background is shown only once as we have set the length via the actual image.
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;
}