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;
}
Related
I have two containers which are both children of a main-content div. Whenever the second container (or any for that matter) overflow i can scroll over, BUT both the divs overflow, just the content.
For instance, the image below shows the second container overflowing, but the background colors do not expand the entire way as i scroll. Iv'e tried absolute positioning, but the results are not what i need.
Also, I would like any padding to be included when scrolling. For example, is i set my padding to be padding: 0 10px i want to be able to scroll 10px more than the overflowing content (considering my div will expand?)
Here is a JSFIDDLE of the replicated issue.
UPDATE:
I can fix the issue by setting each individual div's background color and also setting the main background color, but that seems a bit unclean and I would rather have a better way to get the desired results.
This JSFIDDLE is my desired result, but there are so many "hacks" like setting font-size to 0, setting the main-content's background color, setting each div's background color, etc. I am trying to get the same result without all these workarounds.
The easy way is to use table layout.
.main-container {
display: table;
}
.container, .second-container{
display: table-row;
}
http://jsfiddle.net/afelixj/4mpue0gw/2/
Just add the display: table to .main-container class.
.main-container{
display: table
}
Try like this: Demo
.main-container {
overflow-x: auto;
color: #AAA;
background: #343434;
}
.container {
white-space: nowrap;
}
.second-container {
height: 300px;
white-space: nowrap;
background: #454545;
display:table;
width:100%;
}
You can try this CSS:-
.main-container {
overflow-x: auto;
color: #AAA;
display: table;
}
.container {
white-space: pre-wrap;
background: #343434;
display: table-row;
}
.container > div {
display: inline-block;
height: 50px;
line-height: 50px;
padding: 0 10px;
}
.second-container {
min-height: 300px;
white-space: nowrap;
background: #454545;
display: table-row;
padding: 10px;
}
.second-container > div {
display: table-row;
white-space: pre-wrap;
line-height: 22px;
}
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 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
So I have been working on my first website, and I'm having lots of fun doing it.
However, I have found it very difficult to achieve centering a paragraph (spanning more than one line) vertically and horizontally inside of it's div container.
The div has a proportional width (96%), and it is not set by pixels. Also, the paragraph has a set amount of padding (ex: 20px top and bottom).
Is there a trick to center vertically and horizontally in this situation?
Thanks a bunch!
See this fiddle - http://jsfiddle.net/zv2Pu/1/
I have centered p both horizontally and vertically within the div container.
Hope this helps!
From you 2 examples:
a single container inside a sized box:
you can use a pseudo to vertical-align pseudo and inside boxe aside each others
DEMO
.holder {
width: 96%;
height: 400px;
border: 1px solid black;
text-align:center;
}
.holder:before {
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
}
.holder p {
display:inline-block;
vertical-align:middle;
width: 70%;
margin: 20% auto;
text-align:left;
}
A single or several boxes inside a sized box:
you can use display:table-cell; DEMO
.holder {
width: 96%;
height: 400px;
border: 1px solid black;
display:table-cell;/* it will expand if content grows oversized */
vertical-align:middle;
}
.holder p {
width: 70%;
margin: 10px auto;
}
.holder div {
width: 70%;
margin: 10px auto;
}
You could have simply used text-align: center; on your div.
I'm playing with css3's flexbox in Chrome (no need to worry about cross-browser for this). I'm having a hard time convincing it to lay out my content the way I'd like. Here's a sketch of my goal:
Here's a jsFiddle of my attempt: http://jsfiddle.net/Yht4V/2/ This seems to work great except each .group will expand its height rather than create multiple columns.
I'm using flexbox pervasively here. The body lays out vertically, with the #content div taking the remaining height of the page. Each .group is laid out horizontally. Finally, each .item is laid out within a .group vertically with wrapping.
Unfortunately, each .group ends up as a single column by expanding the #content height, which causes a vertical scrollbar (unwanted). If I set the height of each .group to a fixed pixel size, the items break out into multiple columns, but this defeats the fluidity of the flexbox. Here's what it looks like with fixed heights: http://jsfiddle.net/Yht4V/3/
So, how can I get my #content div to not expand vertically since everything is managed with flexboxes without setting a fixed height? I was expecting the flexbox to trigger more columns instead of expanding the height of its parent and causing a scrollbar.
From what I've seen with the Chrome and Opera implementations for Flexbox, a flex-direction of column requires restricting the height of the element, otherwise it will continue expanding vertically. It doesn't have to be a fixed value, it can be a percentage.
That said, the layout you want for your .group elements can also be achieved by using the CSS Columns module. The flow of the elements will be similar to that of the flexbox column orientation, but it will create columns as long as there's enough width for them, regardless of how long the document is.
http://jsfiddle.net/Yht4V/8/ (you'll have to excuse the lack of prefixes)
html {
height: 100%;
}
body {
height: 100%;
display: flex;
flex-flow: column nowrap;
}
h1 {
padding: 1em;
}
#content {
padding: 10px;
background-color: #eee;
display: flex;
flex-grow: 1;
}
#content > .group {
margin: 10px;
padding: 10px;
border: 1px solid #cfcfcf;
background-color: #ddd;
flex: 1 1 auto;
}
#content > .group:first-child {
columns: 10em;
flex-grow: 2;
}
#content > .group .item {
margin: 10px;
padding: 10px;
background-color: #aaa;
break-inside: avoid;
}
#content > .group .item:first-child {
margin-top: 0;
}
Leaving it as a bunch of nested flexboxes, this was about as close as I could get it:
http://jsfiddle.net/Yht4V/9/ (again, no prefixes)
html {
height: 100%;
}
body {
height: 100%;
display: flex;
flex-flow: column nowrap;
}
h1 {
padding: 1em;
}
#content {
padding: 10px;
background-color: #eee;
display: flex;
flex: 1 1 auto;
height: 100%;
width: 100%;
}
#content > .group {
margin: 10px;
padding: 10px;
border: 1px solid #cfcfcf;
background-color: #ddd;
display: flex;
flex-flow: column wrap;
flex: 1 1 30%;
max-height: 100%;
}
#content > .group .item {
margin: 10px;
padding: 10px;
background-color: #aaa;
}
Replace the following in your css -
display: -webkit-flex;
to the following -
display: -webkit-box;
This worked very well for me :-)