How hide blocks - html

There are 11 blocks, each with a minimum width of 100px, in one line, the width of the parent is 100% of the screen.
How to arrange blocks in the full width of the parent, while changing the resolution, blocks that do not fit entirely are not transferred, but hidden completely ***
.item {
padding: 16px;
margin-top: 16px;
border: 1px solid black;
text-align: center;
min-width: 110px;
display: inline-block;
width: 10%;
}
section{
overflow: hidden;
display: flex;
}
<section>
<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 class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</section>
***, illustration and my code below:


You can use CSS grid for this:
.item {
padding: 16px;
margin-top: 16px;
border: 1px solid black;
text-align: center;
}
section{
overflow: hidden;
height:50px;
display: grid;
grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
}
<section>
<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 class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</section>


I don't think there's any easy way to do what you're talking about with just CSS. You have to take screen size and according to that hide the rest of the block.

Related

how to set CSS style of Multiplication of a number in CSS

I make a 6 item column using the PHP loop, and I want to set the third child of each row border to none and I don't want to set the 3times in 2 rows because I want to show the theme center when the page is going smaller.
how to set the border to none for third child of each row(third child, 6th child, and ... 3*rownumber child)
<div class="full-container">
<div class="row">
<?php for($i=0;$i<6;$i++): ?>
<div class="document-item">
<a href="#">
<div class="document-img">
<img src="assets/images/book.jpg" alt="book"/>
</div>
<div class="document-detail text-middlegreen">
<h2>
<span class="parent-position">عنوان کتاب</span>
</h2>
<p>نام نویسنده</p>
<p>موضوع</p>
<p>تاریخ</p>
</div>
</a>
</div>
<?php endfor; ?>
</div>
</div>
.full-container {
width: calc(100% - 40px);
padding: 20px;
}
.row{text-align: center;}
.document-item{
width: calc(33% - 32px);
min-width: 300px;
border-left: 1px solid #5bbcb8;
margin-left: 30px;
display: inline-block;
margin-bottom: 30px;
margin-top: 30px;
}
.document-img{
width: 180px;
display: inline-block;
line-height: 100%;
text-align: center;
}
.document-img img{
width: 80%;
vertical-align: middle;
}
.document-detail{
display: inline-block;
vertical-align: middle;
}
.document-detail> h2{
margin: 10px 0;
}
.document-detail> h2>span{
font-size: 110%;
font-weight: bold;
}
.document-detail> h2>span::before{
content: '';
display: block;
width: 100%;
height: 1px;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -2px;
background-color: #5bbcb8;
}
.document-detail> p:first-of-type{
font-size: 90%;
margin: 10px 0;
}
.document-detail> p:nth-last-of-type(2){
font-size: 90%;
margin: 10px 0;
}
.document-detail> p:last-of-type{
font-size: 90%;
margin: 10px 0;
}
is that any way to set multiplication of 3 of each element border to set none in CSS?

You can select every 3rd child using nth-child(3n).
.grid-wrapper {
display: grid;
grid-template-columns: repeat(3,1fr);
grid-gap: 20px;
}
.item {
width: 100%;
height: 50px;
background-color: red;
}
.item:nth-child(3n) {
background-color: blue;
}
<div class="grid-wrapper">
<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 class="item"></div>
<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 class="item"></div>
<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>
or
You can use nth-child(3n+1) to select every 3rd child including the first one.
Like so:
.grid-wrapper {
display: grid;
grid-template-columns: repeat(3,1fr);
grid-gap: 20px;
}
.item {
width: 100%;
height: 50px;
background-color: red;
}
.item:nth-child(3n+1) {
background-color: blue;
}
<div class="grid-wrapper">
<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 class="item"></div>
<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 class="item"></div>
<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>

column aligment for flex element with max-height

here is flex element with flex: column wrap; and max-height: 150px;. My problem is that justify-content not working. But working with height: 150px. For container with max-width: 100%; & flex-direction: row; aligment works properly
.container {
max-height: 150px;
display: flex;
flex-flow: column wrap;
justify-content: center;
}
.item {
width: 25%;
height: 50px;
border: 1px solid #000;
box-sizing: border-box;
}
<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 class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
Result
Expected result

Not sure if it's a bug or an intended result but you can fix it if you consider an extra wrapper where you apply the max-height property:
.container {
display: flex;
flex-flow: column wrap;
justify-content: center;
width:100%;
}
.item {
width: 25%;
height: 50px;
border: 1px solid #000;
box-sizing: border-box;
}
.extra {
max-height: 150px;
display:flex;
}
<div class="extra">
<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 class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
Worth to note that if you consider height instead of max-height it works fine:
.container {
display: flex;
flex-flow: column wrap;
justify-content: center;
height: 150px;
}
.item {
width: 25%;
height: 50px;
border: 1px solid #000;
box-sizing: border-box;
}
<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 class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

How can I make a two-column layout have equal height columns with one scrollable? [duplicate]

This question already has answers here:
One flex/grid item sets the size limit for siblings
(6 answers)
How can you set the height of an outer div to always be equal to a particular inner div?
(2 answers)
Closed 3 years ago.
I want to display two areas in two columns using CSS Grid. However height of left column must be the same as height in right column.
If left column is higher than right column the content in left column should be scrollable.
What I want to achieve:
I cannot to this without hardcoding heights in pixels. Is is possible to do that by CSS only? Or I need to use JavaScript to recalculate left column height?
I attached jsFiddle to take a look.
https://jsfiddle.net/rafalcypcer/2teonuhy/17/
Thanks,
Rafal
.gridwrapper {
display: grid;
grid-template-columns: 0.5fr 1.5fr;
grid-auto-rows: 200px;
grid-gap: 10px;
grid-template-rows: auto;
}
.column {
background: green;
}
.dynamic-content {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
background: pink;
margin: 20px;
}
.list {
overflow-y: auto;
margin: 20px;
height: 100%;
}
.item {
height: 50px;
background: yellow;
border: 2px solid black;
}
<div class="gridwrapper">
<div class="column">
<div class="list">
<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 class="item"></div>
<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 class="item"></div>
<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>
</div>
<div class="column">
<div class="dynamic-content">Some dynamic content with random height</div>
</div>
</div>

Since the width is known you can consider position:absolute for the content so it doesn't affect the height and simply stretch it using top:0;bottom:0;
.gridwrapper {
display: grid;
grid-template-columns: 0.5fr 1.5fr;
grid-auto-rows: 200px;
grid-gap: 10px;
grid-template-rows: auto;
}
.column {
background: green;
position:relative;
}
.dynamic-content {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
background: pink;
margin: 20px;
}
.list {
position:absolute;
overflow-y: auto;
margin: 20px;
top:0;
bottom:0;
left:0;
right:0;
}
.item {
height: 50px;
background: yellow;
border: 2px solid black;
}
<div class="gridwrapper">
<div class="column">
<div class="list">
<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 class="item"></div>
<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 class="item"></div>
<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>
</div>
<div class="column">
<div class="dynamic-content">Some dynamic content with random height</div>
</div>
</div>

Set width of the scrollable element to the full value (visible + invisible parts)

I got the container, which width is the half of a page. That container includes several item collections (rows). Each row includes big amount of items. You can see only limited count of items, other ones can be discovered by horizontal scroll.
Please, see the snippet below.
.container {
width: 50%;
overflow-x: scroll;
overflow-y: hidden;
}
.items {
height: 100px;
background: #ccc;
white-space: nowrap;
}
.item {
display: inline-block;
width: 30%;
height: 50px;
background: #efc;
border: 1px solid;
}
.shadow {
outline: none;
border: 2px solid #3a53ed;
box-shadow: 0 0 10px #9ecaed;
}
<div class="container">
<div class="items">
<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 class="item"></div>
</div>
<div class="items shadow">
<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 class="item"></div>
</div>
</div>
I have shadow class, which adds bright borders and shadow to an element. I want to be able to apply that class to any item collection (row). I mean, not only for visible part, but for the whole.
The problem is that width of a row element is equal to visible part. How can I make that width to be equal to the full long width (based on all items' width)?
UPDATE: layout (mostly) and scrolling behaviour should remain the same
Thank you.

I guess you not something like it.
.container {
width: 50%;
overflow-x: scroll;
overflow-y: hidden;
}
.items {
height: 100px;
background: #ccc;
white-space: nowrap;
}
.item {
display: inline-block;
width: 30%;
height: 50px;
background: #efc;
border: 1px solid;
}
.shadow {
outline: none;
border: 2px solid #3a53ed;
box-shadow: 0 0 10px #9ecaed;
}
<div class="container">
<div class="items">
<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 class="item"></div>
</div>
</div>
<div class="items shadow">
<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 class="item"></div>
</div>
</div>

The actual default behavior is buggy tbh, I would have assumed it would have worked as you intended it to from the get go.
Anyway, I don't think it's doable without javascript but I could be wrong.
The reason is that your item are of width: 30%, so if you changed the width of items to get the appropriate border, then the width of item would change as well.. See where I'm getting at ?
Having the shadow class on items is a no go, since even if we changed its width, it would change the width of contained items, so we have to put it somewhere else.
-
.shadow{
box-sizing: border-box;
position: absolute;
width: 100%;
height: 100%;
outline: none;
border: 2px solid #3a53ed;
box-shadow: 0 0 10px #9ecaed;
}
So with that out of the way, how would we give the correct width to shadow ? I don't think we can without js.
With some javascript you can grab the width of the container and apply it to a "shadow" div.
let ctnr = document.querySelector(".container");
let width = ctnr.scrollWidth;
let sel = document.querySelectorAll(".shadow");
sel.forEach( s => {
s.style.width = width + "px";
});
.container {
width: 50%;
overflow-x: auto;
overflow-y: hidden;
background: #ccc;
}
.items {
height: 100px;
white-space: nowrap;
}
.item {
display: inline-block;
width: 30%;
height: 50px;
background: #efc;
border: 1px solid;
}
.outer{
}
.sel{
position: relative;
}
.shadow{
box-sizing: border-box;
position: absolute;
width: 100%;
height: 100%;
outline: none;
border: 2px solid #3a53ed;
box-shadow: 0 0 10px #9ecaed;
}
<div class="container">
<div class="items">
<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 class="item"></div>
</div>
<div class="items sel">
<div class="shadow"></div>
<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 class="item"></div>
</div>
</div>

Fixed div inside a scrollable div - CSS only

I'm trying to make a div stay at a fixed location inside another div. The containing div is scrollable and his location is not fixed in the screen.
This is what I got so far JSFiddle
The text "fixed text" should stay at the top right corner of the container when scrolling.
I made 2 copies of the div and kept the same class in order to simulate 2 different locations of the div.
Can it be done with CSS only?
HTML
<div class="cont">
<div class="items">
<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 class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="txt">
fixed text
</div>
</div>
<div class="cont">
<div class="items">
<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 class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="txt">
fixed text
</div>
</div>
CSS
.cont{
width: 400px;
height: 130px;
border: 1px solid black;
margin: 10px;
overflow-x: auto;
overflow-y: hidden;
position: relative;
}
.items{
width: 600px;
}
.item{
width: 80px;
height: 80px;
background-color: blue;
margin-top: 22px;
margin-left: 3px;
display: inline-block;
}
.txt{
position: absolute;
top: 2px;
right: 10px;
}

You can use overflow: auto on items instead of cont element.
.cont {
width: 400px;
height: 130px;
border: 1px solid black;
margin: 10px;
overflow-x: hidden;
position: relative;
}
.items {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
.item {
width: 80px;
height: 80px;
background-color: blue;
margin-top: 22px;
margin-left: 3px;
display: inline-block;
}
.txt {
position: absolute;
top: 2px;
right: 10px;
}
<div class="cont">
<div class="items">
<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 class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="txt">
fixed text
</div>
</div>

Create an extra wrapper and apply height and overflow to that - I have added a div inner wrapping all the contents of cont and applied this to it:
.inner {
overflow-x: scroll;
overflow-y: hidden;
height: inherit;
}
See demo below to see what I mean:
.cont {
width: 400px;
height: 130px;
border: 1px solid black;
margin: 10px;
/*overflow-x: auto;*/
/*overflow-y: hidden;*/
position: relative;
}
.items {
width: 600px;
}
.item {
width: 80px;
height: 80px;
background-color: blue;
margin-top: 22px;
margin-left: 3px;
display: inline-block;
}
.txt {
position: absolute;
top: 2px;
right: 10px;
}
.inner {
overflow-x: scroll;
overflow-y: hidden;
height: inherit;
}
<div class="cont">
<div class="inner">
<div class="items">
<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 class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="txt">
fixed text
</div>
</div>
</div>

Add the fixed height and overflow to .items instead, so that .items scrolls instead of .cont, and .txt will stay where it is since it is positioned relative to .cont and .cont isn't scrolling.
.cont{
width: 400px;
border: 1px solid black;
margin: 10px;
overflow-x: auto;
overflow-y: hidden;
position: relative;
}
.items{
width: 600px;
height: 130px;
overflow: scroll;
}
.item{
width: 80px;
height: 80px;
background-color: blue;
margin-top: 22px;
margin-left: 3px;
display: inline-block;
}
.txt{
position: absolute;
top: 2px;
right: 10px;
}
<div class="cont">
<div class="items">
<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 class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="txt">
fixed text
</div>
</div>
<div class="cont">
<div class="items">
<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 class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="txt">
fixed text
</div>
</div>