I have a category menu and list of projects whereby on the main tag we have
margin-top: 250px;
height: calc(100vh - 250px);
From the above, if the projects' container has a height bigger than calc(100vh - 250px), then by default it's scrollable.
If the projects' container has a height smaller than calc(100vh - 250px), then we flex-end everything (menu, container) to the bottom of the page. The projects container has overflow-y: scroll;
This is working perfectly in all browsers except MacOS (Catalina) Safari 13 and below.
In Safari 13, all the projects that are supposed to be scrollable are reduced in height to fit the available height calc(100vh - 250px).
Normal and expected view
Faulty view Safari 13, using https://testingbot.com/ to test
You can view the page here https://category-scrollings.tiiny.site/ (Free trial expiring in 7 days).
const panels = Array.from(document.querySelectorAll(".projects-container"));
const menus = Array.from(document.querySelectorAll(".nav-item"));
menus.forEach(function (menu) {
menu.addEventListener("click", function (event) {
console.log("event:", event.target);
menus.forEach(function (_menu, index) {
const _panel = panels[index];
_menu.classList.remove("clicked");
_panel.classList.remove("active");
});
const panelId = `${event.target.id.split("-")[0]}-panel`;
const panel = document.getElementById(panelId);
event.target.classList.add("clicked");
panel.classList.add("active");
});
});
body {
height: 100vh;
overflow: hidden;
}
main {
display: flex;
-webkit-box-pack: start;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
}
.container {
display: flex;
margin-top: 250px;
flex-direction: column;
-webkit-box-pack: end;
justify-content: flex-end;
align-items: flex-start;
width: calc(50vw - 25px);
height: calc(100vh - 250px);
}
.nav {
display: flex;
flex-direction: row;
-webkit-box-pack: start;
justify-content: flex-start;
top: 200px;
-webkit-box-align: center;
align-items: center;
padding: 6px 0px;
background-color: rgb(255, 255, 255);
position: sticky;
z-index: 1000;
width: 100%;
}
.nav-item {
cursor: pointer;
font-size: 0.688rem;
line-height: 1.334rem;
margin: 0px;
font-family: "ABC Favorit", sans-serif;
color: #ccc;
text-transform: uppercase;
letter-spacing: 0.6px;
font-weight: 600;
margin-right: 16px;
}
.nav-item.clicked {
color: #000;
}
.projects-container.active {
display: flex;
}
.projects-container {
display: none;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: end;
-ms-flex-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
-webkit-align-items: flex-center;
-webkit-box-align: flex-center;
-ms-flex-align: flex-center;
align-items: center;
height: auto;
width: 100%;
overflow-y: scroll;
padding-bottom: 20px;
}
.projects {
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-ms-flex-pack: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: flex-start;
-webkit-box-align: flex-start;
-ms-flex-align: flex-start;
align-items: flex-start;
width: 100%;
overflow-y: scroll;
}
.project {
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
border-top: 0.9px solid #d9d9d9;
}
.boxes {
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-ms-flex-pack: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: auto;
cursor: pointer;
min-width: 140px;
}
.box {
display: block;
height: 27px;
width: 7px;
}
.box.blue {
background-color: blue;
}
.box.white {
background-color: white;
}
.box.yellow {
background-color: yellow;
}
.box.red {
background-color: red;
}
.box.black {
background-color: black;
}
.title-container {
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-ms-flex-pack: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
max-width: 355px;
width: 100%;
cursor: pointer;
padding: 9px 0;
}
.title {
margin: 0;
color: #000;
font-family: "ABC Favorit", sans-serif;
max-width: 255px;
width: 100%;
font-size: 0.875rem;
font-weight: 400;
text-transform: uppercase;
line-height: 0.875rem;
margin-top: 1.7px;
margin-left: 50px;
margin-right: 50px;
}
<main>
<div class="container">
<div class="nav">
<div id="all-menu" class="nav-item clicked">All</div>
<div id="cars-menu" class="nav-item">Cars</div>
<div id="fashion-menu" class="nav-item">Fashion</div>
</div>
<div id="all-panel" class="projects-container all active">
<div class="projects">
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">ZUKUNFT VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">ZUKUNFT VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">ZUKUNFT VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">ZUKUNFT VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">ZUKUNFT VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">ZUKUNFT VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">ZUKUNFT VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">ZUKUNFT VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">ZUKUNFT VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">ZUKUNFT VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">ZUKUNFT VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">ZUKUNFT VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">ZUKUNFT VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">ZUKUNFT VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">ZUKUNFT VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">ZUKUNFT VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">AMDILK VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">AMDILK VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">AMDILK VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">AMDILK VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">AMDILK VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">AMDILK VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">AMDILK VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">AMDILK VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">AMDILK VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">AMDILK VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">IULH VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">ULHF VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">UYJHF VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">UYJHF VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">UYJHF VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">UYJHF VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">UYJHF VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">ALIUIYF VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">HEYsh VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">YTKGUIY VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">rjke VERBINDEN</p>
</div>
</div>
</div>
</div>
<div id="cars-panel" class="projects-container cars">
<div class="projects">
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">ZUKUNFT VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">AMDILK VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">IULH VERBINDEN</p>
</div>
</div>
</div>
</div>
<div id="fashion-panel" class="projects-container fashion">
<div class="projects">
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">UYJHF VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">ALIUIYF VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">HEYsh VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">YTKGUIY VERBINDEN</p>
</div>
</div>
<div class="project">
<div class="boxes">
<div class="box blue"></div>
<div class="box yellow"></div>
<div class="box white"></div>
<div class="box red"></div>
<div class="box black"></div>
</div>
<div class="title-container">
<p class="title">rjke VERBINDEN</p>
</div>
</div>
</div>
</div>
</div>
</main>
Click Expand Snippet to see all
I have figured out the answer myself. It appears I needed to assign a height to the project class
// either
.project {
...
height: 35px;
}
// Or
.project {
...
min-height: fit-content;
height: 100%;
}
Related
I am trying to get a differents divs with gradients color, from darker to lighter.
I can watch how my code edit lighter the color, but i can't watch the darker effect. I review the code and all are working correctly. The fade_out effect is working, but not the fade_in effect - at it is identical. When I review the css file generated, i watch that the background-color are the same that the $color-base value. Why the fade_in effect is not appreciating?
SCSS:
#if $k==1 {
$color-base: red;
}
#else if $k==2 {
$color-base: blue;
}
#else {
$color-base: green;
}
.container-#{$k} {
.base-color {
background-color: $color-base;
}
#for $i from 4 through 1 {
.darken-#{$i} {
background-color: fade_in($color-base, 0.2 * $i);
.color-box-text {
color: red;
}
}
.lighten-#{$i} {
background-color: fade_out($color-base, 0.2 * $i);
.color-box-text {
color: black;
}
}
}
}
}
HTML:
<div class="box darken-4"><span class="color-box-text">Darken 4</span></div>
<div class="box darken-3"><span class="color-box-text">Darken 3</span></div>
<div class="box darken-2"><span class="color-box-text">Darken 2</span></div>
<div class="box darken-1"><span class="color-box-text">Darken 1</span></div>
<div class="box base-color"><span class="color-box-text">Base color</span></div>
<div class="box lighten-1"><span class="color-box-text">Lighten 1</span></div>
<div class="box lighten-2"><span class="color-box-text">Lighten 2</span></div>
<div class="box lighten-3"><span class="color-box-text">Lighten 3</span></div>
<div class="box lighten-4"><span class="color-box-text">Lighten 4</span></div>
</div>
<div class="mycontainer container-2">
<div class="box darken-4"><span class="color-box-text">Darken 4</span></div>
<div class="box darken-3"><span class="color-box-text">Darken 3</span></div>
<div class="box darken-2"><span class="color-box-text">Darken 2</span></div>
<div class="box darken-1"><span class="color-box-text">Darken 1</span></div>
<div class="box base-color"><span class="color-box-text">Base color</span></div>
<div class="box lighten-1"><span class="color-box-text">Lighten 1</span></div>
<div class="box lighten-2"><span class="color-box-text">Lighten 2</span></div>
<div class="box lighten-3"><span class="color-box-text">Lighten 3</span></div>
<div class="box lighten-4"><span class="color-box-text">Lighten 4</span></div>
</div>
<div class="mycontainer container-3">
<div class="box darken-4"><span class="color-box-text">Darken 4</span></div>
<div class="box darken-3"><span class="color-box-text">Darken 3</span></div>
<div class="box darken-2"><span class="color-box-text">Darken 2</span></div>
<div class="box darken-1"><span class="color-box-text">Darken 1</span></div>
<div class="box base-color"><span class="color-box-text">Base color</span></div>
<div class="box lighten-1"><span class="color-box-text">Lighten 1</span></div>
<div class="box lighten-2"><span class="color-box-text">Lighten 2</span></div>
<div class="box lighten-3"><span class="color-box-text">Lighten 3</span></div>
<div class="box lighten-4"><span class="color-box-text">Lighten 4</span></div>
</div>
The function fade-in() is doing the same as opacify() and according to the documentation:
The opacify() function increases the alpha channel by a fixed amount.
Your $color-base values are all opaque and therefore the fade-in() function doesn't apply since their alpha channels have already the max value. If you try with a base color with an alpha value lower than 1 you will see that your code works fine.
I try to use card-deck with cards inside this way :
card-deck is centered in a column
card-deck fits content width (actually, it's always 100% width, width: auto doesn't change anything)
cards inside the card-deck are left-align
I build a simple codepen for testing, try lot of things but never have the good behaviour...
See https://codepen.io/studio-matavai/pen/zYBeQOX
<div class="row">
<div class="col-12">
<div class="card-deck">
<div class="card">
<div class="card-body">
poipoipio
</div>
</div>
<div class="card">
<div class="card-body">
poipoipio
</div>
</div>
<div class="card">
<div class="card-body">
poipoipio
</div>
</div>
<div class="card">
<div class="card-body">
poipoipio
</div>
</div>
<div class="card">
<div class="card-body">
poipoipio
</div>
</div>
<div class="card">
<div class="card-body">
poipoipio
</div>
</div>
<div class="card">
<div class="card-body">
poipoipio
</div>
</div>
<div class="card">
<div class="card-body">
poipoipio
</div>
</div>
<div class="card">
<div class="card-body">
poipoipio
</div>
</div>
</div>
</div>
</div>
Doesn't anyone know how to do this ?
Regards.
----- EDIT -----
With a picture :)
Here it is.
.wrapper {
margin-left: auto;/*this makes wrapper center*/
margin-right: auto;/*this makes wrapper center*/
border:1px solid blue;
width:100%;
text-align:center;
}
.card {
padding-left: 10px;
padding-right: 10px;
max-width: 240px;
margin-left: 0px;
margin-right: 0px;
border: 0px;
display: inline-block;
min-width: 240px;
}
.card-body{
border:1px solid black;
}
<html>
<head>
</head>
<body>
<div class="row">
<div class="col-12">
<div class="wrapper">
<div class="card">
<div class="card-body">
poipoipio
</div>
</div>
<div class="card">
<div class="card-body">
poipoipio
</div>
</div>
<div class="card">
<div class="card-body">
poipoipio
</div>
</div>
<div class="card">
<div class="card-body">
poipoipio
</div>
</div>
<div class="card">
<div class="card-body">
poipoipio
</div>
</div>
<div class="card">
<div class="card-body">
poipoipio
</div>
</div>
<div class="card">
<div class="card-body">
poipoipio
</div>
</div>
<div class="card">
<div class="card-body">
poipoipio
</div>
</div>
<div class="card">
<div class="card-body">
poipoipio
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Question regarding styling. I have a row of div elements. They're all the same size except one, which is double in height and width. I'd like the second row of div elements to line up with the second half of the bigger div but now sure how to do it.
.wrapper {
width: 800px;
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.box {
height: 50px;
width: 50px;
margin: 5px;
border: 1px solid black;
}
.box-5 {
height: 100px;
width: 100px
}
<div class="wrapper">
<div class="box box-1">Box 1</div>
<div class="box box-2">Box 2</div>
<div class="box box-3">Box 3</div>
<div class="box box-4">Box 4</div>
<div class="box box-5">Box 5</div>
<div class="box box-6">Box 6</div>
<div class="box box-7">Box 7</div>
<div class="box box-8">Box 8</div>
<div class="box box-9">Box 9</div>
<div class="box box-10">Box 10</div>
<div class="box box-11">Box 11</div>
<div class="box box-12">Box 12</div>
<div class="box box-13">Box 13</div>
<div class="box box-14">Box 14</div>
<div class="box box-15">Box 15</div>
<div class="box box-16">Box 16</div>
<div class="box box-17">Box 17</div>
<div class="box box-18">Box 18</div>
<div class="box box-19">Box 19</div>
</div>
I'd like box 13 - 16 to be on the left side of the bottom half of box 5 and box 17 - 19 to be on the right side.
You could use CSS display: grid and its companion grid-template-columns to fix this. Updated answer thanks to Maaz Syed Adeeb's comment.
grid-template-columns: repeat(13, auto);
(It should be thirteen instead of 12 boxes).
Only box number 5 gets an upgrade in styling to expand its box:
grid-column: span 2;
grid-row: span 2;
Read more about grid at MDN.
Updated snippet:
.wrapper {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: repeat(13, auto);
grid-template-rows: auto;
grid-gap: 0;
}
.box {
height: 50px;
width: 50px;
margin: 5px;
border: 1px solid black;
}
.box-5 {
height: 100px;
width: 100px;
grid-column: span 2;
grid-row: span 2;
}
<div class="wrapper">
<div class="box box-1">Box 1</div>
<div class="box box-2">Box 2</div>
<div class="box box-3">Box 3</div>
<div class="box box-4">Box 4</div>
<div class="box box-5">Box 5</div>
<div class="box box-6">Box 6</div>
<div class="box box-7">Box 7</div>
<div class="box box-8">Box 8</div>
<div class="box box-9">Box 9</div>
<div class="box box-10">Box 10</div>
<div class="box box-11">Box 11</div>
<div class="box box-12">Box 12</div>
<div class="box box-13">Box 13</div>
<div class="box box-14">Box 14</div>
<div class="box box-15">Box 15</div>
<div class="box box-16">Box 16</div>
<div class="box box-17">Box 17</div>
<div class="box box-18">Box 18</div>
<div class="box box-19">Box 19</div>
</div>
Just need to add 10 more pixel in width
.box-5 {
height: 100px;
width: 110px;
}
.wrapper{
width: 800px;
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.box{
height: 50px;
width: 50px;
margin: 5px;
border: 1px solid black;
}
.box-5 {
height: 100px;
width: 110px;
}
<div class="wrapper">
<div class="box box-1">Box 1</div>
<div class="box box-2">Box 2</div>
<div class="box box-3">Box 3</div>
<div class="box box-4">Box 4</div>
<div class="box box-5">Box 5</div>
<div class="box box-6">Box 6</div>
<div class="box box-7">Box 7</div>
<div class="box box-8">Box 8</div>
<div class="box box-9">Box 9</div>
<div class="box box-10">Box 10</div>
<div class="box box-11">Box 11</div>
<div class="box box-12">Box 12</div>
<div class="box box-13">Box 13</div>
<div class="box box-14">Box 14</div>
<div class="box box-15">Box 15</div>
<div class="box box-16">Box 16</div>
<div class="box box-17">Box 17</div>
<div class="box box-18">Box 18</div>
<div class="box box-19">Box 19</div>
</div>
I have a table made by divs on bootstrap. I want on the first column the text be vertical (orientation -90deg). I was able to successfully turn the text but, if the the text is longer, it looses the position.
It always show up like on this screenshot: https://ibb.co/2s8dzyZ
I have tried several techniques found on the web but none seems to solve my problem.
.horizontal-pricing {
min-height: 250px;
position: relative;
}
.verticaltext {
transform: rotate(-90deg);
transform-origin: right, top;
-ms-transform: rotate(-90deg);
-ms-transform-origin: right, top;
-webkit-transform: rotate(-90deg);
-webkit-transform-origin: right, top;
position: absolute;
font-family: 'Montserrat-SemiBold', sans-serif;
font-size: 20px;
color: #3c99ef;
margin-top: 100px;
}
<div class="container purple-accent">
<div class="row">
<div class="pricing-box horizontal-pricing">
<div class="col-sm-4 col-md-4">
<div>
<div class="verticaltext">Light 1</div>
</div>
</div>
<div class="col-sm-8 col-md-8">
<div>
<div>bla bla bla</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="pricing-box horizontal-pricing">
<div class="col-sm-4 col-md-4">
<div>
<div class="verticaltext">Light 2</div>
</div>
</div>
<div class="col-sm-8 col-md-8">
<div>
<div>bla bla bla</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="pricing-box horizontal-pricing">
<div class="col-sm-4 col-md-4">
<div>
<div class="verticaltext">Professional 1</div>
</div>
</div>
<div class="col-sm-8 col-md-8">
<div>
<div>bla bla bla</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="pricing-box horizontal-pricing">
<div class="col-sm-4 col-md-4">
<div>
<div class="verticaltext">Professional 2</div>
</div>
</div>
<div class="col-sm-8 col-md-8">
<div>
<div>bla bla bla</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="pricing-box horizontal-pricing">
<div class="col-sm-4 col-md-4">
<div>
<div class="verticaltext">Performance 1</div>
</div>
</div>
<div class="col-sm-8 col-md-8">
<div>
<div>bla bla bla</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="pricing-box horizontal-pricing">
<div class="col-sm-4 col-md-4">
<div>
<div class="verticaltext">Performance 2</div>
</div>
</div>
<div class="col-sm-8 col-md-8">
<div>
<div>bla bla bla</div>
</div>
</div>
</div>
</div>
I want the text be vertically aligned on the middle of the white box and 20px from the left side.
Use writing-mode
.verticaltext {
writing-mode: vertical-lr;
transform: rotate(-180deg);
}
.row {
border: 1px solid green;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container purple-accent">
<div class="row">
<div class="pricing-box horizontal-pricing">
<div class="col-sm-4 col-md-4">
<div>
<div class="verticaltext">Light 1</div>
</div>
</div>
<div class="col-sm-8 col-md-8">
<div>
<div>bla bla bla</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="pricing-box horizontal-pricing">
<div class="col-sm-4 col-md-4">
<div>
<div class="verticaltext">Light 2</div>
</div>
</div>
<div class="col-sm-8 col-md-8">
<div>
<div>bla bla bla</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="pricing-box horizontal-pricing">
<div class="col-sm-4 col-md-4">
<div>
<div class="verticaltext">Professional 1</div>
</div>
</div>
<div class="col-sm-8 col-md-8">
<div>
<div>bla bla bla</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="pricing-box horizontal-pricing">
<div class="col-sm-4 col-md-4">
<div>
<div class="verticaltext">Professional 2</div>
</div>
</div>
<div class="col-sm-8 col-md-8">
<div>
<div>bla bla bla</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="pricing-box horizontal-pricing">
<div class="col-sm-4 col-md-4">
<div>
<div class="verticaltext">Performance 1</div>
</div>
</div>
<div class="col-sm-8 col-md-8">
<div>
<div>bla bla bla</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="pricing-box horizontal-pricing">
<div class="col-sm-4 col-md-4">
<div>
<div class="verticaltext">Performance 2</div>
</div>
</div>
<div class="col-sm-8 col-md-8">
<div>
<div>bla bla bla</div>
</div>
</div>
</div>
</div>
Codepen Demo
Do you really want to have <div class="col-sm-4 col-md-4"><div> closed without content, and then have <div class="pricing-box horizontal-pricing">closed after <div class="verticaltext">Light 1</div> and after that already close the row??
<div class="container purple-accent">
<div class="row">
<div class="pricing-box horizontal-pricing">
//THINK ABOUT THIS PART OUF YOUR CODE
<div class="row">
<div class="pricing-box horizontal-pricing">
<div class="col-sm-4 col-md-4">
<div>
<div class="verticaltext">Light 1</div>
</div>
</div>
By your formatting I think this would be more of what you want:
<div class="row">
<div class="pricing-box horizontal-pricing">
<div class="col-sm-4 col-md-4">
<div class="verticaltext">Light 1</div>
</div>
</div>
more div's inside row here
When I try to use position: absolute on a div in Firefox it doesn't seem to work.
For jquery calender I used position:absolute for a div it seems to work all browsers in linux and windows except mozilla in windows. When I remove the position:absolute it will work in windows firefox but only showing alternate months in all other browsers (january, march, may, ..)
<div class="body">
<div class="inner">
<div class="container a pickable month" style="z-index: 999; left: 0px; visibility: visible;
opacity: 1; display: block;">
<div class="row a odd">
<div class="first">
Su</div>
<div>
Mo</div>
<div>
Tu</div>
<div>
We</div>
<div>
Th</div>
<div>
Fr</div>
<div class="last">
Sa</div>
</div>
<div class="row b even">
<div class="outside first">
28</div>
<div class="outside">
29</div>
<div class="outside">
30</div>
<div>
1</div>
<div>
2</div>
<div>
3</div>
<div class="last">
4</div>
</div>
<div class="row c odd">
<div class="first">
5</div>
<div>
6</div>
<div>
7</div>
<div>
8</div>
<div>
9</div>
<div>
10</div>
<div class="last">
11</div>
</div>
<div class="row d even">
<div class="first">
12</div>
<div>
13</div>
<div>
14</div>
<div>
15</div>
<div>
16</div>
<div>
17</div>
<div class="last">
18</div>
</div>
<div class="row e odd">
<div class="first">
19</div>
<div>
20</div>
<div>
21</div>
<div>
22</div>
<div>
23</div>
<div>
24</div>
<div class="last">
25</div>
</div>
<div class="row f even">
<div class="first">
26</div>
<div>
27</div>
<div>
28</div>
<div>
29</div>
<div>
30</div>
<div>
31</div>
<div class="outside last">
1</div>
</div>
<div class="row g odd">
<div class="outside first">
2</div>
<div class="outside">
3</div>
<div class="outside">
4</div>
<div class="outside">
5</div>
<div class="outside">
6</div>
<div class="outside">
7</div>
<div class="outside last">
8</div>
</div>
</div>
<div class="container b pickable month" style="z-index: 998; visibility: visible;
opacity: 1; display: block; left: -200px;">
<div class="row a odd">
<div class="first">
Su</div>
<div>
Mo</div>
<div>
Tu</div>
<div>
We</div>
<div>
Th</div>
<div>
Fr</div>
<div class="last">
Sa</div>
</div>
<div class="row b even">
<div class="outside first">
31</div>
<div>
1</div>
<div>
2</div>
<div>
3</div>
<div>
4</div>
<div>
5</div>
<div class="last">
6</div>
</div>
<div class="row c odd">
<div class="first">
7</div>
<div>
8</div>
<div>
9</div>
<div>
10</div>
<div>
11</div>
<div>
12</div>
<div class="last">
13</div>
</div>
<div class="row d even">
<div class="first">
14</div>
<div>
15</div>
<div>
16</div>
<div>
17</div>
<div>
18</div>
<div>
19</div>
<div class="last">
20</div>
</div>
<div class="row e odd">
<div class="first">
21</div>
<div>
22</div>
<div>
23</div>
<div>
24</div>
<div>
25</div>
<div>
26</div>
<div class="last">
27</div>
</div>
<div class="row f even">
<div class="first">
28</div>
<div>
29</div>
<div>
30</div>
<div class="outside">
1</div>
<div class="outside">
2</div>
<div class="outside">
3</div>
<div class="outside last">
4</div>
</div>
<div class="row g odd">
<div class="outside first">
5</div>
<div class="outside">
6</div>
<div class="outside">
7</div>
<div class="outside">
8</div>
<div class="outside">
9</div>
<div class="outside">
10</div>
<div class="outside last">
11</div>
</div>
</div>
</div>
</div>
Style sheet is http://snagglefoot.net/ainc/calendar-eightysix-default.css
Try specifying a width or top or left property for the div in question if you did not in the original code.
Position is commented out here. Maybe you didn't mean to.
.calendar-eightysix .body {
position: relative;
}
.calendar-eightysix .body .inner .container {
/*position: absolute;*/
left: 0;
}