based on what I have below, can someone help me on how to make my footer stay to the bottom of my browser window if my main content does not have enough content. I don't want a sticky footer. There's gotta be an angular material way of doing this but I can't find it.
Thanks!
<body layout="column" >
<md-toolbar >
</md-toolbar>
<div layout="row" flex>
<md-sidenav class="md-sidenav-left md-whiteframe-z2 " flex >
</md-sidenav>
<md-content flex layout="row" layout-align="center start">
<div style="max-width: 1600px;" flex layout="column" layout-fill >
<div >
this is the main content
</div>
<div >
this is the footer
</div>
</div>
</md-content>
</div>
</body>
here is jsfiddle
I hope this can help you. I added some classes to your html and applied these rules.
.wrapper,
div[layout=row]
{
height: 100%;
}
div[layout=column]
{
display: flex;
min-height: 100vh;
flex-direction: column;
}
.content
{
flex: 1;
}
Related
I have a row of checkboxes, that when the screen size is small enough (less than 600px), collapse into columns.
This is fine, but now when I attempt to print this document, the mobile breakpoints activate, and stack up in columns, rather than in rows that I want them in.
Here is the min example of the html I have.
<div id="printCheckbox" flex="100" layout="row" layout-xs="column" layout-wrap>
<div flex="33" flex-xs="100" >
<md-checkbox>1</md-checkbox>
</div>
<div flex="33" flex-xs="100" >
<md-checkbox>2</md-checkbox>
</div>
<div flex="33" flex-xs="100" >
<md-checkbox>3</md-checkbox>
</div>
<div flex="33" flex-xs="100" >
<md-checkbox>4</md-checkbox>
</div>
<div flex="33" flex-xs="100" >
<md-checkbox>5</md-checkbox>
</div>
<div flex="33" flex-xs="100" >
<md-checkbox>6</md-checkbox>
</div>
</div>
I can obviously remove the mobile support to have the print view function correctly, however I am wondering if I can override the flex-xs values in css.
Here is what I am attempting to do in css
#media only print {
#printCheckbox{
[flex-xs="100"] {
// Make them 33?
}
}
}
So is it possible to supply a different value to the flex-xs in css? Or disable the mobile breakpoints completely?
I didn't really do what I wanted to, but I found a workaround myself.
I made my CSS this for the parent container of the checkboxes
#media screen and (max-width: 600px) {
.printCheckBoxContainer{
flex-direction: column;
}
.printCheckBox{
flex-direction: column;
flex-basis: 100%;
}
}
#media only print {
.printCheckBoxContainer{
align-items: center;
flex-wrap: wrap;
flex-direction: row;
}
.printCheckBox{
align-self: center;
flex-basis: 33%;
}
And then changed my HTML to look like
<div class="printCheckBoxContainer" class="verify-identity" flex="100" layout="row" layout-wrap>
<div class="printCheckBox" flex="33">
<md-checkbox></md-checkbox>
</div>
<div class="printCheckBox" flex="33">
<md-checkbox></md-checkbox>
</div>
<div class="printCheckBox" flex="33">
<md-checkbox></md-checkbox>
</div>
<div class="printCheckBox" flex="33">
<md-checkbox></md-checkbox>
</div>
<div class="printCheckBox" flex="33">
<md-checkbox></md-checkbox>
</div>
<div class="printCheckBox" flex="33">
<md-checkbox></md-checkbox>
</div>
</div>
So I kept the default breakpoints, then just specified the flex-basis in css based on the media queries. Basic stuff, but it works!
Unless I get a better answer within a couple of days, I will accept my own answer.
I am new to Angular Material Design so I have some trouble making webapps cross-browser.
Here's my problem
These 3 items are stacked on IE but not on Chrome and Firefox.
And I want them to be exactly like on Chrome/Firefox
Apparently the problem is coming from "layout-align='center center'" because if I just use "layout-align='center'" they're not stacked on IE anymore but they're appearing aligned on the left on every browser.
Here's the HTML:
<div layout="column" layout-align="center center" style="text-align:center;" style="min-height:400px" ng-repeat="(title,score) in results.scoreByCategories">
<h4>{{title}} :</h4>
<div layout="row" layout-xs="column" >
<div flex>
<p id="button-debutant" class="rcorners">Débutant</p>
</div>
<div flex>
<p id="button-intermediaire" class="rcorners">Intermédiaire</p>
</div>
<div flex>
<p id="button-confirme" class="rcorners">Confirmé</p>
</div>
</div>
</div>
Here's my CSS :
.rcorners{
color: grey;
border-radius: 25px;
background-color: #e7e7e7;
padding: 7px;
width: 110px;
height: 20px;
float:left;
margin: 5px 12px
}
Feel free to point out my mistakes! Thanks!
I've found a solution for your problem
You only have to replace this block of code (written by you)
<div layout="row" layout-xs="column" >
<div flex>
<p id="button-debutant" class="rcorners">Débutant</p>
</div>
<div flex>
<p id="button-intermediaire" class="rcorners">Intermédiaire</p>
</div>
<div flex>
<p id="button-confirme" class="rcorners">Confirmé</p>
</div>
</div>
with this one:
<div layout="row" layout-xs="column" layout-align="center center" >
<div>
<p id="button-debutant" class="rcorners">Débutant</p>
</div>
<div >
<p id="button-intermediaire" class="rcorners">Intermédiaire</p>
</div>
<div>
<p id="button-confirme" class="rcorners">Confirmé</p>
</div>
</div>
Basically you will force IE to consider the three button as an unique row, while the layout-align="center center" written before (where there is the ng-repeat) will align the whole portion of page in the center of the page (both vertically and horizontally). I don't why IE requires this little extra work but it works :)
I hope I helped you
I'm trying to center two div Horizontally, and align one at the Middle of the parent container, and the second one at the Bottom of the parent container. I'm using Foundation 6, with the Flexbox version.
Html
<section id="hero">
<div class="row align-middle align-center">
<h1>Welcome</h1>
</div>
<div class="row align-bottom align-center">
<p>Some text</p>
</div>
</section>
Css
#hero {
height: 100vh;
display: flex;
flex-wrap: wrap;
}
The problem is that every div in the flex container (#hero) appear on the same line.
Thank's for helping !
Pretty sure you have to add the class column to the sub element of row like so:
id="hero">
<div class="row align-middle align-center">
<h1 class="column">Welcome</h1>
</div>
<div class="row align-bottom align-center">
<p class="column">Some text</p>
</div>
</section>
I finally found how to align vertically 3 divs using a Flexbox. Foundation wasn't really in the problem.
I made a Js Fiddle for those who have the same question:
.wrapper {
display: flex;
flex-direction: column;
height:90vh;
}
.center {
width: 100%;
flex-grow: 1;
align-items: center;
display:flex;
}
.a {
width: 100%;
}
<div class="wrapper">
<div class="a">Header</div>
<div class="center">Body</div>
<div class="a">Footer</div>
</div>
JSFiddle: https://jsfiddle.net/ek38ff5r/20/
i have code html using angular material library:
<div layout="row" layout-wrap style="background: yellow; ">
<div ng-repeat="pro in Products" >
<md-card class="cardProduct" >
<img ng-src={{pro.Image1}} class="md-card-image imageProduct">
</md-card>
</div>
</div>
it shows: enter image description here
I want it align center, and the fourth image is in the left, not center.
Thank you so much.
Since you are using angular material you can easily do this with flex-box
It will help if there are more images to come
Change your html code as
HTML:
<div layout="row" layout-wrap style="background: yellow; ">
<div class="prod-container" ng-repeat="pro in Products" >
<md-card class="cardProduct" flex="30" >
<img ng-src={{pro.Image1}} class="md-card-image imageProduct">
</md-card>
</div>
</div>
CSS:
.prod-container{
display: flex;
flex-wrap: wrap;
justify-contents: flex-start;
}
you can also give css for the cards by removing flex=30 from the html code
<md-card class="cardProduct">
and the CSS will be
.cardProduct{
min-width: 30%;
flex: 1;
}
Make the parent container (layout="row") have the css property:
text-align: center;
And the ng-repeated containers have the property:
display: inline-block;
and in case you have any text for those containers might want a:
text-align: left;
just make the text-align property of the parent of the images to center.
text-align:center;
This is my page layout.
<div layout="column" layout-fill ng-controller="MainCtrl as mc">
<header>
<md-toolbar md-scroll-shrink>
<div layout="row" layout-align="center center" flex>
HEADER INFO
</div>
</md-toolbar>
</header>
<main>
<div ui-view>
</div>
</main>
<footer>
<md-toolbar class="md-scroll-shrink">
<div layout="row" layout-align="center center" flex>
FOOTER INFO
</div>
</md-toolbar>
</footer>
</div>
Currently footer is displaying just after main contents. depending upon the size of main either footer displaying somewhere middle of screen or goes below page height.
I want footer to be fixed always bottom of screen. and depending on the size of main, there should be a scroll in main content.
can anyone help me on this?
You just need to add <main flex> and css overflow-y: auto;. See this plunker: http://plnkr.co/edit/GQjcrqhwB2T5ohZwC5EL?p=preview
Place a mat-toolbar at the bottom of the page and use the following CSS spacer to center the text like this.:
<mat-toolbar color='primary'>
<span class='spacer'></span>
<h3>© Copyright Angular Apps 2017.</h3>
<span class='spacer'></span>
</mat-toolbar>
Using this CSS:
.spacer {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
To get this: