Trying to get cdk-virtual-scroll-viewport height to be equal to page height.
<div class="plServiceItemsList-list">
<cdk-virtual-scroll-viewport class="plServiceItemsList-listViewPort" itemSize="20">
When trying to use height 100%, I see no list
.plServiceItemsList-listViewPort {
height: 100%;
min-height: 100%;
}
The only way it will be displayed is specifying a height:
.plServiceItemsList-listViewPort {
height: 100px;
}
But this is not dynamic.
After #Chellappan suggested using vh, I thought my issue was solved, but actually, when the page size what bigger than the screen, it failed.
This is what I used:
.plServiceItemsList-listContainer {
display: flex;
flex-direction: column;
min-height: 100%;
}
.plServiceItemsList-listViewPort {
flex-grow: 1;
}
Related
I have an effect on my website, and it only works within a 16:9 aspect ratio. This means I need to keep it within that aspect ratio. I wanted to make a box that was vertically and horizontally centered which could resize proportionally to contain the effect. I looked up many tutorials and guides on flex resizing, but i still cant get it to work properly. The padding in the that contains the box is lopsided, and it doesnt align properly either. It scrolls horizontally even though im using 100vh/vw?? Does 100% of the viewport's height really mean what it says?
I'm really not sure what to do...
Codepen example of my code below:
https://codepen.io/Ktashi/pen/KKeOJey
html
<div class="flex-align">
<div class="aspect-ratio-box"></div>
</div>
css
body {
padding: 0;
margin: 0;
}
.flex-align {
width: 100vw;
height: 100vh;
margin: 0;
padding: 1vw;
display: flex;
align-items: center;
justify-content: center;
}
.aspect-ratio-box {
height: auto;
aspect-ratio: 16/9;
background: red;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 94vw;
max-height: 94vw;
max-width: 94vw;
}
I tried changing the flex-grow: property's value, along with flex-shrink: and flex-basis: but that didn't help much. I'm very stuck as I've only really been coding with html and css for about a year off and on.
You can use the CSS media query to test whether the item will fit within the parent which has 100vw/100vh dimensions.
This snippet is just to give the idea.
It does a couple of things - makes the parent's padding be part of its dimensions by setting box-sizing border-box and sets the height or width as % of the parent dimensions.
.aspect-ratio-box {
aspect-ratio: 16/9;
background: red;
}
#media (max-aspect-ratio: 16 / 9) {
.aspect-ratio-box {
width: 94%;
}
}
#media (min-aspect-ratio: 16 / 9) {
.aspect-ratio-box {
height: 94%;
}
}
body {
padding: 0;
margin: 0;
background: black;
}
.flex-align {
background: blue;
width: 100vw;
height: 100vh;
margin: 0;
padding: 1vw;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
<div class="flex-align">
<div class="aspect-ratio-box"></div>
</div>
How can I set a height of left column(block) to 100% using flex? I have dom like this:
<LeftPanel>
<Logo />
<Profile />
<Chat />
<SocialButtons />
</LeftPanel>
LeftPanel to have a height 100%. Chat should grow or shrink by free space, but it isn't. How I should use css(scss) flex for that?
I don't know if I got what you wanted to do, but if you want <LeftPanel> to be 100% of the screen and <Chat> to be vertically expansive, you should set its CSS with the following properties:
.LeftPanel {
display: flex;
flex-direction: column;
height: 100vh;
}
<Logo>,<Profile> and <SocialButtons> should have a defined height. Like the following example:
.Logo {
height: 60px;
width: 100%;
}
.Profile {
height: 160px;
width: 100%;
}
.SocialButtons {
height: 50px;
width: 100%;
}`
An then, here's two possible tricks:
.Chat {
flex-grow: 1;
}`
With flex-grow you can set the expansive factor of an flex item over the others, read the docs here.
.Chat {
height: 100vh;
}`
If .Chat's parent doesn't wrap its content with flex-wrap, the .Chat will occupy the remaining space, of the parent's space.
Okay, so i have a wrapper with 3 columns where the middle container is of a fixed width of 595px. The left and the right has a 2:1 size ratio. But when i put content into the left container which has width auto it exceeds the main wrappers width (width of screen 100%);
How do i solve this problem. I dont want it start grow like that i just want the colums to be responsive but width different width ratios.
If it helps, im in a angular project and i have a mat tab group inside the left column. I stil dont think this is the issue since it shouldnt exceed its main width
Here's the scass im using:
.row {
display: flex;
width: 100%;
justify-content: space-between;
flex-direction: row;
& .column {
margin: 5px;
&.left {
flex: 2;
margin-left: 50px;
}
&.middle {
min-width: 595px !important;
max-width: 595px !important;
flex:initial;
}
&.right {
min-width: 350px !important;
flex: 1;
}
}
}
I'm facing a strange issue that might have link with flexbox misbehaving with max-height, but so far I didn't find any pure css solution.
I made a plunker to summarize the problem. If you resize your window to reduce its height, at some point you should have a scrollbar in the first block, but if you get back to a higher height, even if there is enough space, the scrollbar won't disappear unless you put your mouse over it (which feels very bugy) : https://plnkr.co/edit/VsJ7Aw8qZdSM1iJeL7Bj?p=preview
I have a main container (in flex) containing 2 blocks (also in flex).
The main container has its height set to 100%, allowing it to resize itself following the window size.
Both children have a fixed content and an overflow-y set to auto.
The first child has a max-height in % to let more height to the second child.
The issue seems to come from this max-height rule. If you remove it, then there's no problem, but I need this max-height...
I don't want to use something like:
.max { flex: 1 1 auto; }
.all { flex: 3 1 auto; }
because it would make my first block higher than its content depending on the window size. I want the first block to have at most its content height.
So my question is: Is it an implementation issue in many browsers (maybe all, but I only tested it in Chrome, IE10 and IE11), or is something wrong in my logic ?
Thank you.
UPDATE: I used a fixed height for my content in this example, but in my project it's a list of n elements in it. So I can't really set my max-height with px value.
UPDATE2: I can't use vh in .max max-height property because it takes 100vh as 100% of viewport height (basically your browser window height). But in my context, .main is already in other containers. Those containers have already their heights defined and are smaller than my window height.
/* Styles go here */
html {
height: 100%;
}
body {
height: calc(100% - 16px);
}
.main {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
.max,
.all {
display: flex;
flex-direction: column;
width: 100%;
overflow-y: auto;
}
.max {
flex: 0 1 auto;
min-height: 103px;
max-height: 40%;
background-color: green;
}
.all {
flex: 2 1 auto;
min-height: 235px;
background-color: blue;
}
.content {
flex: 0 0 auto;
box-sizing: border-box;
height: 200px;
margin: 5px;
border: 1px dashed black;
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main">
<div class="max">
<div class="content"></div>
</div>
<div class="all">
<div class="content"></div>
</div>
</div>
</body>
</html>
It is a bug, in Chrome, a test in FF and Edge, it works fine.
Since you use full viewport height, change the max-height: 40%; to max-height: 40vh;.
Another way, as in below sample, is to change the 100% in height: 100% to 100vh.
I guess this works better because viewport units like vh is a fixed unit, which percent is not.
Plnkr demo: https://plnkr.co/edit/66W4a2lOI58XLudCmkw9?p=preview
html {
height: 100vh;
}
body {
height: calc(100vh - 16px);
}
.main {
display: flex;
flex-direction: column;
height: 100vh;
width: 100%;
}
.max,
.all {
display: flex;
flex-direction: column;
width: 100%;
overflow-y: auto;
}
.max {
flex: 0 1 auto;
min-height: 103px;
max-height: 40%;
background-color: green;
}
.all {
flex: 1 1 auto;
min-height: 235px;
background-color: blue;
}
.content {
flex: 0 0 auto;
box-sizing: border-box;
height: 200px;
margin: 5px;
border: 1px dashed black;
background-color: white;
}
<div class="main">
<div class="max">
<div class="content"></div>
</div>
<div class="all">
<div class="content"></div>
</div>
</div>
Yes it feels buggy. If you increase the height of the window the height of the first box does not get updated unless:
you decrease the height again
"put your mouse over it" (did not quite get your meaning here)
IMHO this is a browser bug.
If you set flex-grow to anything greater 0 for the first box, the height gets updated correctly, if you increase the height of the window (as you would expect) But using flex-grow isn't an option as the box could potentially grow bigger than its content.
Rather than using max-height:40% you should use the exact same height as you use for .content and use flex-grow: 1 as well to circumvent the "browser bug"
Note: I asked a very similar question recently, but was downvoted as I used an external URL as supposed to JS fiddle
I have the following code:
HTML:
<div id="homepage-banner-contents">
<div>
<img src="http://s.hswstatic.com/gif/whiskers-sam.jpg" alt="logo" id="banner-logo"/>
</div>
</div>
CSS:
html, body {
height: 100%;
}
#homepage-banner-contents {
height: calc(100% - 60px);
background: red;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
}
#banner-logo {
max-height: 320px;
}
#banner-logo {
max-height: 320px;
max-width: 100%;
}
https://jsfiddle.net/anik786/9vd83rww/
Goal
My goal is to keep the image in the centre of the red background and for the image to shrink when the height of browser becomes too small.
What actually happens
Although the above code is okay for normal screen sizes; when the browser height is reduced too much, the image does not seem to shrink at all, but instead insists on keeping its same size, causing overflow.
Is this what you are looking for? https://jsfiddle.net/9vd83rww/2/
#banner-logo {
height: calc(100vh - 80px);
max-width: 100%;
}