I have the following html and css code:
JSFiddle
/** CSS Framework: START **/
html {
display: flex;
}
.flexbox {
display: flex;
}
/** CSS Framework: END**/
.inner-box {
width: 100%;
overflow-x: scroll;
}
.very-big-container {
width: 4000px;
}
<div class="flexbox">
<!-- I can change everything starting from here -->
<div class="inner-box">
<div class="very-big-container">
Foobar
</div>
</div>
</div>
You see that there is a very big container which doesn't fit a normal screen size. That's why I am using inner-box for setting the max width to 100% and for enabling a horizontal scrollbar. The problem is that the scrollbar for the container inner-box does not appear. I only have a scrollbar for the whole window. I know that I can fix my problem by removing display: flex from html and flexbox, but unfortunately these properties are coming from a css framework and I cannot change anything about that. So do you have any other ideas to enable the scrollbar for inner-box?
Reason
display: flex declaration in the html element enables the flex context for all the direct children of html.
As no flex-direction and flex-wrap properties declared, their default values would get applied on html.
html {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
Solutions
Solution 1
Add flex-direction: column declaration to html element
Solution 2
Add width: 100% declaration to body element
You can use width: 100vw;
See example
Related
I have some html like this:
.container {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
padding: 10px;
background-color: aqua;
}
.box {
width: 100%;
height: 100%;
flex-grow: 1;
background-color: cadetblue;
display: flex;
flex-direction: column;
}
.fill {
flex-grow: 1;
background-color: antiquewhite;
}
.middle {
height: fit-content;
background-color: azure;
justify-self: flex-end;
}
.bottom {
height: fit-content;
background-color: darkgray;
justify-self: flex-end;
}
<div class="container">
<h3>Title</h3>
<div>Some Stuff</div>
<div class="box">
<div class="fill">Fill</div>
<div class="middle">Middle</div>
<div class="bottom">Bottom</div>
</div>
</div>
I want the divs middle and bottom to stack at the bottom of the screen, and for the div fill to, as the name suggests, fill the remaining space without pushing the middle/bottom divs off the screen or creating a scrollbar, however it doesn't display like that:
Note that the middle and bottom divs are not visible and the scrollbar created by the fill div expanding beyond the available height.
See this StackBlitz for a demo: https://stackblitz.com/edit/angular-ivy-mwtwdg?file=src/app/hello.component.scss
I had to update a lot of CSS but feel free to take a look.
The right approach to any angular project is to have clean from the very first component (app component), and cascade it down to any other component.
Demo stackblitz
EDIT : comment explanation
"The right approach" can be explained quickly like this :
html and body should be at 100% of the page
App component should be at 100% and in display block
Any component that requires some specific layout (flex, grid), should be constrained by its parent or an absolute size, and display block.
The issue with Angular is that when you create a component, it is not set to display: block. This means the component is kind of free in the DOM flow, and this results in the kind of issues you have encountered.
When you set display: block to EVERY component (you can use angular.json to make it automatic), then you have a more deterministic approach to the CSS, where what you expect is what you get.
In your case, since the components were not display:block, they could not be constrained by height, width, or their parents.
Added to that, the fact that you wrote some probelmatic CSS (for instance, the sidenav-container being 100% of the height of its parent : what about the toolbar ?), this resulted in your issue.
As a final word, when it comes to CSS in Angular, be sure to have clean CSS from the top, and when you have any issue like you did, crawl back component by component, to find and correct the unclean ones !
I currently have a simple header, main, footer structure in my angular project and would like to make the main-component a flex-box in order to arrange all given components horizontally with equal width. Additionally I want to change the flex-direction, when the screen width is lower than 700px to column.
Since I already achieved this with pure HTML + CSS (see jsfiddle: http://jsfiddle.net/aJPw7/443/) I have the feeling that this has something to do with angular parent components.
Expected behaviour: The two <app-content-section> elements each take 50% width of the <app-main-component> and 100% height. When I change the flex-direction to column they should have 100% width and 50% height:
Currrent behaviour: The <app-content-section> elements align when I use "justify-content" but are not influenced by any hight or width attributes.
Style.css
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
app-root HTML:
<app-main-component>
<app-content-section></app-content-section>
<app-content-section></app-content-section>
</app-main-component>
app-main-component HTML:
<div class="main-component">
<ng-content></ng-content>
</div>
app-main-component CSS:
.main-component {
display: flex;
flex-direction: row;
height: 100%;
}
#media screen and (max-width: 700px) {
.main-component {
flex-direction: column;
}
}
app-content-section HTML:
<div class="content-section">
<a>Test</a>
</div>
app-content-section CSS:
.content-section {
width: 100%;
height: 100%;
}
Edit1: I also tried :host{ } but still no luck.
Edit2: I created another jsfiddle where I achieved the correct width, by styling the host-element and adding flex: 1, but elements still won´t use the whole height. https://jsfiddle.net/1c15q243/19/
So the correct answer is adding a :host{ flex: 1; } in the "app-content-section CSS" in order to give its hosting-component <app-content-section> the correct flex-sizing.
I figured it out in the fiddle of my second edit, but #karthikaruna pointed out that I forgot to add HTML- tag in the stylig file.
Set 100% height to html. Here is the updated fiddle.
Well i am not a great designer but i am loving this flexbox.
I am making a small login form demo with flexbox using angular 5 material.
I wish to divide my login form into 2 parts.
I am trying to make it responsive fully .
here is what i am looking for : my login image
So far i have done only this:
login.component.html
<div class="login-container">
<mat-card class="mat-elevation-z12">
<mat-card-content>
</mat-card-content>
</mat-card>
</div>
login.component.scss
.login-container {
height: 100vh;
width: 100%;
position: fixed;
top: 0px;
background: #3f51b5;
padding: 10px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
mat-card {
height: 500px;
width: 900px;
}
mat-card-content {
}
}
Can anybody tell me how I divide this form into 2 parts with the image on the left side block and username/password field on right side of the block?
At the same time how do I make it responsive?
I am not looking for full design but any help would be much appreciated.
It seems like you'd like to use the <mat-card> element to wrap both the image and the form contents. There are many ways to structure this, but the simplest way might be to include two child elements inside <mat-card> – one for the form contents (perhaps your current <mat-card-content> element), and another for the image. You would then want to apply the flexbox properties to <mat-card> rather than .login-container.
Here's one possible approach (assuming you want the two child divs to stretch full-width on screens smaller than 600px wide):
First, in your markup:
<div class="login-container">
<mat-card class="mat-elevation-z12">
<mat-card-image>
<!-- card image here -->
</mat-card-image
<mat-card-content>
<!-- login form contents here -->
</mat-card-content>
</mat-card>
</div>
And in your SCSS:
.login-container {
mat-card {
height: 500px;
width: 900px;
max-width: 100%; // prevents extending beyond screen width
display: flex;
justify-content: center;
align-items: center;
}
mat-card-image,
mat-card-content {
flex: 0 1 50%; // sets flex-basis to 50%
}
}
// media query for responsiveness (adjust 600px as necessary)
#media only screen and (max-width: 600px) {
.login-container {
mat-card-image,
mat-card-content {
flex: 1 1 100%; // sets flex-basis to 100%
}
}
}
The flex: 1 1 100% properties I'm using are the flex shorthand notation. You can find a thorough explanation of that property here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I made a quick pen here as a demo:
https://codepen.io/anon/pen/zRMqvx
Make a flexbox container by adding a div block or section and setting it to Display: Flex.
By default, the layout direction will be horizontal and children will stretch vertically
Add 2 div blocks to the flexbox container and give them the same class.
Set Sizing: Expand on both divs to make them evenly fill their parent's widths.
I'm trying to align an image to the bottom of the out div element using vertical-align,but this vertical-align doesn't seem to work,the image is not moving at all.
<div class="row">
<div class="col-md-1">
<img src="../images/image.png" style="height: 20px; width: 20px;cursor:pointer"/>
</div>
<div class=col-md-11 >
<div style="overflow:auto;height:300px"></div>
</div>
</div>
I'm using bootstrap classes for alignments. Is there anything that can make the image div align to the bottom of the outer div?Which is taking the height of second div which is 300px;.
If I understand you correctly, something like this should do the trick:
.parent {
position: relative;
height: 300px;
}
.child {
position: absolute;
bottom: 0;
}
You could add those classes to the DIV and the IMG respectively.
It looks like the parent div will be 300px high anyway because of the height set on the child in the adjacent div. If you specify the height of the parent instead, then you can absolutely position the child relative to the size of the parent.
If you don't set the parent as position:relative, then the child will be position relative to something else (like the page).
Vertical-align won't work because the IMG is an inline element, and the behavior you're expecting is table-cell dependent. With inline elements, vertical alignment is relative to the line and not to the parent container, so that an image aligned with text would sit in various positions relative to a given line of text.
Be sure to check the documentation for this and other questions, which is well-explained at MDN.
You can use flexbox for this. Appling the parent styles to the DIV. No extra styling needed for img
.parent {
display: flex;
justify-content: flex-end;
flex-direction: column;
}
Here's what you'll want to add if you don't have a taskrunner adding the prefixes for maximum compatibility.
.parent {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
Currently 97% of the browsers used today support flex.
I'm creating an internal app so browser compatibility restrictions aren't a massive concern. I am using a div container that is using jquery ui resizable and therefore the size is unknown for any given div. I am also using a chart library (amCharts) which needs the parent div to have a height in order to render the chart.
The issue I'm facing is 100% within a div (with other elements in said div) means whilst the child div accepts 100% as verbatim and makes itself 100% of the parent div this isn't actually the intention - I want it to use the remaining space available in the div, rather than 100%.
I've tried table-row however that doesn't provide a height and therefore amcharts doesn't work well with any resizing (as it has no height/width to base itself on).
So I guess my question is, based on height, what is the best method of making a div use 100% of the remaining space, without JS and without using table/table-cell/table-row styles?
Edit: Here's a JSFiddle of the issue:
https://jsfiddle.net/2c8n1y04/
And the HTML:
<div class="a">
<div class="b"><h3>Header</h3></div>
<div class="c">
<div id="chartdiv"></div>
</div>
</div>
Styles:
html,body,.c,#chartdiv
{
height:100%
}
.a {
height:300px;
background-color: grey;
}
.b {
background-color: yellow;
}
h3 {
margin:0;
}
There is also a chart added in the JSFiddle using the amcharts library, this library is dependent on a height (otherwise it renders to 0 height). Also in the code base i'm using jquery-ui resizable ui (via gridstack) which means I am unable to define a height as the chart height simply has to stretch to the full remaining height within the div.
Any love for Does your engine support flex?
That would in my eyes be the easiest and cleanest solution.
Apply to the parent:
flex-direction: column;
display: flex;
/* or, if a prefixed version is supported, one of: */
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
and to the child to be stretched:
flex: 1;
And you should be good to go.
Demo, if your browser supports it (click on "Full page" to see the effect)
html, body {
height: 100%;
margin: 0;
}
div {
border: solid 1px #333;
padding: 5px;
}
#a {
margin: 10px;
height: calc(100% - 40px);
flex-direction: column;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
#b {
height: 100px;
background: #FFE;
}
#c {
flex: 1;
background: #EFE;
}
<div id="a">
<div id="b">Fixed</div>
<div id="c">Flexible</div>
</div>
But may I ask why you want a no-JS solution, since you're already using jQuery?