I've made this flexbox table like this:
<div class="flex-row">
<div class="flex-col">
<i class="thumbs-up"></i>
<i>20</i>
</div>
<div class="flex-col">
<i class="thumbs-down"></i>
<i>5</i>
</div>
</div>
scss:
.thumbs-up {
width: 24px;
height: 24px;
&:after {
content: " ";
background: url(https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.5.6/collection/build/ionicons/svg/ios-arrow-up.svg) no-repeat;
width: 100%;
height: 100%;
display: block;
}
}
.thumbs-down {
width: 24px;
height: 24px;
&:after {
content: " ";
background: url(https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.5.6/collection/build/ionicons/svg/ios-arrow-down.svg) no-repeat;
width: 100%;
height: 100%;
display: block;
}
}
.flex-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 20%;
}
.flex-col {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
text-align: center;
i {
text-align: left;
}
}
Here is the jsfiddle.
As you can see the numbers are not quite center-aligned below the icons.
How can I fix this?
The reason your numbers aren't center-aligned is because:
The i elements within .flex-col have the style text-align: left applied.
The i elements don't have a width set, so take up 100% of the parent element width (.flex-col)
So if you had aligned the text in the center, it would have been in the middle of the column, away from the icon. I've added some debugging borders to elements on this fiddle to try and explain the issue.
To fix this I've added a width to the i element containing the numbers example fiddle solution
An alternative solution would be to set margin: right on the .flex-col elements, removing flex-basis and flex style rules. Then set text-align: center on the i element as above.
see alternative example fiddle
Related
When .parent div width (or more generically the screen width) decreases, the .right div text should overlap on top of the .left div text.
.parent {
display: flex;
align-items: center;
letter-spacing: normal;
outline: 0;
}
.left {
text-align: center;
display: flex;
align-items: center;
}
.right {
width: 15px;
min-width: 15px;
position: relative;
display: flex;
background-color: pink;
z-index: 9999999999;
}
<div class="parent">
<div class="left">This is some text that can and should be overlapped as width decreases</div>
<div class="right">This Text should always overlap text to the left</div>
</div>
.left{
overflow: hidden;
}
.parent{
width:100%;
}
Adding an overflow property to the left div will hide the text as the right text overlaps it in combination with a parent that is 100% width. Works like a charm.
Dont know if I understand what you want. But here is a solution as I understood the task. When the screen has a width of less then 900px, the 'right' div will be displayed on top of the 'left' div. (Added some colors to make it easier to understand where each div is)
.parent {
display: flex;
align-items: center;
letter-spacing: normal;
outline: 0;
background-color: green;
}
.left {
text-align: center;
display: flex;
align-items: center;
background-color: yellow;
}
.right {
width: 15px;
min-width: 15px;
position: relative;
display: flex;
background-color: pink;
z-index: 9999999999;
}
#media screen and (max-width: 900px) {
.parent {
flex-direction: column-reverse;
}
}
<div class="parent">
<div class="left">This is some text that can and should be overlapped as width decreases</div>
<div class="right">This Text should always overlap text to the left</div>
</div>
The code that appears below creates the following layout:
The important part is that the content, although centered on the screen when not overflowing, never overlaps the navbar and has its own scrollbar:
The problem is that this layout is achieved with the help of padding (marked by a comment in the code below), which results in the additional scrollbar on the right of the screen.
How can I design the same layout that would have only one scrollbar - the one in the content?
Please note that the solution should not break the following details:
The rounded corners and the shadow.
The title in the content block not participating in scrolling.
The image covering the whole scrollable content, so it scrolls together with the content.
In addition, it would be great if this can be achieved without as many nested div's as I have right now.
Edit: I am ready to go with the suggestion of #JHeth in the comments section. However, I would still be interested if someone can come up with an alternative design that does not rely on padding for centering.
Here is the code (CodePen):
* {
padding: 0;
margin: 0;
}
html {
font-size: 62.5%;
}
:root {
--navbar-height: 3rem;
}
.navbar {
width: 100%;
text-align: center;
font-size: 2rem;
line-height: var(--navbar-height);
background-color: lightgreen;
}
.centering {
position: absolute;
inset: var(--navbar-height) 0 0 0;
display: flex;
flex-direction: column;
align-items: center;
& .auto-margin {
margin: auto;
// For scrollable content
display: flex;
max-height: 100%;
padding-bottom: calc(var(--navbar-height)); // Causes scrolling
}
}
.content-block {
display: flex;
flex-direction: column;
.title {
font-size: 2rem;
position: sticky;
}
.content-outer-container {
display: flex;
flex-direction: column;
overflow-y: auto;
border-radius: 1em;
box-shadow: 0 1em 2em rgba(black, 0.4);
.content-container {
width: 300px;
overflow-y: auto;
.content {
position: relative;
padding: 1em;
&:before {
content: "";
z-index: -1;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100%;
background-position: center;
background-image:
url(http://www.freegreatpicture.com/files/147/18380-hd-color-background-wallpaper.jpg);
}
}
}
}
}
<div class="navbar">An Amazing Navbar</div>
<div class="centering">
<div class="auto-margin">
<div class="content-block">
<div class="title">My Title</div>
<div class="content-outer-container">
<div class="content-container">
<div class="content">
<h1>Line1</h1>
<h1>Line2</h1>
<h1>Line3</h1>
<h1>Line4</h1>
<h1>Line5</h1>
</div>
</div>
</div>
</div>
</div>
</div>
simply remove max-height:100%; to .centering .auto-margin and it'll works!
.centering .auto-margin {
margin: auto;
display: flex;
/* max-height: 100%; */
padding-bottom: calc(var(--navbar-height));
}
I'm trying to put two flex containers next to each other using flexbox, taking this layout as reference (I want it to be like the first row here, with part of the image on the left inside a box and the other one on the right)
This is my code so far for the two containers:
.chaco-container {
border: $borde-textos;
background-color: #bda89c;
margin: 0;
padding: 1em;
width: 50%;
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.plan-container {
background-color: white;
border: $borde-textos;
width: 50%;
display: inline-flex;
}
display: flex; needs to be applied on the parent container. Check out the below example snippet.
.flex-container {
display: flex;
}
.chaco-container {
width: 50%;
background-color: yellow;
}
.plan-container {
width: 50%;
background-color: skyblue;
}
<div class="flex-container">
<div class="chaco-container">...content</div>
<div class="plan-container">...content</div>
</div>
I think you might be facing gap between the two inline flex elements which is resulting to the second element going to the next line.
To fix this:
Use this as a reset:
*{
margin: 0;
padding: 0;
box-sizing:border-box;
}
2)Give negative margin to the plan(second) container:
margin-left:-4px;
(increase the number of negative pixels until both flexboxes are on the same row)
I would like two elements (divs) in a column. The first has a fixed height, and the second I want to fill all remaining height. If the content of the second element exceeds the space left, I want to scroll its contents, and not have the second element take up more space (which causes the parent to scroll).
Image (current)
For example, the "first element" is the search bar in this photo. Fixed height, and remains on top.
The "second element" is the data table. As you can see at the bottom, the table contents extend the height of the page, and the entire page becomes scrollable. This is not what I am looking for.
Image (desired) I would like the table container to behave similarly to this red box. It fills it's remaining height, and when it contains content that overflows, I would like just that element to scroll. Only scroll the content within the confines of the red box.
I have seen many examples similar to this, but all of them have a specified height for the "second element", even if it is a vh property. vh doesn't work for me since the 100% isn't the entire viewport.
I've been using flexbox to try and achieve this, and I get close, but I've only ever been able to either specify a height for the "second element", or have it grow to fill available space, but then exceed it, and overflow the whole container.
The below code is very close to desired behavior, except when the viewport becomes to small, "box 2" goes off screen and the whole thing scrolls, I want the content in "box 2" to scroll.
html,
body {
height: 100%;
}
.container {
height: 100%;
min-height: 100%;
display: flex;
flex-direction: column;
.box {
text-align: center;
color: white;
font-family: sans-serif;
font-size: 36px;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
}
.box-1 {
background-color: green;
height: 60px;
}
.box-2 {
background-color: blue;
flex: 1;
}
<div class="container">
<div class="box box-1">box 1</div>
<div class="box box-2">box 2</div>
</div>
Just apply an overflow:auto on the second div and a max-height to the container.
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.container {
max-height: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.box {
text-align: center;
color: white;
font-family: sans-serif;
font-size: 36px;
padding: 20px;
justify-content: center;
}
.box-1 {
background-color: green;
height: 60px;
}
.box-2 {
background-color: blue;
flex: 1;
overflow: auto;
}
.expando {
height: 1000px;
/* for demo */
}
<div class="container">
<div class="box box-1">box 1</div>
<div class="box box-2">box 2
<div class="expando"></div>
</div>
</div>
html,
body {
height: 100%;
margin: 0;
}
.container {
height: 100vh;
display: flex;
flex-direction: column;
}
.box {
text-align: center;
color: white;
font-family: sans-serif;
font-size: 36px;
padding: 20px;
}
.box-1 {
background-color: green;
height: 60px;
}
.box-2 {
background-color: blue;
height: 100%;
overflow: auto;
}
Sorry, another flexbox related question :)
I have two flex elements :
A container (red) containing a centered div (yellow)
A footer (blue) with an undefined height
The red container has a flex-grow:1 attribute, forcing it to take the remaining space on the screen
The issue happens when the yellow element is bigger than the screen size. I would like my red container to grow based on its content. Any idea of how I could do that ?
HTML:
<div class="container">
<div class="content"></div>
</div>
<div class="footer"></div>
CSS:
body,
html {
margin: 0;
height: 100%;
display: flex;
flex-direction: column;
}
.container {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
background: red;
}
.content {
background: yellow;
height: 2000px;
width: 100px;
}
.footer {
flex-shrink: 0;
height: 50px;
background-color: blue;
}
https://codepen.io/stepinsight/pen/roRVGQ
== EDIT ==
Andre helped me find the answer, thanks heaps !
The only thing you need to change in the code above is to replace height by min-height and the % by vh for the body/html tags 🎉
body,
html {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
}
Simply remove the height property on the body element and add height: 100% to html
* { box-sizing: border-box; }
html {
height: 100%
}
body {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
}
.container {
display: flex;
align-items: center;
justify-content: center;
background: red;
}
.content {
background: yellow;
height: 2000px;
width: 100px;
}
.footer {
height: 50px;
background-color: blue;
}
Corrected: https://codepen.io/ferreirandre/pen/maoVvb
Feel free to play around with the height of .content