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.
Related
I try to make a banner video that will stretch always at 100% of the width. It works great on Firefox, but not Chrome. Why? See https://www.gustdive.com for example. I tried to use the code snippet, however, there are too much compatibility issues and it doesn't work fine. The only way that I can provide a concrete example is with my link itself.
Thanks #Mav for providing the visual example! Please see
Firefox
Chrome
Here is my code:
<!-- Main Layout Content -->
<md-content md-colors="accent">
<!-- Tabs Layout -->
<md-tabs md-selected="ctrl.tabSelected" md-stretch-tabs="always" class="md-primary" md-dynamic-height md-border-bottom>
<!-- Home Tab -->
<md-tab>
<!-- Home Tab Label -->
<md-tab-label>
<h2>
<md-icon md-svg-src="media/image/icon/home.svg"></md-icon>
<span hide show-gt-sm>
Home
</span>
</h2>
</md-tab-label>
<!-- Home Tab Body -->
<md-tab-body>
<!-- Home Tab Banner -->
<div layout="column" layout-align="start center" style="overflow-y: hidden; max-height: 275px; text-align: center; background-color: #000;">
<div id="banner-title" style="position: absolute;">
<img src="media/image/icon/logo-white-192x192.png" alt="GustDive Logo" />
<span hide show-gt-xs>
<br />
<h1 style="font-size: 50px; color: white; text-shadow: 0 0 10px white; letter-spacing: 15px;" flex>
GustDive
</h1>
</span>
</div>
<video loop muted autoplay style="width: 100%;">
<source src="media/video/underwater-720p.mp4" type="video/mp4">
<source src="media/video/underwater-360p.mp4" media="(max-width: 640px)" type="video/mp4">
</video>
</div>
<!-- Home Tab Content -->
<md-content layout="row" layout-xs="column" layout-wrap>
</md-content>
</md-tab-body>
</md-tab>
</md-tabs>
<!-- Website Footer -->
<div md-colors="{background: 'grey-A200'}" layout-padding>
<div layout="row" layout-align="end center">
<a target="_blank" href="https://www.padi.com" aria-label="Padi">
<img src="media/image/icon/padi.png" alt="Padi" />
</a>
<a target="_blank" href="https://www.tripadvisor.com/Attraction_Review-g150793-d11888983-Reviews-GustDive-Puerto_Vallarta.html" aria-label="Trip Advisor">
<img src="media/image/icon/trip-advisor.png" alt="Trip Advisor" />
</a>
</div>
<div layout-align="center end" style="font-size: 12px; text-align: center;">Copyright © Jonathan-Gagne.com 2018</div>
</div>
</md-content>
Use object-fit: fill to make the width 100% on Chrome. This will not work for IE11 though (see caniuse).
I am using AngularJS with ui bootstrap module.
1) What I need is my carousel to change its items one by one. I found a code (by other person) but it's only in jQuery.
Codepen code in jQuery
html:
<div class="container">
<h1>Use Bootstrap's carousel to show multiple items per slide.</h1>
<div class="row">
<div class="col-md-12">
<div class="carousel slide multi-item-carousel" id="theCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-4"><img src="http://placehold.it/300/f44336/000000" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/300/e91e63/000000" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/300/9c27b0/000000" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/300/673ab7/000000" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/300/4caf50/000000" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/300/8bc34a/000000" class="img-responsive"></div>
</div>
<!-- add more items here -->
<!-- Example item start: -->
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/300/8bc34a/000000" class="img-responsive"></div>
</div>
<!-- Example item end -->
</div>
<a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
</div>
less CSS:
.multi-item-carousel{
.carousel-inner{
> .item{
transition: 500ms ease-in-out left;
}
.active{
&.left{
left:-3%;
}
&.right{
left:3%;
}
}
.next{
left: 3%;
}
.prev{
left: -3%;
}
#media all and (transform-3d), (-webkit-transform-3d) {
> .item{
// use your favourite prefixer here
transition: 500ms ease-in-out left;
transition: 500ms ease-in-out all;
backface-visibility: visible;
transform: none!important;
}
}
}
.carouse-control{
&.left, &.right{
background-image: none;
}
}
}
jQuery
$('.multi-item-carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length>0) {
next.next().children(':first-child').clone().appendTo($(this));
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
2) So I want multiple items change one bye one. How to do this in angularJS? Any ideas or directions?
I am creating an ionic app, in that I need to add a four images in my home page in two row and each row has two images. The images size is 296*296.
I have tried the below code,
index.html
<ion-nav-view class="container" >
</ion-nav-view>
Home.html
<ion-view view-title="HOME">
<ion-content>
<div class="row" >
<div class="col-md-6 " id="img1">
<img src="img/hard.png" class="img-responsive " id="img1" >
</div>
<div class="col-md-6" id="img1">
<img src="img/soft.png" class="img-responsive " id="img1">
</div>
</div>
<div class="row" >
<div class="col-md-6 " id="img1">
<img src="img/welcome.png" class="img-responsive " id="img1" >
</div>
<div class="col-md-6" id="img1">
<img src="img/title.png" class="img-responsive " id="img1">
</div>
</div>
</ion-content>
</ion-view>
CSS
#img1{
width: 100%;
height: auto
}
Your ids for div and img are same i.e img1. Change the id and then try. And make width and height important may be some other css overwrites it. Tell me if this works or not.
#img2{
width: 100% !important;
height: auto !important;
}
<div class="col-md-6 " id="img1">
<img src="img/hard.png" class="img-responsive " id="img2" >
</div>
I also got this issue. This code might help to you
HTML
<div class="list card new-feeds wall-post">
<div class="row">
<div class="col">
<div class="item item-image img4">
<img src="img/hard.png">
</div>
<div class="item item-image img4">
<img src="img/soft.png">
</div>
<div class="item item-image img4">
<img src="img/welcome.png">
</div>
<div class="item item-image img4">
<img src="img/title.png">
</div>
</div>
</div>
</div>
css
.wall-post .img4 {
width: 50%;
float: left;
height: 120px;
}
.img4 > img {
height: 100%;
width: 100%;
object-fit: cover;
}
I want to design a page just like the official angular-material website . The toolbar and side nav is fixed while the main content scrolls . I am trying to do that for few hours but haven't been got any success .
here is my html template for profile
profile.html
<div layout="row" flex>
<md-sidenav class="md-sidenav-left md-whiteframe-z2 profileSidenav" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')">
<md-toolbar layout="row" class="md-hue-2">
<h1 class="md-toolbar-tools" layout-align-gt-sm="center">Hello World</h1>
</md-toolbar>
<md-content>
<div class="checkDiv">
jello
</div>
<div class="checkDiv">
jello
</div>
<div class="checkDiv">
jello
</div>
<div class="checkDiv">
jello
</div>
<div class="checkDiv">
jello
</div>
<div class="checkDiv">
jello
</div>
</md-content>
</md-sidenav>
<div layout="column" flex>
<md-toolbar layout="row" class="profileToolBar">
<button ng-click="toggleSidenav('left')" hide-gt-sm>
<span class="visually-hidden">Menu</span>
</button>
<h1 class="md-toolbar-tools">Hello World</h1>
</md-toolbar>
<md-content layout="column" flex class="md-padding">
<div class="checkDiv">
jello
</div>
<div class="checkDiv">
jello
</div>
<div class="checkDiv">
jello
</div>
</md-content>
</div>
</div>
sidenav and toolbar has been given custom class with position:fixed ; values , but after making position fixed for sidenav the toolbar and content hides behind it
you can ise $mdSticky to make element fixed
app.directive('sticky', function($mdSticky, $compile) {
var SELECT_TEMPLATE =
'<md-content><md-card layout="column"> <md-card-content> <h2>Card headline</h2> <p>Card content</p> </md-card-content> <md-card-footer> Card footer </md-card-footer> <div class="md-actions" layout="column"> <md-button>content</md-button> </div> </md-card> <md-card layout="column"> <md-card-content> <h2>Card headline</h2> <p>Card content</p> </md-card-content> <md-card-footer> Card footer </md-card-footer> <div class="md-actions" layout="column"> <md-button>content</md-button> </div> </md-card> </md-content>';
return {
restrict: 'A',
replace: true,
//template: SELECT_TEMPLATE, // you can use template HTML or load HTML with templateURL as we do it in next line
templateUrl:appInfo.template_directory+'templates/sticky-sidebar.directive.html',
link: function(scope,element) {
$mdSticky(scope, element, $compile(SELECT_TEMPLATE)(scope));
}
};
});
as described here:
https://www.coditty.com/code/angular-material-how-to-make-custom-elements-sticky-using-mdsticky
I solve it with this code:
index.html:
<body layout="column">
<div flex layout="column" ng-include="'app/layout/shell.html'"></div>
</body>
shell.html
<div layout="row" flex style="height: inherit; overflow: hidden; background-color: transparent" ng-controller="Shell" layout-fill class="fondo">
<div ng-include="'app/layout/left-side-nav.html'"></div>
<md-content flex layout="column" role="main" style="height: inherit; background-color: transparent; " class="">
<div ng-include="'app/layout/app-toolbar.html'"></div>
<div layout="row" layout-align="space-around" ng-if="dataLoading.init" class="loader">
<md-progress-circular class="md-accent" md-mode="indeterminate"></md-progress-circular>
</div>
<md-content flex style="background-color: transparent; flex-direction: column;" ng-hide="dataLoading.init" >
<div ui-view="main" class="noscrollbar" style=" margin:auto"></div>
</md-content>
</md-content>
<div ng-include="'app/layout/right-side-nav.html'"></div>
</div>
Use this attribute md-is-locked-open="true" on <md-sidenav> tag.
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