I'm using ng-include to call my form "test_form", upon display buttons align at the center. How can I align them at the bottom right of the form?
index.html
<div class="col-sm-6 sidenav">
<!-- menu bar content at the top -->
<div class="column-nav-form" ng-include = "'/views/html/test_form.html'" >
</div>
test_form.html
<form name="testForm" ng-app="myApp" ng-controller="FormController" class="container-fluid" ng-submit="submit()">
<!-- form labels -->
<md-button class="md-raised md-primary testForm" type ="button" ng-click ="reset()">CANCEL</md-button>
<md-button class="md-raised md-primary testForm" ng-disabled="testForm.$invalid">SAVE</md-button>
</form>
CSS
.md-button.md-raised.md-primary.testForm {
position: right !important;
color: #FFFFFF;
background-color: #4CAF50;
}
Form button display:
pull-right class did the trick.
<form name="testForm" ng-app="myApp" ng-controller="FormController" class="container-fluid" ng-submit="submit()">
<!-- form labels -->
<md-button class="md-raised md-primary pull-right testForm" type ="button" ng-click ="reset()">CANCEL</md-button>
<md-button class="md-raised md-primary pull-right testForm" ng-disabled="testForm.$invalid">SAVE</md-button>
</form>
Related
I'm using AngularJs 1.7, and i've created a dropdown element that i want to add it to md-dialog, the problem is that my element (my-popup) always remains in the limits of the md-dialog - like in here
I want to achieve the same behaviour of the date-picker - as you can see - it's appears in the correct place and over the md-dialog - i wonder how it can done.
I've tried to append the popup to the body , but this way messed up the position of the popup - i guess there is a better way.
$scope.open = function(){
$scope.isShowMyPopUp = !$scope.isShowMyPopUp;
if(!!$scope.isShowMyPopUp){
let modalContainer = $('#myPopUp');
modalContainer.detach();
modalContainer.appendTo('body');
}
Here is the Example
You need to put your "myPopUp" div inside the dialog-content directly and modify your css like the following
HTML :
<md-dialog aria-label="Mango (Fruit)" class="mango-dialog">
<form ng-cloak>
<md-toolbar>
<div class="md-toolbar-tools">
<h2>Mango (Fruit)</h2>
<span flex></span>
<md-button class="md-icon-button" ng-click="cancel()">
<md-icon md-svg-src="img/icons/ic_close_24px.svg" aria-label="Close dialog"></md-icon>
</md-button>
</div>
</md-toolbar>
<md-dialog-content>
<div class="my-popup" ng-show="isShowMyPopUp" id-"myPopUp">
<div ng-repeat="item in daySelect">
<md-button class="md-raised md-primary" ng-class="{'selected':item.isSelected}" ng-click="select(item)"> {{item.text}}</md-button>
</div>
</div>
<div class="md-dialog-content">
<div layout-gt-xs="row">
<div flex-gt-xs>
<h4>Standard date-picker</h4>
<md-datepicker ng-model="ctrl.myDate" md-placeholder="Enter date"></md-datepicker>
</div>
<div flex-gt-xs style="position:relative;">
<h4>my-popup</h4>
<md-button class="md-raised md-primary" ng-click="open()">Open</md-button>
</div>
</div>
</div>
</md-dialog-content>
</form>
</md-dialog>
CSS :
.my-popup{
position:absolute;
top: 48px;
left: 104px;
width:250px;
height:250px;
background-color:gray;
z-index: 999;
overflow: auto;
}
md-dialog{
width:40%;
}
.selected {
background-color:green!important;
}
.mango-dialog {
overflow: visible;
}
I added mango-dialog class to your dialog to allow overflow , also I added z-index to the pop up to make sure it is on top
here is a working example
I would like to show a hidden Inputs when user click show button in angular material 1.4. For example When collapsed it would
When user click on the show button it would look
Following is the code i am fiddling with.
I would like to bring the input Boxes below the Header. It seems with the nested Div Block it is not working as expected. Can anyone help?
<md-tabs md-dynamic-height md-border-bottom>
<md-tab label="Schedules">
<md-content class="md-padding">
<md-content class="md-padding">
<md-list-item ng-repeat="schedule in schedules">
<div layout="row">
<md-button class="md-icon-button" aria-label="Messages" ng-click="expandSchedule($index)">
<md-icon md-svg-src="Client/app/resources/images/icons/svg/expand_more.svg" ng-show="!schedule.showSchedule"></md-icon>
<md-icon md-svg-src="Client/app/resources/images/icons/svg/expand_less.svg" ng-show="schedule.showSchedule"></md-icon>
</md-button>
<p>{{schedule.humanReadableFormat}}</p>
<md-button class="md-icon-button pull-right" aria-label="Messages" ng-click="delSchedule($index)">
<md-icon md-svg-src="Client/app/resources/images/icons/svg/close.svg"></md-icon>
</md-button>
</div>
<div layout="row" ng-show="schedule.showSchedule">
<md-input-container>
<label>Title</label>
<input ng-model="user.title">
</md-input-container>
<md-input-container>
<label>Email</label>
<input ng-model="user.email" type="email">
</md-input-container>
</div>
<md-divider></md-divider>
</md-list-item>
</md-content>
<div class="md-padding">
<section layout="row" layout-align="center center" layout-wrap>
<md-button class="md-raised md-warn" aria-label="Add Schedule" ng-click="clickAddSchedule()">Add New Schedule</md-button>
</section>
</div>
</md-content>
</md-tab>
</md-tabs>
You didn't write exactly why it doesn't work as expected. But I guess you have a problem with using row twice:
<div layout="row">
...
<div layout="row">
Maybe try this:
<div layout="row">
<div flex>LEFT</div>
<div flex ng-class="{hide: !schedule.showSchedule}">RIGHT</div>
</div>
see this angular material demo at http://codepen.io/joyal/pen/mPpGBK
<div ng-controller="AppCtrl" layout="column" style="height:500px;" class="sidenavdemoBasicUsage" ng-app="MyApp">
<md-toolbar layout="column" class="main-toolbar md-medium-tall">
<span flex="flex">
<h1 class="md-toolbar-tools">Good luck overlapping me, sidenavs</h1>
</span>
</md-toolbar>
<section layout="row" flex="">
<md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">
<md-toolbar class="md-theme-indigo">
<h1 class="md-toolbar-tools">Sidenav Left</h1>
</md-toolbar>
<md-content layout-padding="" ng-controller="LeftCtrl">
<md-button ng-click="close()" class="md-primary" hide-gt-md="">
Close Sidenav Left
</md-button>
<p hide-md="" show-gt-md="">
This sidenav is locked open on your device. To go back to the default behavior, narrow your display.
</p>
</md-content>
</md-sidenav>
<md-content flex="" layout-padding="">
<div layout="column" layout-fill="" layout-align="top center">
<p>
The left sidenav will 'lock open' on a medium (>=960px wide) device.
</p>
<p>
The right sidenav will focus on a specific child element.
</p>
<div>
<md-button ng-click="toggleLeft()" class="md-primary" hide-gt-md="">
Toggle left
</md-button>
</div>
<div>
<md-button ng-click="toggleRight()" class="md-primary">
Toggle right
</md-button>
</div>
</div>
<div flex=""></div>
</md-content>
<div layout="row">
<!--This is new-->
<md-sidenav class="md-sidenav-right md-whiteframe-z2" md-component-id="right">
<md-toolbar class="md-theme-light">
<h1 class="md-toolbar-tools">Sidenav Right</h1>
</md-toolbar>
<md-content ng-controller="RightCtrl" layout-padding="">
<form>
<md-input-container>
<label for="testInput">Test input</label>
<input type="text" id="testInput" ng-model="data" md-sidenav-focus="">
</md-input-container>
</form>
<md-button ng-click="close()" class="md-primary">
Close Sidenav Right
</md-button>
</md-content>
</md-sidenav>
</div>
</section>
</div>
If you open the left side bar, it opens smoothly but if you open the right side bar, while opening and closing, a scroll bar appears on the page (horizontal scroll bar in the main content area).
How can I update the page so that right side bar opens and closes like left side bar (smoothly without scroll bar on content area)
You can use the overflow: hidden in your body, but it may effect to other component(s). Try this:
#sideNavContainer
{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
}
Hope this help.
This is my code.
<body>
<div ng-controller="MainCtrl as mc">
<md-content>
<md-toolbar md-scroll-shrink>
<div class="md-toolbar-tools">
<span flex="5"></span>
<md-button ui-sref="Home">
example.com
</md-button>
<span flex="20"></span>
<span>something something</span>
<span flex="20"></span>
<md-button ng-show="!login" aria-label="Settings" ui-sref="Login">
Login / Register
</md-button>
<md-button ng-show="login" class="md-icon-button" aria-label="Settings" ng-click="openRightMenu()">
<md-icon class="material-icons">menu</md-icon>
</md-button>
<md-sidenav md-component-id="right" class="md-sidenav-right">
<md-button href="http://google.com">Google</md-button>
</md-sidenav>
</div>
</md-toolbar>
</md-content>
<div ui-view></div>
</div>
</body>
When i click on button to open right side nav it opens but height is same as of toolbar.
How to display sidenav of standard size?
put md-sidenav outside md-content
<div ng-controller="MainCtrl as mc">
<md-content>
</md-content>
<md-sidenav md-component-id="right" class="md-sidenav-right">
<md-button href="http://google.com">Google</md-button>
</md-sidenav>
<div ui-view></div>
if it's inside md-toolbar it will take toolbar height
How can I left-align elements inside a md-button? Sample code:
<md-button>
<div md-ink-ripple layout="row">
<div class="inset">
<ng-md-icon icon="info"></ng-md-icon>
</div>
<div class="inset">
Title
</div>
</div>
</md-button>
You just have to override the CSS property text-align:center by text-align:left of md-button
Here the result on the MD Demo Page :
Just use this style element:
<md-button md-no-ink="" class="md-primary" align="center" style="left:712px";>
Search
</md-button>
css
Give you html some id first
<ng-md-icon id="SomeID" icon="info"></ng-md-icon>
Then in your css do
#SomeID{
text-align:left;
}
that should sort you out.