I have a mat-table that I want to configure using flex to grow to use the entire browser available space and display a scrollbar if the number of records don't fit.
I manage to do it by wrapping the table inside a div and assigning a static height to this div, for example:
.example-container {
height: 800px;
overflow: auto;
}
But when I try using flex the table just overloads the available height:
.example-container {
flex: auto;
overflow: auto;
}
Please take a look at the project I created in Stackblitz
Any advice would be greatly appreciated.
You will need to define some sort of height in your container for this to work. This would be 90% of the browser vertical height.
.example-container {
height: 90vh;
overflow: auto;
}
Update
Here is solution using flex
.example-container {
flex-grow: 1;
flex-basis: 90vh;
overflow: auto;
}
Related
I'm trying to create a div with a max-height that has a number of cards nested within it, it works well on Chrome and looks this way:
However, on safari, all the children divs are collapsed to fit into the max-height, when what I really want for them is to be their normal sizes and be hidden by the "overflow : hidden" property of the parent div:
Here are my styles, it's written in Sass:
&_card {
z-index: 2;
display: flex;
overflow: hidden;
max-height: to-em(407);
&_cards {
height: inherit;
width: 100%;
display: flex;
flex-direction: column;
}
}
I was able to fix this by writing this line under &_cards:
height: fit-content;
I have code to center my images (and eventually videos) like I want inside a div, but I am trying to get the images to stack vertically in a column.
It works if the space is confined enough, but I want it to work all the time. What can I do? Here is my codepen:
div{
margin: 0 auto;
height: 100vh;
text-align: center;
overflow: hidden;
max-width: 172vh;
}
img{
height: 50%;
}
https://codepen.io/thejaredmosley/pen/OJPVqBa
try below:
div {
....
display: flex;
flex-direction: column;
}
You can simply do it with the display:block CSS property.
https://www.w3schools.com/cssref/pr_class_display.asp
Give this CSS to your image and your image will get full-width space and will come in a stack.
So for Image, add this property:
img{
display:block;
}
I'm attempting to create a "bookshelf" using html and sass (Note: this is heavily based on http://ameijer.nl/2013/03/bookshelf-css-only/) You can see my version of the concept here:
https://mainstringargs.github.io/bookshelf.html
I'm trying to only show the horizontal scrollbar when necessary for the particular "bookshelf" -- for example, in the "Read" shelf above -- but not have it appear when not necessary -- see "Reading" & "On Deck" at the link.
I expected using "overflow: auto;" would give me this effect, but that seems to cause the scrollbar to always appear.
The relevant sass file is here: https://github.com/mainstringargs/mainstringargs.github.io/blob/master/src/styles/_bookshelf.scss
How can I only show the horizontal scrollbar when needed for each particular bookshelf?
As an example, it currently looks like this with horizontal scrollbars on both displayed bookshelfs even when not enough books:
I want it to look like this mockup (Note the bottom bookshelf has no horizontal scrollbar because there aren't enough books there, but the top one does because there are enough books to scroll):
You can use flexbox and let .books overflow vs .shelf just be sure to remove the width: 1470px; from .books, .shelf:after:
.shelf {
height:auto;
overflow: hidden;
padding: 0;
}
.books {
position: relative;
white-space: nowrap;
display: flex;
flex-wrap: nowrap;
overflow: auto;
align-items:flex-start;
justify-content: flex-start;
height: 420px;
z-index: 1;
}
.books, .shelf:after {
/* width: 1470px; */
box-sizing: border-box;
padding: 40px 30px;
margin: 0;
width: 100%;
}
.book {
flex-shrink: 0;
}
By looking at your code if you only want to apply a horizontal scroll when necessary and not vertically.
Use the following on your class name:
.books {
overflow-x: auto; // Auto horizontal
overflow-y: hidden; // Disable vertical scrolling
}
Try that see if it works. No need to add scroll but let the browser decide with the "auto" set.
I actually found a solution to my problem but would like to know why my original solution doesn't work.
I have a simple flex container in which I want the first div to be 30% of the container. I gave it a flex-basis of 30% to try to achieve this. This works until I have content that exceeds the length of 30%. At this point, it extends the div making it more than 30%.
I solved this using the max-width attribute which I found from another question after some research, but am still confused why flex-basis does not work, and would prefer not to have a max-width attribute when using flex box. I read that if flex-direction is row, flex-basis should be a replacement for width, but this does not seem to be the case.
Here is a fiddle and the css along with it:
https://jsfiddle.net/jg5nbdgp/12/
.container {
display:flex;
flex-direction: row;
.left {
flex-basis: 30%; /* This doesn't work */
/* max-width: 30%; */ /* This works */
.box {
height: 50px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.middle {
flex-basis: 50%;
}
.right {
flex-basis: 20%;
}
}
It is because flex box items cannot be smaller than the actual content. This is the default behaviour of flexbox.
Including min-width:0 to .left class will make flex-basis work.
So in your case your content width is greater the flex-basis value and by the default flexbox behaviour flex box width cannot be smaller than the content. By flexbox terms your code has actually become
.left {
flex-basis: 30%;
min-width: auto;
max-width: auto;
}
so you have to update the width to let flexbox come over the default behaviour. update your class to
.left {
flex-basis: 30%;
min-width: 0;
}
In order words you can remember width values precedes the flex-basis values.
JsFiddle: https://jsfiddle.net/gLodw7k1/
I had a similar issue. I had 2 equal columns with a max width like so:
flex-basis: 50%;
max-width: 30em;
Worked everywhere but IE. In IE it would shrink the columns. I fixed it by changing basis to the same value like so:
flex-basis: 30em;
max-width: 30em;
It's still responsive, because flex-basis works with proportions, so for 2 children it's equivalent to 50%.
Here on this page I need to display the SPACIAL and RECOMMENDED section in in single line with horizontal-scroll.
My current css is
.box-product {
width: 100%;
overflow: auto;
}
I have tried like this
.box-product {
width: 100%;
height: 320px;
overflow-x: scroll;
overflow-y: hidden;
}
But it does not enable horizontal scroll, It still shows the vertical scroll.
Set width to .box-product equal to product width * product count. Nothing else.
Now, you have there width: 100%; (737px) and the default CSS behavior in this case is to break the content to another line. When you have there overflow: hidden, the second line is hidden.
Provide your box-product class width in pixel not in percentage. And than apply overflow:auto.
It will work.
Ex:
.box-product {
width: 100px;
overflow: auto;
}
And if you want only horizontal than add overflow-x:auto;
The easiest way to achieve this .box-product { width: max-content; } (modulo vendor prefixes).
Alternatively display: flex, since its children do not wrap by default.
Remove the width: 100% and make sure your content doesn't float.