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.
Related
I'm developing a AngularJS (v1.5) application using Angular Material and I'm stuck with the implementation of the layout. This is basically a fixed-height header, followed by variable-height content, followed by a fixed-height footer. The complete page should scroll (including the header) and the footer should be pushed to the bottom of the window when there is not enough content to fill the space between header and footer.
I've created a pen with the code I've got so far (replaced components with div's and introduced all the intermediate div's inserted by Angular) but when I decrease the height of the window, the content is collapsed to a height of zero instead of maintaining the height of the content and showing a scrollbar.
The problem is probably with the .main CSS class but I cannot figure out what I should be putting there.
The HTML:
<body ng-app="app">
<!-- ui-view div -->
<div layout="column" layout-fill>
<!-- component div -->
<div layout-fill>
<!-- my own div around the page content -->
<div layout="column" layout-fill>
<!-- header component div -->
<div flex="none">
<header flex="none">
<md-toolbar>
<div class="container">
<div class="md-toolbar-tools" layout="row" layout-align="center center">
<div flex></div>
<h1>HEADER</h1>
<div flex></div>
</div>
</div>
</md-toolbar>
</header>
</div>
<!-- content div -->
<div flex class="container main">
<h2>CONTENT</h2>
</div>
<!-- footer component div -->
<div flex="none">
<footer flex="none">
<md-toolbar>
<div class="container">
<div class="md-toolbar-tools" layout="row" layout-align="center center">
<div flex></div>
<h1>FOOTER</h1>
<div flex></div>
</div>
</div>
</md-toolbar>
</footer>
</div>
</div>
</div>
</div>
</body>
The CSS:
header, footer {
md-toolbar {
height: 100px;
min-height: 100px;
background-color: #C8C8C8;
.md-toolbar-tools {
height: 100px;
min-height: 100px;
}
}
}
.container {
width: 600px;
margin: 0 auto;
}
.main {
background-color: #E8E8E8;
}
And the JavaScript:
angular.module("app", ['ngMaterial']);
The pen: http://codepen.io/kdbruin/pen/ZLwmvW
You can use flex="grow" with min-height on container to achieve the desired result.
Here is the Code
<div layout="column" flex="grow" style='background-color:green'>
<md-toolbar>
<div flex="10">
<div class="md-toolbar-tools" layout="row" layout-align="center center">
<div flex></div>
<h1>HEADER</h1>
<div flex></div>
</div>
</div>
</md-toolbar>
<div flex="grow" style='background-color:pink; min-height:1000px'>
<div ng-repeat="no in [0,1,2,3,4,5,6,7,8,9]">
<h2>CONTENT - {{no}}</h2>
</div>
</div>
<div flex="10" style='background-color:blue'>
<div flex></div>
<h1>FOOTER</h1>
<div flex></div>
</div>
Here is the working Codepen.
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 am currently exploring Angular Material. But I wondered how I could place several cards next to each other. I do this with an ng-repeat. But what I want is that a maximal amount of three can be next to each other so that the 4th card starts in a new row dynamically.
Any ideas how to build this without custom css?
<md-content layout-xs="column" layout="row">
<div flex-xs flex-gt-xs="120" layout="column" ng-repeat="item in items">
<md-card> .... </md-card>
</div>
</md-content>
You can do it using flex:
<md-content layout-xs="column" layout="row" flex>
<md-card ng-repeat="item in items" flex="33"> .... </md-card>
</md-content>
And adding the following css property:
md-content{
flex-wrap: wrap;
}
EDIT:
As pointed out by #juleee, it could also be achieved by adding the layout-wrap directive:
<md-content layout-xs="column" layout="row" flex layout-wrap>
Which would automatically add the above css to md-content.
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 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);
}