I am trying to use md-grid-tile of angular material.The Issue I am facing is content of md-grid-tile is aligned center.How to make to work it from Start
<md-content layout-padding>
<md-grid-list md-cols="6"
md-row-height-gt-md="1:1" md-row-height="4:3" md-gutter-gt-md="16px"
md-gutter-gt-sm="8px" md-gutter="4px">
<md-grid-tile
ng-repeat="room in floorDetails.roomDetails"
ng-style="{'background': '#f2f2f2'}"
md-colspan-gt-sm="3"
md-rowspan-gt-sm="2">
<div layout="row" layout-align="center center">
<b >Room1</b>
</div>
<div class='md-padding' layout="row" layout-wrap>
<md-card class="md-card" ng-repeat="bed in room.bedIds">
<md-card-content>
</md-card-content>
</md-card>
</div>
</div>
</md-grid-tile>
</md-grid-list>
Current snap
Desired snap
Try to provide a codepen/plunkr with an example next time, people are more inclined to help you if they have sample code to play around with.
You should read up on angular-material layout. You are mainly missing a <div layout="column" layout-fill> container inside of your md-grid-tile. The layout-fill makes the container fill the whole tile.
You can then adjust the size of your cards with fixed css sizes or flex them. The example flexes them horizontally which may not be desired.
codepen
Related
I trying to create a responsive list of cards that would have a minimum width, fill all available space (1, 2, 3 pieces in line according to browser size).
So far I have code what does that:
<div class='md-padding' layout="row" layout-wrap>
<md-card style="min-width: 460px;" ng-repeat="teacher in tc.teachers" flex>
<md-card-title>
<md-card-title-text>
<span class="md-headline" style="padding-bottom: 10px;">{{ teacher.name }}</span>
... other elements ....
</md-card-title-text>
<md-card-title-media>
<div class="md-media-lg card-media" style="height: 228px;">
<img ng-if="teacher.image" ng-src="{{ tc.getImage( teacher ) }}" class="md-card-image" >
</div>
</md-card-title-media>
</md-card-title>
</md-card>
</div>
What does trick is in line #2 style="min-width: 460px;" and flex
However, problem what I facing is that last element is also 'flexed' to the whole width what looks ugly when for example there are 3 cards in a row and the last row has only 1 element...
How I can adjust this last element to be 1/3 in this case and also be responsive to further size changes?
I am using Angular 1.6.1 with angular-material.
To achieve this, you can use Angular Material md-grid-list and md-grid-tile (you can check the doc here and here), you can specify how many columns you want for each screen size (xs, sm, md, lg, etc.) the height of columns and a few other things.
And if there is a last row with, by example, only one element, this element will not be larger than the others.
You can use it like this :
<md-grid-list md-cols-xs="1" md-cols-sm="2" md-cols-md="3" md-cols-lg="4" md-row-height="100px">
<md-grid-tile ng-repeat="teacher in tc.teachers">
<!-- width : 100% -> to make the cards gets the full width -->
<md-card style="width:100%;">
<md-card-title>
<md-card-title-text>
<span class="md-headline">{{ teacher.name }}</span>
... other elements ....
</md-card-title-text>
</md-card-title>
</md-card>
</md-grid-tile>
</md-grid-list>
Here is a working example.
I am simply trying to get my main view pages to scroll but can not seem to achieve this without setting the height of the div to a specific amount, even whilst using md-content.
The container div that I am using to place all the views is nested two levels deep using ui-view.
The root state is as follows:
<md-toolbar layout="row" layout-align="center center">
<h3>Site Title</h3>
</md-toolbar>
<div layout="column" flex id="content" ui-view></div>
Then the next view is used to display a toolbar and a sidenav that is present across all child states/views:
<div layout="row" flex>
<md-sidenav>
<md-list layout="column" flex>
//SCROLLABLE SIDENAV WORKS PERFECTLY
//NAVIGATION ITEMS LIVE HERE
</md-list>
</md-sidenav>
<div layout="column" flex>
<md-toolbar layout="row" layout-align="center center">
<h2>Subheading</h2>
</md-toolbar>
<div class="md-padding" ui-view flex>
//THIS IS WHERE THE CHILD VIEWS GO
</div>
</div>
I have tried adding a class to both this final ui-view and also to a div but can only achieve scrolling with a specific height (which obviously doesn't work across devices) and by changing the position which causes problems given that there are two toolbars above it (and also with FAB's that float on top).
md-content doesn't work properly, I'm not sure why something so simple is so difficult in this situation. I am redesigning my webapp which has always used Bootstrap so please forgive my lack of CSS skills as it was already layed out when I received it.
Thank you for your help.
The Parent class which contains the following code must have layout="column" and use md-content wherever you use ui-view.
<md-toolbar layout="row" layout-align="center center">
<h3>Site Title</h3>
</md-toolbar>
<md-content layout="column" flex id="content" ui-view>
</md-content>
Similarly you should use md-content in following child elements to get the desired result.
Here is the Codepen.
I need to design a parent container, which has fixed length child list items (150 px).
1) when the parent container is resized the children list Items should flow from left to right and should break into New Row & the space between the child list items should be evenly distributed.
pls tell me how to achieve this using angular material. pls see the below picture for my requirement.
I tried to implement this.. using the following code.
<div layout-padding layout-fill layout="row" layout-wrap layout-align="space-around start">
<div ng-repeat="student in students"
style="width: 150px; height: 52px;line-height: 52px;min-height: 52px;max-height: 52px;
margin:8px;padding: 0px; border: solid 1px"
draggable="true">
{{student.name}}
</div>
</div>
but this is what I've got
Thanks to Mr. #MikeHarrison... I've edited my code like below & the result is exactly what I've wanted.!
<div class="md-padding" layout="row" layout-fill layout-wrap layout-align="start start">
<md-list-item ng-repeat="student in students" draggable="true" flex-xs="100" flex-sm="50" flex-md="33"
flex-gt-md="25" class="md-3-line" ng-click="alert('hi')">
<img src="../../_resources/images/boy_real.jpg" class="md-avatar"/>
<div class="md-list-item-text">
<h3> {{student.name}} </h3>
<h4> {{student.roll}} </h4>
<p> {{student.desc + ' guy'}} </p>
</div>
<md-divider md-inset></md-divider>
</md-list-item>
</div>
and the result in a browser is
and the result in a mobile is
That will be a totally new control, you will need to create your own using "pieces" of angular material. For example, you can create the list items out of the angular material md-button, host all the buttons inside a md-content if you want scrolling and use the md-layout to align your items. Obviously the most important part will be the styles for your control to have the look and feel of angular material.
The point here is that you will need to create your custom control. I recommend creating your own control module and add the necessary directives, services for you control to work.
The idea is to make sidebar stay at the top when screen size is smaller than 1200px or so. When screen size is bigger than 1200px - affix sidebar should be fixed as user scrolls down a page. At the moment affix sidebar <div class="side-tool-panel" layout="column"> interferes with neighbour container <div class="content-wrapper" layout="row" layout-wrap>. How to make <div class="content-wrapper" layout="row" layout-wrap> to shift automatically and make up the room for <div class="side-tool-panel" layout="column">?
codepen
You can use the layout system of Angular Material to do that. Try this:
<div ng-app="MyApp" ng-controller="AppCtrl" class="dialogdemoBasicUsage" id="popupContainer" ng-cloak="" layout="column" layout-gt-md="row" layout-wrap>
<div class="side-tool-panel" layout="column" flex-gt-md="15"></div>
<div class="content-wrapper" layout="row" layout-wrap flex-gt-md="85"></div>
</div>
In this code I use layout-gt-md which width >= 1280px. Then, I use flex-gt-md in 2 children div. Here
Hope this help.
I've been trying to work through this for the last few hours and just cannot get this working. I am trying to create 3 columns, let's call them columns A, B, C.
Column A and B I would like to scroll together as one unit and take up the full height of the site. Column C I would like to scroll independently and not scroll when column A and B are scrolled.
Unfortunately, I cannot create a setup that meets all of those conditions and maintains full height.
In this plnkr below you can see that the green and gray sections should be full height but are not. I feel like it's close but the last bit is driving me nuts!
http://plnkr.co/edit/jPpZhFLP3e1fgNvDLFQD?p=preview
<body layout="row" style="min-height:100%" >
<md-content flex layout="row" layout-fill>
<div class="side-a" flex layout-fill>
<p>lots of content that requires scrolling...</p>
</div>
<div class="middle" flex layout-fill>
<p>lots of content that requires scrolling...</p>
</div>
</md-content>
<md-sidenav layout-fill flex layout="column" class="md-sidenav-left md-whiteframe-z2 side-b" md-component-id="left>
<p>lots of content that requires scrolling...</p>
</md-sidenav>
</body>
Thanks. Any help would be much appreciated.
One solution is to wrap your column content in another div inside of your columns and use relative/absolute positioning. i.e.
<md-content flex layout="row" layout-fill>
<div flex layout-fill style="position: relative;">
<div class="side-a" style="position: absolute; width: 100%;">
<p>lots of content that requires scrolling...</p>
</div>
</div>
<div flex layout-fill style="position: relative;">
<div class="middle" style="position: absolute; width: 100%;">
<p>lots of content that requires scrolling...</p>
</div>
</div>
</md-content>
Note that the classes have moved from the column itself to the inner div.
This works because the absolute positioned div will expand to fit any content within it. The downside to this method is that if one column is shorter than the other then the shorter column wont span the remaining height.