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:
Related
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 am using ui-view in md-content to display a list but its getting overflow i want list in md-content should be scrollable
here is my index.html
<div layout-lt-lg="row" class="screen-bg">
<div flex-lt-lg="100">
<!--header-->
<md-toolbar class="app-bar-bg" style="background-color: #9013fe;">
<div class="status-bar-bg"></div>
<div class="md-toolbar-tools">
<md-button class="md-icon-button" aria-label="Settings">
<!--<md-icon md-svg-icon="app/images/back1.svg"></md-icon>-->
</md-button>
<h2>
<span></span>
</h2>
<span flex=""></span>
<md-button class="md-icon-button" aria-label="Favorite">
<!--<md-icon md-svg-icon="app/images/a.svg"></md-icon>-->
</md-button>
</div>
</md-toolbar>
<!--content-->
<div>
<md-content>
<ui-view></ui-view>
</md-content>
</div>
</div>
</div>
here is my template
<md-list flex>
<md-list-item class="md-3-line" ng-repeat="broadCast in broadCasts">
<div class="md-list-item-text" layout="column" >
<h3>{{broadCast.name}}</h3>
<h3>{{broadCast.phone}}</h3>
</div>
</md-list-item>
</md-list>
To make the list scrollable:
Add a class to md-list.
<md-list class="make-scrollable" flex>
<md-list-item class="md-3-line" ng-repeat="broadCast in broadCasts">
<div class="md-list-item-text" layout="column">
<h3>{{broadCast.name}}</h3>
<h3>{{broadCast.phone}}</h3>
</div>
</md-list-item>
</md-list>
Style the md-list in your css file like so:
md-list.make-scrollable {
height: 600px; //Or any other height you wish
overflow-y: scroll;
}
That should make the overflowing content scrollable
You are using too many unnecessary container elements.
<div layout-lt-lg="row" flex-lt-lg="100" class="screen-bg">
<!--header-->
<md-toolbar class="app-bar-bg" style="background-color: #9013fe;">
<div class="status-bar-bg"></div> //desired controller buttons
<div class="md-toolbar-tools"></div> //desired controller buttons
</md-toolbar>
<!--content-->
<md-content flex ui-view>
</md-content>
</div>
Here is a working example. There are some changes but basic structure is almost same.
I have a paper-dialog with a fixed size and I want to align a <div> containing a button at the end. The paper-dialog contains a header, paper-tabs that controls the iron-pages below. The iron-pages contain the button.
<style is="custom-style">
paper-dialog {
width: 1000px;
height: 585px;
}
</style>
<paper-dialog>
<header>Header</header>
<paper-tabs selected="{{selected}}>
<paper-tab> tab1</paper-tab>
<paper-tab> tab2</paper-tab>
</paper-tabs>
<iron-pages selected="{{selected}}">
<div id="tab1" container class="container layout vertical">
<div> Text section tab1</div>
<div class="flex></div>
<div>
<paper-button id="toBeAlignedAtTheBottom">next!</paper-button>
</div>
</div>
<div id="tab2" container class="container layout vertical">
<div> Text section tab2</div>
<div class="flex></div>
<div>
<paper-button id="toBeAlignedAtTheBottom">next!</paper-button>
</div>
</div>
</iron-pages>
</paper-dialog>
But I can never get the buttons to be aligned at the end of the paper-dialog. Only by using a fixed size for the container classes inside the iron-pages. The length of the text section in tab1 and tab2 differ greatly. That is why I want to modify how the buttons are aligned and are positioned at the button. How can I do this without using a fixed size?
I solved my issue. The problem was that every parent class of the buttons have to use all the remaining space. So add flex to every parent class. Secondly add end to position the buttons on the bottom.
<style is="custom-style">
paper-dialog {
width: 1000px;
height: 585px;
}
</style>
<paper-dialog class="flex layout vertical">
<header>Header</header>
<paper-tabs selected="{{selected}}>
<paper-tab> tab1</paper-tab>
<paper-tab> tab2</paper-tab>
</paper-tabs>
<iron-pages class="flex layout vertical" selected="{{selected}}">
<div id="tab1" container class="container flex layout vertical">
<div> Text section tab1</div>
<div class="flex></div>
<div class="layout horizontal end">
<paper-button id="toBeAlignedAtTheBottom">next!</paper-button>
</div>
</div>
<div id="tab2" container class="container layout vertical">
<div> Text section tab2</div>
<div class="flex></div>
<div>
<paper-button id="toBeAlignedAtTheBottom">next!</paper-button>
</div>
</div>
</iron-pages>
</paper-dialog>
See also: Fill page with iron-pages element
Body is currently set to layout="column" I have a header row and a content row inside it. The header row works just fine, but the content row is getting set to no height, or I set it to flex but either way it is overlapping the header row and I want to be able to set the inner divs to be 100% of the remaining height.
<body layout="column" ng-style="bodyStyle" ng-controller="AppCtrl">
<div class="header" layout="row">
<div class="menuButton">
<ng-md-icon icon="menu"></ng-md-icon>
<md-tooltip>Menu</md-tooltip>
</div>
</div>
<div class="content" layout="row" style="background-color: black">
<p>Random text asdf
<div class="sidenav" layout="column">
<div>
<ng-md-icon icon="people"></ng-md-icon>
<md-tooltip>Contacts</md-tooltip>
</div>
<div class="active">
<ng-md-icon icon="message"></ng-md-icon>
<md-tooltip>Conversations</md-tooltip>
</div>
<div>
<ng-md-icon icon="phone"></ng-md-icon>
<md-tooltip>Phone Calls</md-tooltip>
</div>
<div>
<ng-md-icon icon="more_horiz"></ng-md-icon>
<md-tooltip>More</md-tooltip>
</div>
</div>
<div class="likeThis!">I want to be 100% of the remaining height</div>
</div>
</body>
u can use height:calc
e.g.
.full-height {
height: calc(100%)
}
you can also use it like
.full-height {
height: calc(100% - 20px)
}
assuming 20px is height of your remaining stuff which is at the top.
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;
}