I am trying to understand Angular Material layout. I have a section of HTML that is always floated to the right and it contains several lines in a column. That section is rendered as expected when using a smaller device. However, when the device is a small hand-held, in addition to adjusting the right-floating section, I don't want to include some of the lines in that column.
For example, on a large screen device the layout would be:
left-panel middle-panel right-panel-line 1
right-panel-line 2
right-panel-line 3
and then on a small screen device the layout would be:
left-panel
middle-panel
right-panel-line 1
where the 2nd and 3rd lines in the right-floating panel is not displayed.
Question: how do I conditional use the Angular Material layout directives to do this?
Thanks,
-Andres
Available Plunker here
As you can see in angular-material layout extra options documentation, you can conditionally show and hide elements depending on the screen size.
Code for reference, see plunker for the complete details:
<div layout="row" layout-xs="column">
<div flex>left-panel</div>
<div flex>middle-panel</div>
<div layout="column" flex>
<div flex>right-panel-line 1</div>
<div flex hide-xs>right-panel-line 2</div>
<div flex hide-xs>right-panel-line 3</div>
</div>
</div>
Hope it helps.
Here you go - CodePen
Markup
<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout-fill layout-gt-xs="row" layout-xs="column">
<div style="background:red" flex></div>
<div style="background:green" flex></div>
<div flex layout="column">
<div style="background:purple" flex></div>
<div style="background:yellow" flex hide-xs></div>
<div style="background:cyan" flex hide-xs></div>
</div>
</div>
The trick is to use layout and hide depending on screen size.
https://material.angularjs.org/latest/layout/container
https://material.angularjs.org/latest/layout/options
Related
I have a very simple set up in place, that looks like this:
<div class="row">
<div id="whoarewe" class="offset-2 col-lg-4 col-md-4 col-xs-12 col-sm-12"></div>
<div id="whatwedo" class="col-lg-4 col-md-4 cold-sm-12 col-xs12>
</div>
</div>
The thing is, in responsive mode, the id #whoarewe still has the 2 column offset, therefore is not lined up vertically with #whatwedo. Is there any way I can do this with simply a media query? or is there a bootstrap property that would take care of it in col-xs and col-sm?
I tried to set col-lg-offset-2 and col-sm-offset-0 but this didn't work :(
Thanks.
I came up with a solution that works in my case, basically using a row property called justify-content-around like so:
<div class="row justify-content-around">
<div class="col-lg-4"></div>
<div class="col-log-4></div>
</div>
<div class="row">
<div id="whoarewe" class="col-md-4 offset-md-2"></div>
<div id="whatwedo" class="col-md-4"></div>
</div>
Refer to the documentation for correct offset classes:
https://getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns
Otherwise you can set the column width and do some flex magic by justifying content as per your need
https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content
I have the following code snippet:
<div ng-hide="loading" ng-repeat="prov in providers">
<div data-toggle="collapse" style="position:relative;font-weight:bold;" data-target="#collapse-{{$index}}">{{prov.name}}
<div id="collapse-{{$index}}" class="collapse">
<div ng-repeat= "p in prov.subnets">
<div class="col-sm-7 col-md-7" style="font-weight:normal;font-size:90%">
{{p.zone}}
</div>
<div class="col-sm-5 col-md-5"><progress-bar></progress-bar></div>
</div>
</div>
</div>
</div>
I am attempting to make all the "p in prov.subnets" collapse into the relevant "prov.name". As you can see I have nested NG-repeats. If I run my code, it does collapse correctly the first time. However, If I expand them out and try and collapse them again It doesn't collapse and kind of "glitchily" shows a collapse animation.
I have used element inspector and it seems like $index is working correctly to name the divs. Has anyone any other suggestions?
I have this code , here when screen size is more than small layout-align is working well but when it is smaller than Small layout align is not working
<div layout-gt-sm="row" layout-lt-sm="column" flex layout-align="space-around center">
<!-- main content like jokes and news will go here -->
<div flex-gt-sm="55" flex="80">
<md-card class="md-whiteframe-5dp">
hello</md-card>
</div>
<!-- todo and upcoming event will go here -->
<div flex-gt-sm="35" flex="80">
<div>
<ng-include src="'templates/dashboard/todo.html'"></ng-include>
</div>
<div>
<ng-include src="'templates/dashboard/todo.html'"></ng-include>
</div>
</div>
</div>
thanks
Angular Material no longer offers the layout-lt-* directives. Instead, you should just do:
<div layout="column" layout-gt-sm="row">
This is likely causing your layout align directives to not work because they do not currently have a parent layout in your code.
You can read a bit more here: https://material.angularjs.org/HEAD/layout/container
I have an strange issue with displaying graphs in AMD Layout.
There are two widgets in which I've defined graphs and here is how it looks like - you can see that graphs in widgets go out of their area
I've tried reproduce this bug in plunker and there is nothing wrong :/
When I make a small change in browser (for example, I move the edge of the browser), graphs return to the right place -> http://recordit.co/mRmNAjH840
<div layout="row" ng-controller="GraphCtrl" 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-gt-lg="66" flex-gt-md="66">
<div class="panel-heading">Widget1<span flex=""></span>
</div>
<div class="panel-body">
<div id="chart1"></div>
</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-gt-lg="32" flex-gt-md="32">
<div class="panel-heading">Widget2<span flex=""></span>
</div>
<div class="panel-body">
<div id="c3_combined"></div>
</div>
</section>
</div>
I'm not sure if this is related to your problem, but on IE, I have to add this CSS property manually :
svg { overflow: hidden; }
I'm looking for a Angular Carousel there is working with Bootstrap divs
I want it to shift between Divs, and I get the next div in center when clicking next or previous.
Bootstrap exsampel til wrap with carousel:
<div class="row">
<!-- Carousel start -->
<div class="col-md-1 col-sm-6">
<div class="box box-lg br-black animated">
<div class="box-content box-default">
Functionality 1
</div>
</div>
</div>
<div class="col-md-8 col-sm-6">
<div class="box box-lg br-black animated">
<div class="box-content box-default">
Functionality 2
</div>
</div>
</div>
<div class="col-md-1 col-sm-6">
<div class="box box-lg br-black animated">
<div class="box-content box-default">
Functionality 3
</div>
</div>
</div>
<!-- Carousel end --></div>
What possibilities do I have?
your question is a little confused to me. I understood your question but the code show something different. I will try to answer you the question with several alternatives. If you could be more specific with your problem I will help you quickly.
First, there are several carousel for AngularJS. There are single libraries that creates carousel, and others like ui-bootstrap(angular-ui) and AngularStrap that fit much better with Twitter Bootstrap. If you want to use AngularJS with TB, I recommend you ui-bootstrap. I have worked several times with the library and never let me down.
So, creating the carousel with ui-bootstrap we have several alternatives. First, to place the content of your divs in the center you have not use the grid system obligatory. You can use a single row and center the elements with text-align, margin:0 auto, flex model or others techniques. In this case check the next plunk:
http://plnkr.co/edit/XmzaJx5mXddLQ4S1k7BV
If you want to create each div with columns of the grid system, like your code shown, you have to shift the columns with .col-md-offset-x, leaving the same space at the sides. Check the plunk.
http://plnkr.co/edit/ihpwrWC0p64eO1jiddl2
I hope that my answer help you at least a little, If your question is another please, let me know.