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;
}
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'm trying to create two centered div, which are seperated by a border like this.
Didn't know how to insert the border between the two div.
the two div are clickable.
.homescreen-content {
display: flex;
flex-direction: column;
max-height: 100% !important;
}
.goto {
margin-top:20%;
left:0;
height: 100% ;
width: 100% !important;
background-color: green;
text-align: center;
}
.no {
left:0;
height: 100%;
width: 100% !important;
background-color: red;
text-align: center;
}
<div class="homescreen-content" scroll="false">
<div (click)="open()" class="goto">
<h2>TITLE 1 CENTRED</h2>
<p>SOME CENTRED TEXT</p>
</div>
<hr class="border">
<div (click)="open()" class="no">
<h2>TITLE 2 CENTRED</h2>
<p>SOME CENTRED TEXT</p>
</div>
</div>
As mentioned by Fabio, you could replace your <hr> tag with a <div> and set the height of the <div> to be the thickness of the border you want.
.homescreen-content {
display: flex;
flex-direction: column;
max-height: 100% !important;
}
.goto {
margin-top:20%;
left:0;
height: 100% ;
width: 100% !important;
background-color: green;
text-align: center;
}
.no {
left:0;
height: 100%;
width: 100% !important;
background-color: red;
text-align: center;
}
.border {
width:100%;
height:10px;
background:blue;
}
<div class="homescreen-content" scroll="false">
<div (click)="open()" class="goto">
<h2>TITLE 1 CENTRED</h2>
<p>SOME CENTRED TEXT</p>
</div>
<div class="border"></div>
<div (click)="open()" class="no">
<h2>TITLE 2 CENTRED</h2>
<p>SOME CENTRED TEXT</p>
</div>
</div>
You can add border using CSS, look my CSS carefully !
.homescreen-content {
display: flex;
flex-direction: column;
max-height: 100% !important;
}
.goto {
margin-top:20%;
left:0;
height: 100% ;
width: 100% !important;
background-color: green;
text-align: center;
border-bottom : 15px solid white ;
}
.no {
left:0;
height: 100%;
width: 100% !important;
background-color: red;
text-align: center;
border-top : 15px solid white ;
}
<div class="homescreen-content" scroll="false">
<div (click)="open()" class="goto">
<h2>TITLE 1 CENTRED</h2>
<p>SOME CENTRED TEXT</p>
</div>
<div (click)="open()" class="no">
<h2>TITLE 2 CENTRED</h2>
<p>SOME CENTRED TEXT</p>
</div>
</div>
You can change border color,
Border : 15px solid red ;
You can also change border type,
Border : 15px dotted blue ;
The span appears when hovering over the container div, but it pushes the previous text to the left, how can I prevent that?
The height, width and border on the wrapper are just there to demonstrate the effect.
#wrapper {
text-align: center;
width: 500px;
height: 200px;
border: 1px solid black;
}
.element {
display: inline-block;
}
.element > span {
display: none;
}
.element:hover > span {
display: inline;
}
<div id="wrapper">
<div class="element">Some Sample Text <span>Some hovered text</span></div>
<br>
<div class="element">Some Sample Text <span>Some hovered text</span></div>
<br> ...
</div>
You can set position: absolute; to the span, also add white-space: nowrap; to the container to prevent wrapping as needed.
#wrapper {
text-align: center;
width: 500px;
height: 200px;
border: 1px solid black;
}
.element {
display: inline-block;
white-space: nowrap; /* NEW */
}
.element > span {
display: none;
position: absolute; /* NEW */
}
.element:hover > span {
display: inline;
}
<div id="wrapper">
<div class="element">Some Sample Text <span>Some hovered text</span></div>
<br>
<div class="element">Some Sample Text <span>Some hovered text</span></div>
<br> ...
</div>
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
}