I have a CSS issue here and I cannot figure out how to solve it.
I would like the .panel-extra-content section to have a scrollbar but it seems it is not working for some reason. Does anyone have an idea what I am doing wrong here? Thanks
.panel {
border: 1px solid black;
display: flex;
flex-direction: column;
width: 150px;
height: 60px;
}
.panel-content {
flex: 1 1 auto;
}
.panel-extra-content {
overflow-y: scroll;
}
.child {
height: 40px;
border: 1px solid red;
}
button {
height: 40px;
width: 100px;
}
<div class="panel">
<div class="panel-content">
<div class="info" tabindex="0"><span>Number</span></div>
<div class="panel-extra-content">
<div class="child">Child</div>
<div class="child">Child</div>
<div class="child">Child</div>
<div class="child">Child</div>
<div class="child">Child</div>
<div class="child">Child</div>
<div class="child">Child</div>
<div class="child">Child</div>
<div class="child">Child</div>
</div>
</div>
<div class="panel-footer">
<button>hey</button>
</div>
</div>
in order for it to be scrollable, you need to add a height to the .panel-extra-content class, eg:
.panel {
border: 1px solid black;
display: flex;
flex-direction: column;
width: 150px;
height: 60px;
}
.panel-content {
flex: 1 1 auto;
}
.panel-extra-content {
overflow-y: scroll;
height: 100px;
}
.child {
height: 40px;
border: 1px solid red;
}
button {
height: 40px;
width: 100px;
}
<div class="panel">
<div class="panel-content">
<div class="info" tabindex="0"><span>Number</span></div>
<div class="panel-extra-content">
<div class="child">Child</div>
<div class="child">Child</div>
<div class="child">Child</div>
<div class="child">Child</div>
<div class="child">Child</div>
<div class="child">Child</div>
<div class="child">Child</div>
<div class="child">Child</div>
<div class="child">Child</div>
</div>
</div>
<div class="panel-footer">
<button>hey</button>
</div>
</div>
Related
This question already has answers here:
Why are flex items not wrapping?
(2 answers)
Closed 10 months ago.
I want to put multiple divs in same row and if they cant fit to break to next line.I want this enter image description here instead of this enter image description here
.cardContainer {
display: flex;
}
.card {
min-width: 185.17px;
height: 88px;
border-radius: 8px;
background: red;
margin-right: 8px;
display: block;
}
<div className="cardContainer">
<div className="card">A</div>
<div className="card">A</div>
<div className="card">A</div>
<div className="card">A</div>
<div className="card">A</div>
<div className="card">A</div>
<div className="card">A</div>
</div>
CSS Flexbox would be your friend:
.cardContainer {
display: flex;
gap: 10px;
}
.card {
background-color: red;
color: white;
width:20%;
border-radius: 8px;
padding: 10px;
height: 100px;
}
<div class="cardContainer">
<div class="card">A</div>
<div class="card">A</div>
<div class="card">A</div>
<div class="card">A</div>
<div class="card">A</div>
<div class="card">A</div>
<div class="card">A</div>
</div>
.container {
display: flex;
flex-wrap: no-wrap;
gap: 10px 10px;
}
.item {
width: 20%;
height: 50px;
background-color: red;
}
<div class='container'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
I am trying to get 3 columns in a row and be the same height.
I am using the HTML/CSS below. I can't figure out why the boxes arent the same height.
.container {
text-align: center;
display: block;
width: 100%;
}
.grid {
width: 100%;
height: 100%;
}
.row {
display: flex;
height: 100%;
flex-direction: row;
}
.col {
background: #444;
padding: 2em;
flex: 1;
height: 100%;
border: 1px solid blue;
}
<div class="container">
<div class="data">
<div class="grid">
<div class="row">
<div class="col">
<p>col 1</p>
</div>
<div class="col">
<p>col </br>2</p>
</div>
<div class="col">
<p>col 3</p>
</div>
</div>
</div>
</div>
</div>
How can I make the boxes all the same height. thanks
Simply, remove the height: 100% from .col.
flex: 1; will do the job.
.row {
display: flex;
}
.col {
flex: 1;
background: #444;
padding: 2em;
border: 1px solid blue;
text-align: center;
}
<div class="container">
<div class="data">
<div class="grid">
<div class="row">
<div class="col">
<p>col 1</p>
</div>
<div class="col">
<p>col </br>2</p>
</div>
<div class="col">
<p>col 3</p>
</div>
</div>
</div>
</div>
</div>
As you can see the image on the left sticks to the right div, but once the right div wraps and puts under the picture, the image stays on the left. I would like to have the picture and the second div (below, after wrapping) in the same size, just matching the horizontal size.
(For some reason the picture is not displayed, but it is a 800x500px picture).
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: #91897b;
}
::-webkit-scrollbar-track:hover {
background: #ccb288;
}
::-webkit-scrollbar-thumb {
background: #e8aa45;
}
::-webkit-scrollbar-thumb:hover {
background: #f4a11a;
}
img {
max-width:100%;
max-height:500px;
}
.flex-container {
display: flex;
background-color: DodgerBlue;
flex-direction: row;
flex-wrap: wrap;
flex-grow:1;
}
.flex-container > div {
background-color: #fafafa;
width:auto;
height:100%margin: 1px;
font-size: 30px;
}
.caja-scroll{
overflow-y:auto;
background-color:#fafafa;
border-color: coral;
width:100%;
height:100%;
max-width:100%;
max-height:500px;
flex-shrink:5;
}
.bordes_gallery {
border-style:solid;
max-width:100%;
flex-grow: 1;
margin: 1px;
}
.gallery_item {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
max-height:100px;
border-style:dotted;
}
.gallery_item > #imagen {
order: 1;
flex-basis: 100px;
align-items:center;
justify-content:center;
}
.gallery_item > #texto {
order: 2;
align-items:center;
justify-content:center;
margin-left:5px;
}
<body>
<div class="flex-container">
<div style="order: 1; flex-basis: content; align-items:center; justify-content:flex-start; display: flex;">
<img src="http://kb4images.com/images/usa-wallpaper/36955559-usa-wallpaper.jpg"></img>
</div>
<div style="order: 2; flex-grow: 1; flex-basis: 28rem; max-height:500px; justify-content:flex-start; flex-shrink: 0;">
<div class="caja-scroll">
<div class="col-md-12 bordes_gallery">
<div class="gallery_item ">
<div id="imagen">
<img style="max-width:100px;" src="http://www.catolica.edu.sv/wp-content/uploads/2016/01/moodle-200x200.jpg">
</div>
<div id="texto">asdfadfs</div>
</div>
<div class="gallery_item ">
<div id="imagen">
<img style="max-width:100px;" src="http://www.catolica.edu.sv/wp-content/uploads/2016/01/moodle-200x200.jpg">
</div>
<div id="texto">asdfadfs</div>
</div>
<div class="gallery_item ">
<div id="imagen">
<img style="max-width:100px;" src="http://www.catolica.edu.sv/wp-content/uploads/2016/01/moodle-200x200.jpg">
</div>
<div id="texto">asdfadfs</div>
</div>
<div class="gallery_item ">
<div id="imagen">
<img style="max-width:100px;" src="http://www.catolica.edu.sv/wp-content/uploads/2016/01/moodle-200x200.jpg">
</div>
<div id="texto">asdfadfs</div>
</div>
<div class="gallery_item ">
<div id="imagen">
<img style="max-width:100px;" src="http://www.catolica.edu.sv/wp-content/uploads/2016/01/moodle-200x200.jpg">
</div>
<div id="texto">asdfadfs</div>
</div>
<div class="gallery_item ">
<div id="imagen">
<img style="max-width:100px;" src="http://www.catolica.edu.sv/wp-content/uploads/2016/01/moodle-200x200.jpg">
</div>
<div id="texto">asdfadfs</div>
</div>
</div>
</div>
</div>
</body>
Does this work for you ?
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: #91897b;
}
::-webkit-scrollbar-track:hover {
background: #ccb288;
}
::-webkit-scrollbar-thumb {
background: #e8aa45;
}
::-webkit-scrollbar-thumb:hover {
background: #f4a11a;
}
img {
max-width:100%;
max-height:500px;
}
.flex-container {
display: flex;
background-color: DodgerBlue;
flex-direction: row;
flex-wrap: wrap;
flex-grow:1;
}
.flex-container > div {
background-color: #fafafa;
width:auto;
height:100%margin: 1px;
font-size: 30px;
}
.caja-scroll{
overflow-y:auto;
background-color:#fafafa;
border-color: coral;
width:100%;
height:100%;
max-width:100%;
max-height:500px;
flex-shrink:5;
}
.bordes_gallery {
border-style:solid;
max-width:100%;
flex-grow: 1;
margin: 1px;
}
.gallery_item {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
max-height:100px;
border-style:dotted;
}
.gallery_item > #imagen {
order: 1;
flex-basis: 100px;
align-items:center;
justify-content:center;
}
.gallery_item > #texto {
order: 2;
align-items:center;
justify-content:center;
margin-left:5px;
}
#media screen and ( max-width: 1263px) {
.flex-container>div:nth-child(1){width:100%;}
.flex-container>div:nth-child(1)>img{width:100%;}
.flex-container {max-width:800px; margin: auto;}
}
<div class="flex-container">
<div style="order: 1; flex-basis: content; align-items:center; justify-content:flex-start; display: flex;">
<img src="http://kb4images.com/images/usa-wallpaper/36955559-usa-wallpaper.jpg"></img>
</div>
<div style="order: 2; flex-grow: 1; flex-basis: 28rem; max-height:500px; justify-content:flex-start; flex-shrink: 0;">
<div class="caja-scroll">
<div class="col-md-12 bordes_gallery">
<div class="gallery_item ">
<div id="imagen">
<img style="max-width:100px;" src="http://www.catolica.edu.sv/wp-content/uploads/2016/01/moodle-200x200.jpg">
</div>
<div id="texto">asdfadfs</div>
</div>
<div class="gallery_item ">
<div id="imagen">
<img style="max-width:100px;" src="http://www.catolica.edu.sv/wp-content/uploads/2016/01/moodle-200x200.jpg">
</div>
<div id="texto">asdfadfs</div>
</div>
<div class="gallery_item ">
<div id="imagen">
<img style="max-width:100px;" src="http://www.catolica.edu.sv/wp-content/uploads/2016/01/moodle-200x200.jpg">
</div>
<div id="texto">asdfadfs</div>
</div>
<div class="gallery_item ">
<div id="imagen">
<img style="max-width:100px;" src="http://www.catolica.edu.sv/wp-content/uploads/2016/01/moodle-200x200.jpg">
</div>
<div id="texto">asdfadfs</div>
</div>
<div class="gallery_item ">
<div id="imagen">
<img style="max-width:100px;" src="http://www.catolica.edu.sv/wp-content/uploads/2016/01/moodle-200x200.jpg">
</div>
<div id="texto">asdfadfs</div>
</div>
<div class="gallery_item ">
<div id="imagen">
<img style="max-width:100px;" src="http://www.catolica.edu.sv/wp-content/uploads/2016/01/moodle-200x200.jpg">
</div>
<div id="texto">asdfadfs</div>
</div>
</div>
</div>
</div>
I reworked the whole code from scratch and I got working what I wanted.
Here it is the result.
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: #91897b;
}
::-webkit-scrollbar-track:hover {
background: #ccb288;
}
::-webkit-scrollbar-thumb {
background: #e8aa45;
}
::-webkit-scrollbar-thumb:hover {
background: #f4a11a;
}
#media only screen and (min-width:1110px){
.galeria {
-webkit-box-sizing: border-box;
border-style:solid;
border-color:#45df43;
max-width:1110px;
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:center;
}
}
#media only screen and (max-width:1109px){
.galeria{
border-style:solid;
border-color:#45df43;
max-width:1110px;
display:flex;
flex-direction:column;
flex-wrap:wrap;
justify-content:center;
}
.contenedor_der{
max-height:490px;
flex-basis:content;
width:100%;
max-width:666px;
margin: 0 auto;
flex: 1;
}
.contenedor_izq{
flex-basis:content;
max-width:666px;
margin: 0 auto;
border-style:solid;
border-color:#df43df;
flex:1;
}
.contenedor_izq img{
max-width:666px;
width:100%;
}
}
.contenedor_izq{
border-style:solid;
border-color:#df43df;
flex-basis:content;
}
.contenedor_izq img{
max-width:666px;
flex:1;
}
.contenedor_der{
max-height:416.25px;
overflow-y:scroll;
border-style:solid;
flex:1 1 auto;
}
.caja_articulo{
width:99%; /*Debido a scroll bar que ocupa 10px */
min-width:auto;
height:100px;
border-style: solid;
}
.imagen_articulo{
-webkit-box-sizing: border-box;
float:left;
width:auto;
height:auto;
}
.imagen_articulo img{
max-width:100px;
}
.filas_texto{
-webkit-box-sizing: border-box;
margin-left:100px;
width:auto;
min-width:100px;
height:50%;
border-style: solid;
border-color:#f505d5;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Editor JavaScript online - www.cubicfactory.com</title>
</head>
<body>
<div class="galeria">
<div class="contenedor_izq">
<img src="http://www.hyattrestaurants.com/wp-content/uploads/2015/06/Collage-800x500px.jpg">
</div>
<div class="contenedor_der">
<div class="caja_articulo">
<div class="imagen_articulo">
<img src=" https://upload.wikimedia.org/wikipedia/commons/4/4f/Gallet_clamshell_600x600_2.jpg">
</div>
<div class="filas_texto"></div>
<div class="filas_texto"></div>
</div>
<div class="caja_articulo">
<div class="imagen_articulo">
<img src=" https://upload.wikimedia.org/wikipedia/commons/4/4f/Gallet_clamshell_600x600_2.jpg">
</div>
<div class="filas_texto"></div>
<div class="filas_texto"></div>
</div>
<div class="caja_articulo">
<div class="imagen_articulo">
<img src=" https://upload.wikimedia.org/wikipedia/commons/4/4f/Gallet_clamshell_600x600_2.jpg">
</div>
<div class="filas_texto"></div>
<div class="filas_texto"></div>
</div>
<div class="caja_articulo">
<div class="imagen_articulo">
<img src=" https://upload.wikimedia.org/wikipedia/commons/4/4f/Gallet_clamshell_600x600_2.jpg">
</div>
<div class="filas_texto"></div>
<div class="filas_texto"></div>
</div>
<div class="caja_articulo">
<div class="imagen_articulo">
<img src=" https://upload.wikimedia.org/wikipedia/commons/4/4f/Gallet_clamshell_600x600_2.jpg">
</div>
<div class="filas_texto"></div>
<div class="filas_texto"></div>
</div>
</div>
</div>
</body>
</html>
I want to create a layout for an itemised list of content like below:
Each item is a container that has an image and block of text.
I have attempted to use nth-child and set different css float values based on if it is an odd or even child, but you can't set child properties using the nth-child selector.
HTML:
<div class="flex-container">
<div class="media-container ">
<img src="img/image.png">
</div>
<div class="text-container">
<div class="titles">
<h2>Title #1</h2>
</div>
<p>lots of words</p>
</div>
</div>
<div class="flex-container">
<div class="media-container ">
<img src="img/image.png">
</div>
<div class="text-container">
<div class="titles">
<h2>Title #1</h2>
</div>
<p>lots of words</p>
</div>
</div>
<div class="flex-container">
<div class="media-container ">
<img src="img/image.png">
</div>
<div class="text-container">
<div class="titles">
<h2>Title #1</h2>
</div>
<p>lots of words</p>
</div>
</div>
CSS:
.flex-container {
width: auto;
margin: 10px auto;
padding: 0 15px;
display: inline-flex;
}
.flex-container:nth-child(odd) {
.media-container {
float: left;
}
.text-container {
float: right;
}
}
.flex-container:nth-child(even) {
.media-container {
float: right;
}
.text-container {
float: left;
}
}
.media-container {
position: relative;
display: inline-block;
}
.media-container img {
width: 100%;
height: auto;
}
.text-container {
width: 30%;
margin: 0 10px;
align-self: center;
position: relative;
display: inline-block;
}
What is the easiest/neatest solution for creating this layout using CSS?
Something like this:
Use the nth-child on your "row" flex-containers and alternate the flex-direction.
.flex-container {
padding: 0 15px;
display: flex;
width: 80%;
border: 1px solid grey;
margin: 1em auto;
}
.flex-container:nth-child(odd) {
flex-direction: row;
}
.flex-container:nth-child(even) {
flex-direction: row-reverse;
}
.media-container img {
width: 100%;
height: auto;
}
.text-container {
width: 30%;
margin: 0 10px;
}
<div class="flex-container">
<div class="media-container ">
<img src="http://www.fillmurray.com/300/200">
</div>
<div class="text-container">
<div class="titles">
<h2>Title #1</h2>
</div>
<p>lots of words</p>
</div>
</div>
<div class="flex-container">
<div class="media-container ">
<img src="http://www.fillmurray.com/300/200">
</div>
<div class="text-container">
<div class="titles">
<h2>Title #1</h2>
</div>
<p>lots of words</p>
</div>
</div>
Take A Look At This:
.item {
width: 305px;
height: 70px;
background: black;
margin: 5px;
padding: 5px;
}
.item .title {
width: 200px;
height: 70px;
background: crimson;
}
.item .img {
width: 100px;
height: 70px;
background: #09f;
}
.item:nth-child(even) .img {
float: right;
}
.item:nth-child(even) .title {
float: left;
}
.item:nth-child(odd) .img {
float: left;
}
.item:nth-child(odd) .title {
float: right;
}
<div class='item'>
<div class='title'></div>
<div class='img'></div>
</div>
<div class='item'>
<div class='title'></div>
<div class='img'></div>
</div>
<div class='item'>
<div class='title'></div>
<div class='img'></div>
</div>
Is it necessary that it is display:inline-flex? If you change it to inline-block, I believe you'll get your intended display:
.flex-container {
display: inline-block;
...
}
https://jsfiddle.net/4rcdqy4f/
You can use the Javascript querySelectorAll() method. Then, loop through the list of your items and add the specific CSS property based on whether it is odd or even.
I have the code:
html:
<div class=container1>
<div class=container2>
<div class="box">
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
</div>
</div>
<div class=container2>
<div class="box">
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
</div>
</div>
<div class=container2>
<div class="box">
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
</div>
</div>
<div class=container2>
<div class="box">
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
</div>
</div>
</div>
css:
.container1 {
background: yellow;
height: 200px;
position: relative !important;
width: 260px !important;
}
.container2 {
background: blue;
border: solid 1px;
float: left !important;
height: 180px;
/*position: relative; can't use, as it would limit icons inside this container*/
text-align: center;
width: 60px;
}
.container2:hover .box {
display: inline-block;
}
.box {
background: red;
border: solid 1px;
display: none;
height: 120px;
position:absolute;
text-align: center;
top: 20px;
width: 180px !important;
}
.box:first-child {
text-align: left;
}
.icon {
border: solid 1px;
background: white;
display: inline-block;
height: 50px;
width: 50px;
}
http://jsfiddle.net/388ygc74/10/
And on IE (any version) the text-align:center does not work.
The solution to make .box width:100% is not applicable, I need it to be a fixed defined width.
Any idea?
How about using left: 30px; (since you set the width to 60px) playing with z-index and position: relative ?
(Yes, you said no position:relative; but it's working :) )
See it here
I think that's what you looking for?
left:50%
margin-left:{-50% of elementh width}px;
Add specific selector to add the element that you want to align
:nth-child(4)