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).
Related
I am trying to simulate a contact list in Angular Material. The div containing text should vertically align to the center of the avatar image on the left. I have tried several ways to add the layout-align but none of them seem to have any effect. I have included the code and the Plunker URL below to demonstrate my issue. I appreciate all help!
Plunker:
https://plnkr.co/edit/W18pV9fOE6BP9SuYQGAm?p=preview
HTML
<md-list>
<md-list-item class="md-2-line" layout="row" layout-align="center start">
<img src="https://cdn.dribbble.com/users/583390/screenshots/2517460/sob_avatar_illustration__800x600px__1.0_1x.jpg" style="width:60px;" />
<div class="md-list-item-text">
<h3>Babe Ruth</h3>
<p>Baseball Player</p>
</div>
</md-list-item>
<md-list-item class="md-2-line" layout="row" layout-align="center start">
<img src="https://cdn.dribbble.com/users/583390/screenshots/2517460/sob_avatar_illustration__800x600px__1.0_1x.jpg" style="width:60px;" />
<div>
<h3>Mickey Mantle</h3>
<p>Baseball Player</p>
</div>
</md-list-item>
<md-list-item class="md-2-line" layout="row" layout-align="center start">
<img src="https://cdn.dribbble.com/users/583390/screenshots/2517460/sob_avatar_illustration__800x600px__1.0_1x.jpg" style="width:60px;" />
<div class="md-list-item-text">
<h3>Derek Jeter</h3>
<p>Baseball Player</p>
</div>
</md-list-item>
</md-list>
Add class="md-avatar" to your img tags.
Something like
<md-list-item class="md-2-line">
<img class="md-avatar" src="https://cdn.dribbble.com/users/583390/screenshots/2517460/sob_avatar_illustration__800x600px__1.0_1x.jpg" style="width:60px;" />
<div class="md-list-item-text" layout="column">
<h3>Derek Jeter</h3>
<p>Baseball Player</p>
</div>
</md-list-item>
The reason it's out of line is because of the margins that are set by the md-list-item-text css class. There may be a better way, but to suggest something different to what's already been suggested, you could override those styles and reset those margins.
1) Use this to reset the margin from within your style.css file:
md-list-item .no-margin.md-list-item-text {
margin: 0;
}
2) Set that no-margin class on each of the divs:
<md-list-item class="md-2-line" layout="row" layout-align="center start">
<img src="https://cdn.dribbble.com/users/583390/screenshots/2517460/sob_avatar_illustration__800x600px__1.0_1x.jpg" style="width:60px;" />
<div class="no-margin md-list-item-text">
<h3>Babe Ruth</h3>
<p>Baseball Player</p>
</div>
</md-list-item>
3) Rearrange your style sheet imports for this to work:
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<link rel="stylesheet" href="style.css" />
style.css must come after angular-material.min.css so that you can override it.
Demo Plunker
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.
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 have simple button inside toolbar:
<md-toolbar>
<div class="md-toolbar-tools" layout="row" layout-align="space-between left">
<md-button class="md-icon-button" aria-label="Settings">
<md-icon md-svg-icon="images/ic_local_airport_24px.svg"></md-icon>
</md-button>
<h2>
<span class="md-title">
<font>
Title
</font>
</span>
</h2>
<span>
<!--
<md-button class="md-icon-button" aria-label="languageEnglish"
style='width: 1px !important;
padding-left: 2px !important;
padding-right: 2px !important;'>|</md-button>
-->
<md-button ng-click='test()' class="md-icon-button">Test</md-button>
</span>
</div>
</md-toolbar>
When I click the button, the function test() fires, but the ripple effect doesn't. I need to click it twice to ripple effect take place.
I also have tab:
<md-tabs class="tabs" layout="row" md-dynamic-height="" md-border-bottom=""
md-align-tabs="bottom" md-stretch-tabs="always" md-no-pagination="true" md-no-ink="false"
md-swipe-content="true">
<md-tab label="Home" ng-click="tab1Clicked()">
<md-tab-label>
<md-icon md-svg-icon="images/ic_local_airport_24px.svg"></md-icon>
<div class="tabsDivider"></div>
</md-tab-label>
</md-tab>
<md-tab label="Location" ng-click="tab2Clicked()">
<md-tab-label>
<md-icon md-svg-icon="images/ic_local_airport_24px.svg"></md-icon>
</md-tab-label>
</md-tab>
</md-tabs>
When I click the tab, it fires the function too but the tab UI is not updated. So for example, I am from tab1 clicks tab2, the tab2 background color is not updated although the logic inside the function has been executed. I need to click 2 times upto > 5 times (intermittently, sometimes 1 click also changes the UI).
Why does this happen? How to resolve it?
I'm displaying dynamic content by looping with <md-card> and <image> tags. My output is not responsive on tablet or mobile screens, showing a scrollbar instead of the next line. What's wrong with my code and how can I make it responsive?
<p>Show Menus</p>
<div layout="row" layout-margin >
<md-card ng-repeat="menu in sampleMenus">
<md-card>
<img src="http://placehold.it/350x150" class="md-card-image" alt="image caption"/>
<md-card-content >
<h2>{{menu.displayName}}</h2>
<p>{{menu.type}}</p>
</md-card-content>
</md-card >
</md-card>
</div>
Screenshots:
This may help your cause.
http://codepen.io/sstorie/pen/myJWxQ
The key is those two classes added to the parent and the img in each card
.parent {
overflow: hidden;
}
.card img {
width: 100%;
height: auto;
}
You can use the flex(width for row, height for column) attribute to declare md-card size and layout-wrap on the parent container. Layout-align might help your cause as well.
<div layout="row" layout-margin layout-wrap layout-align="center center">
<md-card flex="25"> //25% of parent
//content
</md-card>
</div>
Check out the documentation for more options.