I was following the starter app for material design and its working fine when try to view all the code in index.html, when I include the ui-view the layout gets distorted ..
index.html
<md-sidenav class="site-sidenav md-sidenav-left md-whiteframe-z2"
md-component-id="left"
md-is-locked-open="$mdMedia('gt-sm')">
<md-toolbar class="md-whiteframe-z1">
<h1>Users</h1>
</md-toolbar>
<md-list>
<md-list-item ng-repeat="it in ul.users">
<md-button ng-click="ul.selectUser(it)" ng-class="{'selected' : it === ul.selected }">
<md-icon md-svg-icon="{{it.avatar}}" class="avatar"></md-icon>
{{it.name}}
</md-button>
</md-list-item>
</md-list>
</md-sidenav>
<div flex layout="column" tabIndex="-1" role="main" class="md-whiteframe-z2">
<md-toolbar layout="row" class="md-whiteframe-z1">
<md-button class="menu" hide-gt-sm ng-click="ul.toggleList()" aria-label="Show User List">
<md-icon md-svg-icon="menu" ></md-icon>
</md-button>
<h1>Angular Material - Starter App</h1>
</md-toolbar>
<md-content flex id="content">
<md-icon md-svg-icon="{{ul.selected.avatar}}" class="avatar"></md-icon>
<h2>{{ul.selected.name}}</h2>
<p>{{ul.selected.content}}</p>
<md-button class="contact" md-no-ink ng-click="ul.showContactOptions($event)" aria-label="Contact User">
<md-tooltip>Contact {{ ul.selected.name }}</md-tooltip>
<md-icon md-svg-icon="share"></md-icon>
</md-button>
</md-content>
</div>
But when I inlcude the
index.html
<md-sidenav class="site-sidenav md-sidenav-left md-whiteframe-z2"
md-component-id="left"
md-is-locked-open="$mdMedia('gt-sm')">
<md-toolbar class="md-whiteframe-z1">
<h1>Users</h1>
</md-toolbar>
<md-list>
<md-list-item ng-repeat="it in ul.users">
<md-button ng-click="ul.selectUser(it)" ng-class="{'selected' : it === ul.selected }">
<md-icon md-svg-icon="{{it.avatar}}" class="avatar"></md-icon>
{{it.name}}
</md-button>
</md-list-item>
</md-list>
</md-sidenav>
<div ui-view></div>
and
source.html as
<div flex layout="column" tabIndex="-1" role="main" class="md-whiteframe-z2">
<md-toolbar layout="row" class="md-whiteframe-z1">
<md-button class="menu" hide-gt-sm ng-click="ul.toggleList()" aria-label="Show User List">
<md-icon md-svg-icon="menu" ></md-icon>
</md-button>
<h1>Angular Material - Starter App</h1>
</md-toolbar>
<md-content flex id="content">
<md-icon md-svg-icon="{{ul.selected.avatar}}" class="avatar"></md-icon>
<h2>{{ul.selected.name}}</h2>
<p>{{ul.selected.content}}</p>
<md-button class="contact" md-no-ink ng-click="ul.showContactOptions($event)" aria-label="Contact User">
<md-tooltip>Contact {{ ul.selected.name }}</md-tooltip>
<md-icon md-svg-icon="share"></md-icon>
</md-button>
</md-content>
</div>
Related
I am using angular 4 with its respective Material . My app.component.html looks like this :
<!--The whole content below can be removed with the new code.-->
<md-toolbar color="primary" >
<button md-button (click)="sidenav.toggle()"><md-icon class="md-18|md-
24|md-36|md-48">menu</md-icon></button>
<span>Material 2</span>
<span class="example-spacer"></span>
</md-toolbar>
<md-sidenav-container layout="column" flex style="background: plum;">
<md-sidenav #sidenav side="left" class="example-sidenav" flex layout="column" style="background: plum;">
<md-list>
<div class="row">
<md-list-item><md-icon>explore</md-icon> <span>item</span></md-list-item>
</div>
<div class="row">
<md-list-item><md-icon>map</md-icon> <span>item</span></md-list-item>
</div>
<div class="row">
<md-list-item><md-icon>home</md-icon> <span>item</span></md-list-item>
</div>
<div class="row">
<md-list-item><md-icon>android</md-icon> <span>item</span></md-list-item>
</div>
<div class="row">
<md-list-item><md-icon>done</md-icon> <span>item</span></md-list-item>
</div>
</md-list>
</md-sidenav>
<md-grid-list cols="4" rowHeight="100px" layout="column" flex>
</md-grid-list>
</md-sidenav-container>
`
How to make the md-sidenav-container take up all of the space left vertically?
Plunkr : https://plnkr.co/edit/Mvm6zSifW0EpeKtmuSEA?p=preview
Note: I don't want a CSS min-height, height: 100% fix. Only a clean class/directive based solution for Angular Material 2/4.
Move your <md-toolbar> inside the container and add the fullscreen attribute to the <md-sidenav-container>:
<md-sidenav-container layout="column" flex style="background: plum;" fullscreen>
<md-toolbar color="primary" >
<button md-button (click)="sidenav.toggle()"><md-icon class="md-18|md-24|md-36|md-48">menu</md-icon></button>
<span>Hems IRCA</span>
<span class="example-spacer"></span>
</md-toolbar>
...
See this answer for more details
Updated plunker
here is the the plunkr example, I have a toolbar which is on top of my scrollbar, tried, but failed... Would be very appreciated if someone could help me.
Here is sample code:
app.component.html:
<md-toolbar class="fixed-header">
<button class="app-icon-button" (click)="start.toggle()">
<i class="material-icons app-toolbar-menu">menu</i>
</button>
</md-toolbar>
<md-sidenav-container fullscreen>
<md-sidenav #start class="app-sidebar" mode="side">
test
</md-sidenav>
<div class="main-container-content" style="max-width:3px;">
{{ text }}
</div>
</md-sidenav-container>
I'm trying to design a toolbar in Material and Angular2 as shown in the image below. I'm unable to format the toolbar such that the search bar comes in the center (and is in white) and the Create Project and remaining other buttons are flush to the right. The code for this is as follows:
<md-sidenav-container fullscreen>
<md-sidenav mode="side" opened="false" #sidenav>
<md-toolbar color="primary">AppLogo</md-toolbar>
</md-sidenav>
<div class="main-content">
<md-toolbar color="primary">
<span><button md-button (click)="sidenav.toggle()"><md-icon>menu</md-icon></button></span>
<span><h2>Application Name</h2></span>
<md-input-container>
<input mdInput placeholder="Search">
</md-input-container>
<div id="right_nav">
<span><button md-button><md-icon>add</md-icon> Create Project</button></span>
<span><button md-button><md-icon>help</md-icon></button></span>
<span><button md-button><md-icon>alarm</md-icon></button></span>
<span><button md-button><md-icon>face</md-icon></button></span>
</div>
</md-toolbar>
</div>
</md-sidenav-container>
How do I go about doing this using the available Material constructs?
Split toolbar content in 3 part then align each part as needed, flex let content cover 100% width.
<md-sidenav-container fullscreen>
<md-sidenav mode="side" opened="false" #sidenav>
<md-toolbar color="primary">AppLogo</md-toolbar>
</md-sidenav>
<div class="main-content">
<md-toolbar color="primary" layout="row">
<div flex layout="row" layout-align="start center">
<span><button md-button (click)="sidenav.toggle()"><md-icon>menu</md-icon></button></span>
<span><h2>Application Name</h2></span>
</div>
<div flex layout="row" layout-align="center center">
<md-input-container>
<input mdInput placeholder="Search">
</md-input-container>
</div>
<div id="right_nav" flex layout="row" layout-align="end center">
<span><button md-button><md-icon>add</md-icon> Create Project</button></span>
<span><button md-button><md-icon>help</md-icon></button></span>
<span><button md-button><md-icon>alarm</md-icon></button></span>
<span><button md-button><md-icon>face</md-icon></button></span>
</div>
</md-toolbar>
</div>
</md-sidenav-container>
EXAMPLE
I am just starting out with web-development and consider myself to be a novice when it comes to CSS and HTML.
In the below snippet I cannot get the md-subheader to move on top of the md-fab-speed-dial. The md-fab-speed-dial is clickable through the md-subheader. How can I move either the md-subheader in front or move the md-fab-speed-dial move behind ??
<md-content style="height: 900px;" flex>
<section>
<md-subheader class="md-primary">Songs</md-subheader>
<md-list layout-padding>
<div layout="row" ng-repeat="song in songs">
<md-list-item class="md-3-line" ng-click="playSong(song)" flex>
<div class="md-list-item-text" layout="column">
<h3>{{ song.title }}</h3>
<h4>{{ song.album }}</h4>
<p>{{ song.year }}</p>
</div>
</md-list-item>
<md-fab-speed-dial md-direction="left" md-open="demo.isOpen" class="md-scale" ng-mouseenter="demo.isOpen=true" ng-mouseleave="demo.isOpen=false" style="position: relative;">
<md-fab-trigger>
<md-button aria-label="menu" class="md-fab md-primary md-hue-3">
<md-icon md-svg-src="assets/icons/queue_music.svg" aria-label="plalist"></md-icon>
</md-button>
</md-fab-trigger>
<md-fab-actions>
<md-button aria-label="add-playlist" class="md-fab md-raised md-mini" ng-click="">
<md-tooltip md-direction="top" md-visible="tooltipVisible" md-autohide="false">
Add to playlist
</md-tooltip>
<md-icon md-svg-src="assets/icons/playlist_add.svg"></md-icon>
</md-button>
</md-fab-actions>
</md-fab-speed-dial>
</div>
</md-list>
</section>
</md-content>
I have a button to open my navbar:
And after I click it it get's some kind of hitmarker:
After clicking on some navbar item (thus switching to next state/view) the hitmarker should disappear. Unforunately the hitmarker is present till I click on a random element.
The html for the button:
<div ng-controller="navbarCtrl" ng-cloak>
<md-content>
<md-toolbar>
<div class="md-toolbar-tools">
<md-button class="md-icon-button" ng-click="toggleMenu()" aria-label="Menu">
<md-icon md-svg-icon="assets/img/menu.svg"></md-icon>
</md-button>
<h2>
<span><a ui-sref="overview">Test</a></span>
</h2>
<span flex></span>
<md-button class="md-icon-button" ui-sref="account" aria-label="Account">
<md-icon md-svg-icon="assets/img/account.svg"></md-icon>
</md-button>
</div>
</md-toolbar>
</md-content>
<section layout="row" flex>
<md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left">
<md-toolbar class="md-theme-indigo" layout="row">
<h1 class="md-toolbar-tools">Menu</h1>
<span flex></span>
<md-button class="md-icon-button" aria-label="close" ng-click="close()">
<md-icon md-svg-icon="assets/img/closeNavbar.svg"></md-icon>
</md-button>
</md-toolbar>
<div layout="column" layout-align=" center">
<md-button ui-sref-active="active" ng-click="close()" layout-align=" center" style="text-align:left" ui-sref="overview">Overview</md-button>
</div>
</md-sidenav>
</section>
</div>
<div ui-view></div>
What do I have to change in order to fix this?
You need this in your CSS:
.md-focused {
background: transparent !important;
}
add this to your CSS:
md-button:focus, md-icon:focus {
outline: none;
}