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>
Related
I am trying use ng-animate so far without success. I animate different part of my program and everything is working fine. But in this part I don't know what directive I shout use. I tried #singleQuestionAnswer.ng-enter .. ng-leave but didn't work.
<div class="row" id="singleQuestionAnswer">
<div class="column" >
<h3>$ctrl.quizQuestions[$ctrl.activeQuestion].question}}</h3>
<div class="row">
<div layout="column" ng-repeat="answer in $ctrl.answers">
<div class="answer" layout-padding>
<md-checkbox ng-checked="$ctrl.existAnswer(answer, $ctrl.answersSelected)" >
{{answer}}
</md-checkbox>
</div>
</div>
</div>
</div>
</div>
<md-button ng-click="$ctrl.answered($ctrl.active)" >Submit answer</md-button>
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'm using two plugins to achieve this but it doesn't work perfectly. The two plugins are angulargrid, and slick-carousel. Does anyone know of a plugin that does both these in one?
Here is what I have with using both plugins, its almost good enough except that the carousel causes gaps between the grid items until the window is resized after the page first loads. Can anyone get this to work without any hiccups?
<ul class="dynamic-grid" angular-grid="vm.stories" ag-grid-width="400" ag-gutter-size="20" ag-id="gallery">
<li data-ng-repeat="story in vm.stories" class="grid">
<!--Carousel-->
<slick fade="true" dots="true" ng-style="vm.imageStyle" ng-show="story.images.length > 0" ng-class="{'showImages': story.images.length > 0}">
<div ng-repeat="image in story.images">
<img class="carousel-image" data-lazy="{{ image.filename }}" aria-label="Image" ng-style="vm.imageStyle">
</div>
</slick>
</li>
</ul>
Have you tried this awesome carousel . You can change the perspective to make images as a grid.
Was able to get it to work by using divs. Heres what I have, which also uses infinite scroll.
<div ng-cloak="" layout="column" layout-fill>
<md-content id="content-scroller">
<div>
<div
class="cards-wrap"
angular-grid="vm.stories"
ag-grid-width="400"
ag-gutter-size="20"
ag-id="gallery"
ag-scroll-container="'#content-scroller'"
ag-infinite-scroll="vm.loadMoreStories()"
performantScroll="true">
<div class="card" ng-repeat="story in vm.stories">
<slick fade="true" dots="true">
<div ng-repeat="image in story.images">
<img data-lazy="{{ image.filename}}" aria-label="Image">
</div>
</slick>
<div class="inside">
<h3>{{story.title}}</h3>
<div class="description">{{ story.text }}</div>
</div>
</div>
</div>
<div class="loading-more-indicator" ng-show="vm.loadingMore">
<md-progress-circular md-mode="indeterminate" md-diameter="64" class="progress-swatch"></md-progress-circular>
</div>
</div>
</md-content>
<div>
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'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.