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>
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'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 am tring to output <div> in middle of ng-repeat using $index== - however the Banner <div> is within the parent container so its not going accross the full width of the screen. I have tried using the class="container-fluid" on the Banner, but its making it even smaller. Is there any way to break out of the parent container at all (just for that one div, in the middle of the ng-repeat) to make the Banner full width?
This is how I would like it to look (for visual purposes only, need div's to be output using the ng-repeat): Plunker-1
And this is how it currently looks: Plunker-2
Here is the solution : https://plnkr.co/edit/pYO1G8M3jIDXHrRSE4YE?p=preview
You do not need container-fluid to achieve what you intend to.
<div class="col-md-12" id="Banner" ng-if="$index==8">
<div class="well well-sm text-center">
Banner
</div>
</div>
You're close, try this:
<div id="content">
<div class="container" ng-controller="MainController">
<h1>Hello Plunker!</h1>
<div ng-class="$index === 8 ? 'col-md-12' : 'col-md-3'" ng-repeat="item in Data">
<div class="container-fluid" id="Banner" ng-if="$index === 8">
<div class="well well-sm text-center">
Banner
</div>
</div>
<div class="well active" ng-if="$index !== 8">
<h3>{{item}}</h3>
</div>
</div>
</div>
</div>
how about one like this one?
What I've done was to make the .well absolute positioned, so you can "bypass" normal document flow, making the .banner as long as you like, thus adding extra width with percentage values (so you can have it a bit fluid on resizing).
.banner{
position: absolute;
width: 104%;
right: -2%;
}
So, you get your banner wider, more than 100% (which is the container's width). In order to get it in the middle subtract half of extra width (4% / 2 == 2%) from the right (or could add 2% from the left).
Problem is the responsiveness, as it breaks for some breakpoints. I would suggest go with a solution like SASS and CSS3 calc(), MDN, to tackle this one.
<div ng-repeat="item in Data">
<div class="col-md-12 well well-sm text-center"
id="Banner"
ng-if="$index==8">
Banner
</div>
<div class="col-md-3">
<div class="well active">
<h3>{{item}}</h3>
</div>
</div>
</div>
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>
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.