I have a webpage containing two <div> blocks: .fixed and .stretch. Here you can see its HTML and CSS code: http://jsfiddle.net/p2bhuzs0/. My issue is, when I resize browser window so width of .stretch block is less than its min-width value, a blank row appears above the block.
How do I make it not appearing, and, instead of it, make vertical scroll bar appearing?
It seems like you're trying to effectively create a tabulated layout *(though not using a table as you dont have data), so why not use CSS tables?
Demo Fiddle
CSS:
.container {
position: relative;
background: #ddd;
border: 1px solid #999;
display:table;
}
.fixed, .stretch{
display:table-cell;
}
.fixed {
width: 420px;
}
.fixed div{
background-color: limegreen;
margin-right:20px;
}
.stretch {
background-color: lightblue;
overflow: hidden;
text-overflow: ellipsis;
min-width: 300px; /* When less than this value, a blank row appear above .stretch block */
max-width: 500px;
}
You'll then need to wrap the content of the fixed column in another div
Related
I want to hide div when it is empty, through CSS, preferably, but I already applied a style that I don't want to sacrifice.
Here is my code rendered as:
<div class="auto-style2"></div>
Here is my second style:
.auto-style2 {
width: 1100px;
height: 200px;
overflow-y: scroll;
border:1px solid #d3d3d3;
}
I tried: empty-cells: hide;, but that didn't work.
The link below recommended, div:empty { display: none };
But since my div is already using a different style, I would think that it would have to be done through that style only; I think it is going to ignore div:empty; because the second is applied to my div.
Related:
How to hide/remove a DIV when empty
You can use:
`.auto-style2:empty { display: none }`
This will work along with your existing .auto-style2{...}.
Note: For empty to work, it has to be literally empty. If there any visible white spaces it wont work.
.auto-style1 {
width: 1100px;
height: 200px;
overflow-y: scroll;
border:1px solid #d3d3d3;
}
.auto-style1:empty{
display:none;
}
.auto-style2 {
width: 1100px;
height: 200px;
overflow-y: scroll;
border:1px solid #d3d3d3;
}
.auto-style2:empty{
display:none;
}
.auto-style1 shows up cause of white spaces.
<div class="auto-style1"> </div>
.auto-style2 is hidden below this line.
<div class="auto-style2"></div>
You can give the div an #ID and then do:
ID:empty{display: None}
NOTE: Despite the title, this question contains no JavaScript, I'm just using those terms to illustrate the problem.
I have a div of fixed width, and sometimes the content within it is too wide, so I have set it to overflow: auto, and that does work properly. However, if the div contains both text and an image, one that is too large to fit without overflowing, the text still wraps to the width of the visible portion of the div (clientWidth), rather than to its full extent (scrollWidth). This seems very ugly to me, but I'm not sure how to fix it.
Simply turning off text wrapping is not a good solution either, because then the text will stretch the div far more than necessary if it is wider than the image.
Example
Interesting question.
This is the only workaround I could find so far that uses cross browser css.
http://codepen.io/anon/pen/QKyGBr
.outer {
margin: auto;
width: 400px;
overflow: auto;
}
.outer > div {
display:table;
}
.outer > div > * {
box-sizing:border-box;
border: 5px outset red;
display:block;
margin:0;
}
Flexbox solution:
http://codepen.io/anon/pen/jrWVJY
.outer {
margin: auto;
width: 400px;
overflow: auto;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.outer > div > * {
display:block;
border: 5px outset red;
margin:0;
}
Min-Content solution:
http://codepen.io/anon/pen/kkPLdR
.outer {
margin: auto;
width: 400px;
overflow: auto;
}
.outer > div {
width:min-content;
width:-moz-min-content;
}
.outer > div > * {
border: 5px outset red;
display:block;
margin:0;
}
I'd like to create a table like div structure, which is placed in a container, can be scrolled horizontally and gets not breaked. I wrote the structure, but when the content gets longer than the container it puts the rest of the content in a new line.
Here's my code so far:
http://jsfiddle.net/rcdzdyv7/2/
where all of these elements represent a "table" row:
<div class="header">...</div>
<div class="body">...</div>
<div class="footer">...</div>
My goal is to make these rows one-lined and look like if it was a table. How could I solve this?
You can't use float:left because when content reach the width there's no way to avoid the floating elements "jumping" to next line (without changing the html structure).
However you can use display:inline-blockbecuase your elements this way can change their behaviour with the property white-space:nowrap.
Basically:
.container {
width: 500px;
overflow-x: scroll;
}
.header {
width: auto;
display:inline-block;
background-color: #D9D9D9;
white-space: nowrap;
clear: both;
}
.body {
display:inline-block;
margin: 5px 0;
}
.body-row {
background-color: #E5EBFF;
display:inline-block;
clear: both;
white-space: nowrap;
}
.footer {
clear: both;
background-color: #D9D9D9;
white-space: nowrap;
}
.row-title {
width: 300px;
display:inline-block;
}
.row-content {
width: 150px;
display:inline-block;
}
.value {
width: 100%;
}
as in this FIDDLE
You could use:
.row-content {
width: 150px;
display: inline-block;
}
instead of:
.row-content {
width: 150px;
float: left;
}
Let me know if it works!
this is because you are using DIV with delimited width no set height.
so when the width needed will be too high for the container width it will automatically do under. Hope this makes sense. A soluation can be to use inline-block, personnally I would recomment to use a classic table but just my opinion
try these css properties to the <div> for which you want a scroll
div {
overflow-x: scroll;
overflow-y: hidden;
}
hope this is what you want !
I have a container div that has two inner divs. The inner divs toggle display:block/none on a hover over the outer container, so only one inner is visible at any given time.
The outer container has a min-height, but can expand depending on the inner contents. If both inner contents are shorter than the min-height, everything works well. However, if one of the inner containers is taller than the min-height, I get a jump in the height of the outer container on hover.
What I want is:
The outer container keeps its min-height if both inner containers are shorter.
The outer container has the height of the taller of the two inner containers IF either one is taller than the min-height
There is no expanding/collapsing happening on hover at any time.
Sample HTML:
<div class="outer">
<div class="inner inner1">Inner 1 Green</div>
<div class="inner inner2">Inner 2 Blue</div>
</div>
<div class="after">Some text afterwards</div>
Sample CSS:
.outer {
position:relative;
width: 300px;
min-height: 150px;
background: red;
padding: 10px
}
.inner {
width: 200px;
}
.inner1 {
background: green;
height: 200px
}
.inner2 {
background: blue;
height: 100px;
display: none;
}
.outer:hover .inner1 {
display: none;
}
.outer:hover .inner2 {
display: block;
}
Sample Fiddle: http://jsfiddle.net/ZhS6c/
Important: I am looking for a pure CSS solution. I could easily fix this with jQuery or basic JS, but this is not an option.
Don't hide the elements by setting display to none, instead set their margin-left to a large negative number which places them far away the left side of the screen. This way, if you float the two .inner and add a clearfix (or better, set display: hiddden on .outer), the container will always be tall as the tallest child element.
In code:
.inner {
width: 200px;
float: left;
}
.inner1 {
background: green;
height: 200px
}
.inner2 {
background: blue;
height: 100px;
margin-left: -1000px;
}
.outer:hover .inner1 {
margin-left: -1000px;
}
.outer:hover .inner2 {
margin-left: 0;
}
Then, on the container you have two solutions: the clearfix (http://jsfiddle.net/ZhS6c/3/)
.outer:after{
content: "";
display: block;
clear: left;
}
and the block formatting context forcing (http://jsfiddle.net/ZhS6c/2/)
.outer{
visible: hidden;
}
Method two
There are also different methods, for example you can hide the unwanted element by shrinking its width to zero. When doing this (with all the floating thing, of course) also set overflow to hidden, otherwise the content will still be visible. Live example: http://jsfiddle.net/ZhS6c/4/.
Without floating
If you don't like the float in there you could try a inline-block approach, and set the widths as before. Live example: http://jsfiddle.net/ZhS6c/5/. This solution needs also a little edit of the HTML code, since if you place a whitespace between the two .inner it will be actually rendered (try to remove the comment in the example to see what happens).
Try this.Uses combination of display and visibility :
Case 1: .inner1 is always greater than .inner2
.inner1 {
display:inline-block;
background: green;
height: 200px
}
.inner2 {
background: blue;
height: 100px;
display: none;
}
.outer:hover .inner1 {
visibility:hidden; /*sets visiblity instead of display to maintain height;*/
width:1px; /*reduces width to 1px for adjustment."width:0px" will not work. */
}
.outer:hover .inner2 {
/* Below two lines for .inner2 div to be on same line*/
display: inline-block;
float:left;
}
See this Demo Fiddle with .inner1 height = 200px
Even if you increase the height of .inner1 the container will adjust the height accordingly:
See this Demo Fiddle with .inner1 height = 300px
OR
Case 2: .inner2 can be greater than .inner1
See this Demo Fiddle .inner2 > .inner1
Change done for above fiddle:
.inner2 {
position:relative;
right:4px;
background: blue;
height: 400px;
display: none;
}
.outer:hover .inner2 {
/* Below two lines for .inner2 div to be on same line*/
display: inline-block;
vertical-align:top;
}
Fiddle in response to comment: Container gets taller div height in the beginning itself
If the margin trick doesn't work, another option is using display: table, then collapse the one not to be shown with a combination of width: 0 and visibility: hidden. The two items will form cells in a row which has the height of the taller one, while the zero width prevents it from otherwise impacting the page layout.
Maybe playing with opacity can help
Here's a fiddle
all i'v done is
.outer:hover .inner1 {
opacity:0;
}
.outer:hover .inner2 {
display: block;
position:absolute;
top:10px;
}
I put the inner2 in absolute so it goes on top, and so give it a margin top of 10px (cause of the padding of the parent container)
.outer:hover .inner1 {
visibility: hidden;
}
Try using visibility.
Remove the min height from the outer and let the hight be determined by the what ever is the highest inner div
.outer {
position:relative;
width: 300px;
min-height: 150px; !!!! remove this
background: red;
padding: 10px
}
I have a container div which has children anchored to the bottom. The problem is that when the div's overflow scrollbar appears, the bottom margin of the last child gets hidden.
Please see http://jsfiddle.net/TxEAP/3/. At first, there's a correct margin underneath the 1 div. Clicking "append one" so that the scrollbar eventually appears makes the last div not have a bottom margin anymore. Opening DevTools shows that the margin of that last child is there, but it is outside of the container's viewport, even when scrolling completely to the bottom.
How can this be solved? It would suffice to get this working in Google Chrome.
HTML:
<div class="main">
<div class="container">
<div class="item">1</div>
<!-- several of these .item divs -->
</div>
</div>
CSS:
.main {
height: 200px;
overflow-y: scroll;
position: relative;
border: 1px solid black;
}
.container {
width: 100%;
max-height: 100%;
position: absolute;
bottom: 0;
}
.item {
padding: 20px;
margin: 15px;
border: 1px solid black;
}
Here's my final solution using flexbox. It's supported well enough on Chrome despite all -webkit- prefixes. Basically, the idea is to have a dummy element that, in case of no overflow, fills up the space of the container starting from the top (so that the real children are anchored to the bottom); in case of overflow, it is hidden automatically because of height: 0. It does not suffer from the margin issue, and it does not collapse margins.
http://jsfiddle.net/mCYLm/1/
HTML:
<div class="main">
<div class="gap-filler"></div>
<div class="item">foo</div>
<!-- more `div.item`s -->
</div>
CSS:
div.main {
display: -webkit-box;
-webkit-box-orient: vertical;
height: 200px;
overflow-y: scroll;
}
div.main div.gap-filler {
-webkit-box-flex: 1;
height: 0;
}
div.main div.item {
border: 1px solid black;
margin: 20px;
padding: 20px;
}
Edit: This was a solution without flexbox, but it had selection issues.
A solution that eventually worked was the following: http://jsfiddle.net/TxEAP/7/. This appends hidden "content" which makes Chrome not hide the margin of the last .item div.
.container:after {
content: "";
font-size: 0;
display: block;
height: 1px;
}
Edit: The following only works if display: inline-block is possible.
Finally I found a solution. If all .items have display: inline-block except the first one, then the margin does not get hidden.
http://jsfiddle.net/TxEAP/5/
.item:not(:first-child) {
display: inline-block;
/* attempt at getting `width: auto` like `display: block` has */
width: -webkit-calc(100% - 2 * 15px);
box-sizing: border-box;
}
If you just move the overflow-y: scroll; from .main. to .container class then the margin is preserved. The only drawback is for less than 3 items (for the given container height) you get a small scrollbar placeholder, instead of a full height one.
Removing max-height:100% on the container seems to fix it for my test in Chrome 21.
Moving the properties so that the overflow is on the container, preserves the margin/padding for an element added to the end that results in the scrollbar appearing.
.main {
height: 200px;
border: 1px solid black;
}
.container {
width: 100%;
height: 100%;
overflow-y: scroll;
}