I am trying to create a scrollable div. I learnt that I can make it with overflow-y: scroll, however, when I tried it, in my case it's overlapping its parent and it doesn't get scrollable.
Html:
<div id="parent">
<div id="child"></div>
</div>
Css:
#parent {
height: 100px;
width:300px;
background-color:red;
}
#child {
background-color: blue;
height: 150px;
width: 250px
}
In this example (that is also on bootply), I expected to keep the blue inside its parent and becomes a scrollable div; however instead it overlaped its parent and didn't get scrollable.
What am I doing wrong/missing?
add overflow: auto to parent
#parent {
height: 100px;
width:300px;
background-color:red;
overflow: auto;
}
#child {
background-color: blue;
/*height: 150px;*/
width: 250px;
color: #fff;
display: inline-block;
}
<div id="parent">
<div id="child">
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
</div>
</div>
Just put overflow property with a value of scroll or auto on parent.
#parent {
height: 100px;
width:300px;
background-color:red;
overflow: auto;
}
#child {
background-color: blue;
height: 150px;
width: 250px
}
Related
I have a flexbox layout with two columns. Column one contains an image, at design time the aspect ratio of the image is unknown. I want to display the whole image while maintaining its aspect ratio. Column two contains several lines of text, length is unknown at design time. The container should not have a fixed height.
How can I maximize the space available in column one for the image, without the image height exceeding the height of (the text in) column two?
In the code snippet below I want the height of the black image to be less than or of the same height as the right column with gray background, it should never be taller.
.row {
display: flex;
padding: 5px;
margin: 5px;
align-items: flex-start;
background-color: blue;
}
.col1 {
flex-grow: 1;
background-color: yellow;
align-self: stretch;
}
.col2 {
background-color: lightgray;
padding: 10px;
min-width: 300px;
}
img {
width: 100%;
height: 100%;
max-height: 100%;
object-fit: contain;
}
<div class="container">
<div class="row">
<div class="col1">
<img src="https://dummyimage.com/256x256/000/fff">
</div>
<div class="col2">
<p>Here's some text</p>
<p>And some more text</p>
<p>And some more text</p>
</div>
</div>
</div>
You could have an average result via height:0; + min-height:100% , but parent's width will hardly be update .
.row {
display: flex;
padding: 5px;
margin: 5px;
background-color: blue;
justify-content:start;
}
.col1 {
flex: 1 1 auto;
background-color: yellow;
align-self: stretch;
}
.col2 {
background-color: lightgray;
padding: 10px;
flex:1 0 auto;
}
img {
height:0;
min-height: 100%;
min-width:100%;
object-fit: contain;
}
<div class="container">
<div class="row">
<div class="col1">
<img src="https://dummyimage.com/256x256/000/fff">
</div>
<div class="col2">
<p>Here's some text</p>
<p>And some more text</p>
<p>And some more text</p>
</div>
</div>
</div>
To achieve this kind of result you need to have one of the column's widths fixed.
In the below example I have fixed the width of the image to 256px.
.row {
display: flex;
padding: 5px;
margin: 5px;
align-items: flex-start;
background-color: blue;
}
.col1 {
flex: 0 0 256px;
background-color: yellow;
}
.col1 > img {
width: 256px;
}
.col2 {
flex: 1;
background-color: lightgray;
padding: 10px;
}
<div class="container">
<div class="row">
<div class="col1">
<img src="https://dummyimage.com/600x600/000/fff">
</div>
<div class="col2">
<p>Here's some text</p>
<p>And some more text</p>
<p>And some more text</p>
<p>And some more text</p>
<p>And some more text</p>
<p>And some more text</p>
</div>
</div>
</div>
I have some text that can overflow the parent container:
body {
margin: 200px;
}
.container {
width: 100px;
height: 50px;
background-color: #bbb;
text-align: center;
}
.header {
white-space: nowrap;
}
<div class="container">
<div class="header">
Short Text
</div>
<div class="header">
Very long text that should not wrap and be center aligned
</div>
</div>
When text is short, it is center aligned, as expected.
However, when the text overflows the container, it's not center aligned anymore.
How could I align the text horizontally regardless of the length of the text?
Desired outcome:
html:
<div class="container">
<div class="header">
<div>Short Text</div>
</div>
<div class="header">
<div>Very long text that should not wrap and be center aligned</div>
</div>
</div>
</body>
</html>
css:
body {
margin: 200px;
}
.container {
width: 100px;
height: 50px;
background-color: #bbb;
display: flex;
flex-wrap: wrap;
}
.header {
white-space: nowrap;
position: relative;
left: 50%;
transform: translateX(-50%);
}
for demo here, https://jsfiddle.net/jinny/qs7wL4nv/33/
Use text-indent:
body {
margin: 200px;
}
.container {
width: 100px;
height: 50px;
background-color: #bbb;
text-align: center;
}
.header {
white-space: nowrap;
text-indent: -8em;
}
<div class="container">
<div>
Short Text
</div>
<div class="header">
Very long text that should not wrap and be center aligned
</div>
</div>
flexbox can do this easily
body {
margin:0 200px;
}
.container {
width: 100px;
height: 50px;
background-color: #bbb;
display:flex;
flex-wrap:wrap;
justify-content:center;
}
.header {
white-space: nowrap;
}
<div class="container">
<div class="header">
Short Text
</div>
<div class="header">
Very long text that should not wrap and be center aligned
</div>
</div>
I have a small dropdown selection inside overflow box. Problem is I cannot make links background fill full width. Just try to scroll:
.outer {
width: 100px;
height: 100px;
overflow: auto;
border: 1px solid black;
}
.inner a {
background: none #ccc;
display: inline-block;
white-space: nowrap;
}
.inner.block a {
display: block;
}
<p>inline-block:</p>
<div class="outer">
<div class="inner">Some link title in here.</div>
<div class="inner">Some much longer link title in here.</div>
</div>
<p>block:</p>
<div class="outer">
<div class="inner block">Some link title in here.</div>
<div class="inner block">Some much longer link title in here.</div>
</div>
Also on Playground.
I can modify CSS and HTML any way, the container has position: absolute. Also, the background is an image repeating, not a solid color.
How to make the background behind the text to extend to the edge?
Just wrap the links in another div. If you need background images per link, attach them to inner div. If you need the whole bar clickable, flip the <a>'s and the <div>'s. Like this:
<div class="outer">
<div class="background">
<div class="inner">Some link title in here.</div>
<div class="inner">Some much longer link title in here.</div>
</div>
</div>
.background {
display: inline-block;
white-space: nowrap;
}
.background .inner {
background: none #ccc;
}
JsFiddle
Hope that takes everything you needed into account.
In my example, links are clickabe in full width, and you can add repeateable background easly.
<div class="outer">
<div class="background">
<div class="inner">Some link title in here.</div>
<div class="inner">Some much longer link title in here.</div>
</div>
</div>
-
.outer {
width: 100px;
height: 100px;
overflow: auto;
border: 1px solid black;
}
.outer a{
display: block;
background: url(http://nonessentials.org/wp-content/uploads/2014/01/dots-small-pattern.png);
background-size:cover;
}
.background {
background: none #ccc;
display: inline-block;
white-space: nowrap;
}
JsFiddle
I hope this could be the solution:
<p>inline-block:</p>
<div class="outer">
<div class="table">
<div class="inner">Some link title in here.</div>
<div class="inner">Some much longer link title in here.</div>
</div>
</div>
.outer {
width: 100px;
height: 100px;
overflow: auto;
border: 1px solid black;
}
.table {
display:table;
}
.inner {
display:table-row;
}
.inner a {
background: none #ccc;
display: block;
white-space: nowrap;
}
.inner a:hover {
background-color:orange;
}
Demo: http://jsfiddle.net/jscohdL0/27/
So, wrapper div again, but with display:table property, and inner divs as table-rows... Clickable, hoverable™...
Without using any wrapper:
.inner {
width: 300px;
}
.inner a {
background: none #ccc;
display: inline-block;
white-space: nowrap;
width:100%; /*addition*/
}
With wrapper:
.outer {
width: 100px;
height: 100px;
overflow: auto;
border: 1px solid black;
}
.cover {
background: none #ccc;
display: inline-block;
white-space: nowrap;
}
.inner a {
width: 100%;
display: inline-block;
}
.inner.block a {
display: block;
}
<p>inline-block:</p>
<div class="outer">
<div class="cover">
<div class="inner">Some link title in here.
</div>
<div class="inner">Some much longer link title in here.
</div>
</div>
</div>
<p>block:</p>
<div class="outer">
<div class="cover">
<div class="inner block">Some link title in here.
</div>
<div class="inner block">Some much longer link title in here.
</div>
</div>
</div>
I have a div-container with a fix width and some child-elements witch could be bigger than the parent.
Is it possible to let all the child-elements take the full width of the scrollable area from the parent-element (overflow: auto)?
#container {
width: 200px;
background-color: grey;
overflow:auto;
margin:10px;
}
#container p{
display:block;
background-color: green;
white-space: nowrap;
width: 100%;
}
<div id="container">
<p>Sample Text 1</p>
<p>Sample Text 2</p>
<p>A very very very very very long Sample Text</p>
</div>
Here is the fiddle. When you scroll to the right, you can see that the child-elements background-color is smaller than the content.
Wrap the content in a div, and set it to display: inline-block:
#container {
width: 200px;
background-color: grey;
overflow: auto;
margin: 10px;
}
#container>div {
display: inline-block;
}
#container p {
display: block;
background-color: green;
white-space: nowrap;
}
<div id="container">
<div>
<p>Sample Text 1</p>
<p>Sample Text 2</p>
<p>A very very very very very long Sample Text</p>
</div>
</div>
You could set the child elements to display:table-row;
#container {
width: 200px;
background-color: grey;
overflow: auto;
}
#container p {
display: table-row;
background-color: green;
white-space: nowrap;
}
<div id="container">
<p>Sample Text 1</p>
<p>Sample Text 2</p>
<p>A very very very very very long Sample Text</p>
</div>
Add a extra <div> if you need extra controls for styling.
#container {
width: 200px;
background-color: grey;
overflow: auto;
}
#container div {
display: table;
border-spacing: 0 10px;
}
#container p {
display: table-row;
background-color: green;
white-space: nowrap;
}
<div id="container">
<div>
<p>Sample Text 1</p>
<p>Sample Text 2</p>
<p>A very very very very very long Sample Text</p>
</div>
</div>
You can use from absolute position property to do that .
#container {
width: 200px;
background-color: grey;
overflow:auto;
margin:10px;
}
#container p{
display:block;
background-color: green;
white-space: nowrap;
position:absolute;
}
I have a left floating div which serves as a sidebar (red). Next to it, there is another div that stores the page content (green). The elements inside the content div are left floating (blue).
I want to be able to scroll the boxes horizontally when the browser width is too small to accommodate them; for example if there are a lot of boxes. Instead, the content div moves below the sidebar div and I am scrolling the whole page.
Here is the page layout when the browser window is wide enough:
Here is the HTML:
<div id="container">
<div id="sidebar">Sidebar</div>
<div id="content">
<p class="box">Box 1</p>
<p class="box">Box 2</p>
<p class="box">Box 3</p>
</div>
<div style="clear: both;"></div>
</div>
And here is the CSS:
* {
margin: 0px;
padding: 0px;
}
#container {
background: yellow;
}
#sidebar {
float: left;
background: red;
}
#content {
float: left;
white-space: nowrap;
background: green;
}
.box {
width: 200px;
height: 250px;
background: blue;
margin: 10px;
float: left;
}
Please help me understand what am I doing wrong. Thank you.
You simply need something to wrap your content with the CSS property overflow-x: scroll;.
**Important: This is a CSS3 feature and some browsers may not support overflox-x. Therefore, I highly suggest you read the following: http://net.tutsplus.com/tutorials/html-css-techniques/html5-and-css3-without-guilt/.
Preview: http://jsfiddle.net/WXFJU/
HTML
<div id="container">
<div id="sidebar">Sidebar</div>
<div class="overflow-x">
<div id="content">
<p class="box">Box 1</p>
<p class="box">Box 2</p>
<p class="box">Box 3</p>
</div>
</div>
<div style="clear: both;"></div>
</div>
CSS
* {
margin: 0px;
padding: 0px;
}
#container {
width: 100%;
background: yellow;
}
#sidebar {
float: left;
background: red;
}
#content {
float: left;
white-space: nowrap;
background: green;
}
.box {
width: 200px;
height: 250px;
background: blue;
margin: 10px;
float: left;
}
.overflow-x {
overflow-x: scroll;
display: block;
}
You need to set a width for the container too.
Your content-div also needs to have a width.
#content {
width: 1000px;
}