I am trying to stretch the content area of the page to 100%
It works fine but if i add
layout="column"
to body tag it breakes
<body layout="column">
<md-toolbar></md-toolbar>
<ui-view></ui-view>
...
</body>
and page
<div layout-fill layout="row">
<md-content class="red" flex layout-align="center center" layout="column">
<md-card>100% height</md-card>
</md-content>
</div>
http://plnkr.co/edit/H9yVGWrkxeO8Of1NROvY?p=preview
I can't to remove layout="column" because i need page without scroll
Any ideas?
Set the proper height of the ui-view.
You need to remove the height of the toolbar form the ui-view.
ui-view > div.layout-fill {
min-height: calc(100% - 64px);
}
Related
Trying to get an angular material sticky footer working with the latest version (1.1.4). This looks like it worked in older versions (am 0.8.3), but now the content seems to slide under the footer. I have tried a different method, but that doesn't maintain the flex on the content, so I wont be able to center content vertically as I want to.
<div ng-app="materialApp" ng-controller="AppCtrl" layout="column" layout-fill>
<header>
<md-toolbar class='md-medium-tall'>
<div class="md-toolbar-tools">
<h1>Fixed to Top</h1>
<span flex></span>
<md-button class="md-raised" ng-click="toggleContent(!displayContent)">toggle content</md-button>
</div>
</md-toolbar>
</header>
<main class='md-padding' layout="row" flex>
<div flex>
<md-card ng-if="displayContent" ng-repeat="card in cards">
{{$index}}
{{card.title}}
{{card.text}}
</md-card>
</div>
</main>
<footer>
<div layout="row" layout-align="center center">
<h2>My Awesome Footer</h2>
</div>
</footer>
</div>
https://codepen.io/anon/pen/mmqQzG
NOTE: I want the scrollbar to be on the entire body (not just on content), and the footer should be sticky only when content is not tall enough to push it to the bottom of the page. Otherwise, it should fall under the content (much like stackoverflow.com does).
replace main tag with md-content directive, which is more suited for scroll able content.
updated codepen
regards
<md-content flex class="md-padding page-content">
<div ui-view flex layout="column">
<div class="center" layout="row" flex>
<md-content layout="column" flex="30">
<md-list-item ng-repeat="entity in vm.entities">
<md-checkbox ng-model="entity.selected"></md-checkbox>
<p>{{entity.info}}</p>
<md-icon class="md-secondary"
ng-click="doSecondaryAction($event)" aria-label="Chat">message</md-icon>
</md-list-item>
</md-content>
<md-divider></md-divider>
<md-content layout="column" flex="70">
Details here!
</md-content>
</div>
</div>
</md-content>
In my code above, the outermost md-content occupies the complete page; however with the ui-view gived column layout and flex class, I expected it to occupy the complete height of the page, however it occupies the height consumed by the content only.
Can you please help with the error in the code, so ui-view can occupy the complete page?
Here you go - CodePen
You need to utilise layout-fill. From the docs
In order for this to work an upper element must occupy the full screen. In the above example it is <body>.
Markup
<div ng-controller="AppCtrl as vm" ng-cloak="" ng-app="MyApp" layout-fill>
<md-content layout-fill flex class="md-padding page-content">
<div ui-view flex layout="column" layout-fill>
<div class="center" layout="row" flex>
<md-content id="list" layout="column" flex="30">
<md-list-item ng-repeat="entity in vm.entities" flex="none">
<md-checkbox ng-model="entity.selected"></md-checkbox>
<p>{{entity.info}}</p>
<md-icon class="md-secondary"
ng-click="doSecondaryAction($event)" aria-label="Chat">message</md-icon>
</md-list-item>
</md-content>
<md-divider></md-divider>
<md-content id="details" layout="column" flex="70">
Details here!
</md-content>
</div>
</div>
</md-content>
</div>
CSS
.page-content {
background: yellow
}
#list {
overflow-y: auto;
overflow-x: hidden;
}
I am trying to create a dashboard where I want a chart made using highcharts and an action box in a row and in turn two buttons in action box in column. I want the action box to wrap the content and chart to take leftover space. But I am not getting expected result. The chart is taking more width than its parent div i.e. its container. Here is my HTML code.
<md-content flex layout-padding>
<md-card layout="row" layout-wrap>
<div flex layout-padding>
<highchart id="summary-chart" config="dashboard.chartConfig"></highchart>
</div>
<div layout-align="start center" layout="column" layout-padding>
<div layout-align="start center" layout-fill>
<img src="../../../assets/images/computer.png">
<label layout-fill>Computer</label>
</div>
</div>
</md-card>
</md-content>
Here is something that I expect:
This is what I am getting as result:
Note: The icon is hidden by the chart
To keep your chart from pushing outside its boundaries while maintaining your responsive layout, I would suggest the following.
First, give the flex div element that contains your Highcharts visualization its own ID (in this example, chartContainer):
<md-content flex layout-padding>
<md-card layout="row" layout-wrap>
<div flex layout-padding id="chartContainer">
<highchart id="summary-chart" config="dashboard.chartConfig"></highchart>
</div>
<div layout-align="start center" layout="column" layout-padding>
<div layout-align="start center" layout-fill>
<img src="../../../assets/images/computer.png">
<label layout-fill>Computer</label>
</div>
</div>
</md-card>
</md-content>
Next, whenever chartContainer div is resized, set the size of the highchart element to match the width and height of that div:
$(".chartContainer").resize(function () {
$('#summary-chart').highcharts().setSize(
$(".chartContainer").width(), // new width of the containing div
$(".chartContainer").height(), // new height of the containing div
false // don't animate the chart itself changing
);
});
Please note that I'm making an assumption that the highcharts element can be passed values using setSize() as with standard div elements.
Let me know whether this is helpful for you.
Add this code in your css file
.highcharts-container {
width:100% !important;
height:100% !important;
}
I'm displaying dynamic content by looping with <md-card> and <image> tags. My output is not responsive on tablet or mobile screens, showing a scrollbar instead of the next line. What's wrong with my code and how can I make it responsive?
<p>Show Menus</p>
<div layout="row" layout-margin >
<md-card ng-repeat="menu in sampleMenus">
<md-card>
<img src="http://placehold.it/350x150" class="md-card-image" alt="image caption"/>
<md-card-content >
<h2>{{menu.displayName}}</h2>
<p>{{menu.type}}</p>
</md-card-content>
</md-card >
</md-card>
</div>
Screenshots:
This may help your cause.
http://codepen.io/sstorie/pen/myJWxQ
The key is those two classes added to the parent and the img in each card
.parent {
overflow: hidden;
}
.card img {
width: 100%;
height: auto;
}
You can use the flex(width for row, height for column) attribute to declare md-card size and layout-wrap on the parent container. Layout-align might help your cause as well.
<div layout="row" layout-margin layout-wrap layout-align="center center">
<md-card flex="25"> //25% of parent
//content
</md-card>
</div>
Check out the documentation for more options.
I'm trying to accomplish a nested scrollable layout which has a left sidebar and a right container that is divided horizontally. Previously I've used ui-layout which is still quite new (and buggy).
Given a Codepen
<body ng-controller="AppCtrl" layout="row" layout-fill>
<div flex="33" class="blue">left</div>
<div flex="66" class="green" layout-fill>
<div layout="column" layout-align="start start">
<div flex="25">above</div>
<div flex="75">below</div>
</div>
</div>
</body>
why am I unable to see the nested column layout properly? I would expect above to horizontally take 25% of the right-hand side of the page and below the rest 75%. What am I doing wrong, or is this even possible using the layout directive?
Change
<div flex="66" class="green" layout-fill>
<div layout="column" layout-align="start start">
<div flex="25">above</div>
<div flex="75">below</div>
</div>
</div>
to
<div flex="66" layout="column" layout-align="start start" layout-fill class="green" >
<div flex="25">above</div>
<div flex="75">below</div>
</div>
The reason your original code did not work is because layout="column" does not automatically fill height to 100% of it's containing element.