I'd like to understand how Angular interprets my HTML and CSS code. Layouts that I've been using without Angular seem to break down.
Simple Example: I am trying to create a fixed height header div followed by a body div that fills the remaining space.
It works in vanilla HTML/CSS: https://jsfiddle.net/d4Lmbk2q/1/
HTML:
<div id='mainCont'></div>
<div id='bodyCont'></div>
CSS:
html,
body {
height: 100%;
width: 100%;
margin: 0;
}
body {
display: flex;
flex-flow: column;
align-items: stretch;
}
#mainCont {
background-color: blue;
flex: 0 0 1.8cm;
min-width: 970px;
}
#bodyCont {
background-color: green;
flex: 1 1 auto;
}
In Angular, nothing shows up (presumably because Angular inserts the empty app-root component wrapper element between the flex container and the flex items?): https://codesandbox.io/s/beautiful-pike-u7hbl?file=/src/app/app.component.css
Yes, the display:flex applies to the direct children of body element which in this case are not your divs but app-root tag
I fixed mine by adding a display of flex to the Angular element that's the direct child of the parent that was flexed. In your case it's app-root.
Here is what it will look like:
body {
display: flex;
flex-flow: column;
align-items: stretch;
}
app-root {
display: flex;
}
Related
For some reason I am unable to apply height and width to div elements. I am using TailwindCSS and Nextjs.
My goal is to create slides to snap scroll vertically, but the height and width properties are removed in the browser.
Please any suggestions Im desperate.
This is my css for the container and each view within:
.snap-container {
overflow-y: scroll;
width: 100%;
height: 100vh;
display: flex;
flex-flow: column nowrap;
}
.snap-view {
height: 100vh;
width: 100%;
display: flex;
}
if you had
.snap-container {
overflow-y: scroll;
width: 100%;
height: 100vh;
display: flex;
flex-flow: column nowrap;
}
.snap-view {
height: 100vh;
width: 100%;
display: flex;
}
both your styles will be applied, even if on the picture you are showing only the .snap/view
but the height and width properties are removed in the browser.
this is because those are other properties around the code that are above the code you posted and they may have been overwritten by that, by being cascading
if you want the .h-screen and .w-full properties to apply regardless, you can put them direclty into the element, or trying putting them in the CSS below the .snap-container and .snap-view
try that, hoping I have helped
The old centering method using a container div with a fixed width and margin: 0 auto;
How i can "converted" into a more "modern" way? Because when i use it it centers all elements inside the container not only the container itself, and don't apply the flex-direction property.
EX:
<head>
<style>
.container {
max-width: 1000px;
margin: 0 auto;
}
section {
display: flex;
flex-direction: row;
}
</style>
</head>
<body>
<section>
<div class="container">
</div>
</section
</body>
Just update the styles for section and .container like so:
section {
display: flex;
justify-content: center;
}
.container {
max-width: 1000px;
}
justify-content has a few really useful settings. In your case center does the trick. You had flex-direction: row; which is fine, but that is the default value for flex direction so you can omit that rule.
A max-width on the .container so it is not as wide as the flex section will now produce the centering effect, just remove the margin: 0 auto rule.
I have a simple plunker here.
.container {
display:flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
min-height: 4em;
}
.nav {
flex: 0 0 4em;
height: 1em;
}
.logo {
flex: 1 0 auto;
align-self: stretch;
}
This is working how I want it to in Chrome 49:
But not in IE11:
I have checked that IE isn't in compatability mode - it's not - it's in IE11 mode.
What's going on here?
This is a bug in IE11.
The min-height property on a flex container isn't recognized by flex items in IE11.
If you switch to height: 4em, you'll see that your layout works.
A simple workaround is to make .container a flex item.
In other words, add this to your code:
body {
display: flex;
}
.container {
width: 100%; /* or flex: 1 */
}
For whatever reason, by making your flex container also a flex item, the min-height rule is respected by the child elements.
More details here: Flexbugs: min-height on a flex container won't apply to its flex items
This simple example is rendered differently in Chrome than in Firefox or Edge; in one case the main flex item shrinks to fit the flex container (set to viewport height), but in the other it doesn't. Is the rendering difference based on some bug, or is it something else?
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
}
main {
display: flex;
background: #f60;
}
<main>
<!-- any element longer than the viewport -->
<img src="https://i.redd.it/e7a2rxhf1yrx.jpg">
</main>
Edit: a more clear example.
It seems flexbox do not scale down replaced elements like images (that have an intrinsic aspect ratio) correctly in browsers at the moment, at least! And I believe this is what happens here.
(I read something similar here and met with an issue with image as a flex item here)
Solution:
One solution is using max-height: 100% on the flex item or even you can use flex-basis: 100% if it should always fill the parent height:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
}
main {
display: flex;
background: #f60;
max-height: 100%;
}
<main>
<!-- any element longer than the viewport -->
<img src="https://i.redd.it/e7a2rxhf1yrx.jpg">
</main>
Seems to be an inconsistency across browsers regarding how they may interpret attributes of flex boxes within flex boxes, but I managed to get it to work consistently across browsers by setting the height of the inner box to 0 and then setting the flex box to grow 100% (or 1) within the outer flex box. Here's an example using your code.
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
}
main {
display: flex;
background: #f60;
height: 0;
flex-grow: 1;
}
<main>
<!-- any element longer than the viewport -->
<img src="https://i.redd.it/e7a2rxhf1yrx.jpg">
</main>
Can i get the height of the previous element using only CSS?
I am using calc() function to set dynamically height of the div B.
#b{
height:calc(100vh - heightOfPreviousElement);
}
I need to know the height of the previous element.
what i know is that, 100vh is equal to 100% of the screen height.
I used the code in the answer below.Using flex,
I have one problem. The height of the color orange become smaller.
You can easily achieve the effect you're looking for using flexbox. The trick is to allow the blue container (the one with the flexible height) to grow in size whenever the need arises, using flex: 1 1 auto, which is simply a shorthand for:
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
See proof-of-concept code snippet below:
body {
padding: 0;
margin: 0;
}
.wrapper {
display: flex;
flex-direction: column;
flex-wrap: no-wrap;
align-items: center;
justify-content: center;
height: 100vh;
}
.wrapper > div {
width: 100%;
}
#c1 {
background-color: #880015;
color: #fff;
height: 60px;
margin-bottom: 10px;
}
#c2 {
background-color: #ff7f27;
}
#c3 {
background-color: #00a2e8;
flex: 1 1 auto;
margin-bottom: 10px;
}
<div class="wrapper">
<div id="c1">height: 60px</div>
<div id="c2">height: auto (determined by content?)</div>
<div id="c3">flexible height</div>
</div>
No you can't select a previous element in CSS.
You might be interested in JQuery Prev OR Parents method for selecting previous element and apply height using .css() method?