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.
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
I am using angular-material webkit and I have issue with height of the container that is always setting depending on the device. The problem I'm having is with child elements 'leaving' middle container and rendering on the footer area. On the image, number 1 shows situation when content of the green area is small enough to fit device height. Number 2 shows my problem and 3 is my ideal layout:
My layout looks like this:
<body layout="column">
<div> header </div>
<div layout="row" flex">
<md-sidenav md-is-locked-open="true" flex="20"></md-sidenav>
<div layout="column" flex ui-view></div>
<md-sidenav class="md-sidenav-right" md-is-locked-open="true" flex="20"></md-sidenav>
</div>
<div class=footer"></div>
</body>
I can't find solution on the angular-material docs - maybe I don't get some of the ideas but it's the second day I am trying to implement that layout and I'm still failing.
I think this is the best you can do with flex - CodePen
Markup
<div id="all" ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout="column" flex>
<div style="background:red; height:100px"></div>
<div layout="row" flex="90">
<div style="background:blue" flex="10"></div>
<div layout="column" flex="80">
<div >
<!-- content -->
</div>
<div style="background:yellow; height:100px"></div>
</div>
<div style="background:blue" flex="10"></div>
</div>
</div>
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 got following markup
<div layout="column" layout-align="space-around center" ng-cloak>
<div flex="85">
<div layout="row" layout-align="space-around center">
<div flex>
<md-button class="md-fab md-warn" ui-sref="settings">
<ng-md-icon icon="settings" style="fill:white"></ng-md-icon>
</md-button>
<span class="md-subhead">Configuraciones</span>
</div>
<div flex>
<md-button class="md-fab md-primary" aria-label="Eat cake" ng-click="watch()">
<ng-md-icon icon="play_arrow" style="fill:white"></ng-md-icon>
</md-button>
</div>
</div>
</div>
<div flex="15">
<div layout="row" layout-align="space-around center">
<div flex>
<img src="public/img/buap-logo.png" class="img-rounded img-responsive center-block finalcut-img-small" style=""/>
</div>
<div flex>
<img src="public/img/lke-logo.jpg" class="img-rounded img-responsive center-block finalcut-img-small" style=""/>
</div>
</div>
</div>
</div>
Producing following:
However I need the buttons div to take 85% of its parent container height, that's why I've added flex="85" attribute, while the div with images should be 15% of the height.
I'm not sure how I should set their properties to get it like that. According to docs that should make it work.
Flex only works with width. There's no way to use flex to tell the height of a div.
The property layout="column" only means the divs are showing from top to bottom, and row from left to right.
From material.angular.org
column: Items arranged vertically. max-width = 100% and max-height is the height of the items in the container.
You can use in the img tag a css style like 'height:15vh' and give it a try
I have an issue with AMD layout at the smaller resolutions. At the small resolutions Widget1 doesn't fill entire div. I tried with the layout-fill atribute, but doesn't work.
Please take a look at the plunker.
<div layout="row" layout-md="column" layout-sm="column" layout-margin="">
<section class="widget md-whiteframe-z1 ng-isolate-scope md-cyan-theme" ng-class="{'widget-overlay-title': overlayTitle}" ng-attr-layout="{{widgetLayout}}" content-padding="" flex="66">
<div class="panel-heading">Widget1<span flex=""></span></div>
</section>
<section class="widget md-whiteframe-z1 ng-isolate-scope md-cyan-theme" ng-class="{'widget-overlay-title': overlayTitle}" ng-attr-layout="{{widgetLayout}}" content-padding="" flex="32">
<div class="panel-heading">Widget2<span flex=""></span></div>
</section>
</div>