I am working with angualar and angular material and I am trying to create something linke this -> http://gyazo.com/51b99edb716687f6096e4cff7d009e8d
but for some reason my image (logo) stretches over de width, this is what I have now -> http://gyazo.com/277f2bcf6b47861412d8e5df949d8313
I can't even seem to get it in the middle of the screen
If any one can help me out and get me going with this flex box model I would appreciate it
this is my code:
<div layout="row" flex layout-padding layout-fill layout-align="center center">
<div flex="40" flex-lg="50" flex-md="70" flex-sm="100">
<md-card>
<md-toolbar>
<div>
<div><img src="../images/logo.png" alt="Zazzle logo"></div>
<h1 class="md-headline">
Sign up
</h1>
</div>
</md-toolbar>
</md-card>
</div>
</div>
To center something add a div with layout="row" and within the div add a <span flex></span> before and after the div you are trying to center.
This is how I do it for my login page to center the input divs. I am still trying to learn myself, so I am not sure if it is the right way or not but you can surely try it:
<div layout="row">
<span flex></span>
<div class="well" flex='30'>
<form ng-submit="vm.login()" name="loginForm">
<md-input-container>
<label>Email</label>
<input type="text" ng-model="vm.email" required/>
<div ng-messages="loginForm.email.$error" ng-if='loginForm.email.$dirty'>
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
<md-input-container>
<label>Password</label>
<input type="password" ng-model="vm.password"/>
</md-input-container>
<md-button type="submit" class="md-raised md-primary">Submit</md-button>
</form>
</div>
<span flex></span>
</div>
Hope this helps :)
Related
I have this piece of code that works fine. I want to keep the model open so that I can keep adding values.
As it stands now every time I click okay, the form submits and closes the model. I would love for it to submit and keep the model open.
<md-dialog aria-label="New Mark" flex="30">
<form ng-cloak>
<md-toolbar>
<div class="md-toolbar-tools">
<h2>New Mark</h2>
<span flex></span>
<md-button aria-label="close" class="md-icon-button" ng-click="hide()">
<ng-md-icon icon="cancel"></ng-md-icon>
</md-button>
</div>
</md-toolbar>
<div class="md-dialog-content">
<form name="studentForm" ng-submit="dialog.ok()">
<div layout="column" layout-sm="column" >
<div class="ms-TextField">
<div class="ms-TextField">
<label class="ms-Label">Mark</label>
<input required min="1" max="{{::passedData.totalmark}}" valid-number ng-model="student.mark" limit-to-max required class="ms-TextField-field">
<span class="ms-TextField-description">
<span ng-if="errors.title">{{::errors.title[0]}}</span>
</span>
</div>
</div>
<button aria-label="submit" ng-click="answer(student)"
class="g-button blue">0K
</button>
</form>
</div>
</form>
</md-dialog>
i'm not sure
but you have two tag form
and
and on submit (or click) two function are called, dialog.ok() and answer(student)
are you sure dialog.ok() don't hide the modal?
I have this simple working form, but when I put this in a $mdDialog it doesn't disable the submit button anymore... it basically ignores the networktypeForm.$invalid Is this common or is there a fix for this?
<form name="networktypeForm" ng-submit="add()" novalidate role="form">
<div class="md-dialog-content">
<md-input-container md-no-float flex>
<label>Element type</label>
<input flex ng-model="type" name="networktype" type="text" required="">
<div ng-messages="networktypeForm.networktype.$error">
<div ng-message="required">This is required</div>
</div>
</md-input-container>
</div>
<md-dialog-actions layout="row">
<md-button type="submit" class="md-primary md-raised" ng-disabled="networktypeForm.$invalid">
Add
</md-button>
</md-dialog-actions>
</form>
your requireds should be like this required not required="" or required="required"
For those still looking at this, I had a similar issue and mine was solved by removing the "novalidate" attribute.
I'm using the library angular-material for my personal project.
I'm trying to use the an input form like the one in the demo.
I think I've included all the library needed here:
...
<link rel="stylesheet" href="bower_components/angular-material/angular-material.min.css" type="text/css"/>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script src="bower_components/angular-messages/angular-messages.js"></script>
<script src="bower_components/angular-material/angular-material.min.js"></script>
...
</head>
<body>
<div ng-app="MyApp" ng-cloak>
<div ui-view></div>
</div>
</body>
And this is my login page
<div class="container page page-login">
<md-content class="form-login">
<md-toolbar>
<div class="md-toolbar-tools">
<h2>
<span>Login</span>
</h2>
</div>
</md-toolbar>
<br>
<div layout="column">
<form ng-submit="logIn()" class="md-inline-form">
<div flex>
<md-input-container class="md-block">
<label>Username or email</label>
<input ng-model="user.username">
</md-input-container>
</div>
<div flex>
<md-input-container class="md-block">
<label>Password</label>
<input ng-model="user.password" type="password">
</md-input-container>
</div>
<div flex layout="row">
<md-checkbox class="remember-me md-primary" name="remember" aria-label="Remember me">
Remember me
</md-checkbox>
<span flex></span>
<md-button type="submit" class="md-raised md-primary">Login</md-button>
<md-button ng-href="/login/google" class="md-raised md-warn fixed-btn-link">Google+</md-button>
</div>
</form>
</div>
</md-content>
<md-content class="form-signup">
<md-toolbar>
<div class="md-toolbar-tools">
<h2>
<span>Do not have an account yet? Signup now!</span>
</h2>
</div>
</md-toolbar>
<br>
<div layout="column">
<form ng-submit="signup()" class="md-inline-form">
<div flex>
<md-input-container class="md-block">
<label>Email*</label>
<input ng-model="new_user.username" required type="text">
</md-input-container>
</div>
<div flex>
<md-input-container class="md-block">
<label>Firstname</label>
<input ng-model="new_user.firstname" type="text">
</md-input-container>
</div>
<div flex>
<md-input-container class="md-block">
<label>Lastname</label>
<input ng-model="new_user.lastname" type="text">
</md-input-container>
</div>
<div flex>
<md-input-container class="md-block">
<label>Password*</label>
<input ng-model="new_user.password" ng-change="show_repeat_password_error = checkRepeatEmail()" required type="password">
</md-input-container>
</div>
<div flex>
<md-input-container class="md-block">
<label>Repeat password*</label>
<input ng-model="new_user.repeat_password" ng-change="show_repeat_password_error = checkRepeatEmail()" required type="password">
<md-caption ng-show="show_repeat_password_error">Passwords must match!</md-caption>
</md-input-container>
</div>
<div flex layout="row" layout-align="center" >
<md-button type="submit" class="md-raised md-primary">Signup</md-button>
</div>
</form>
</div>
</md-content>
</div>
When I visit the page for the first time this is the result where seems
that angular-material works well with button, checkbox and the rest
but it doesn't with the inputs:
However when i reload the page it works properly:
I have this problem also in other pages. What's wrong?
Thanks for your answers.
Here is a codepen link
I'm trying to make an Angular sidenav, that must be aligned in a row with some form (which contains search box) which are in a md-toolbar and below of toolbar.
I am having someother stuff, like in the link above, the p tag text should be immediately after the md-toolbar but my sidenav is occupying much space below and I am not able to adjust the layout.
Can anyone help me fixing this out?
Got it fixed. Actually i was trying to keep the sidenav content in the md-toolbar itself ,but when i separated it the issue fixed. here's the code
header.html file
<md-toolbar ng-controller="toolBarController">
<div class="md-toolbar-tools">
<img src="img/logo/oxkey.png">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div id="right">
<form class="navbar-form" role="search">
<div class="input-group">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
<input type="text" class="form-control" placeholder="Search Properties" name="q">
</div>
</form>
</div>
</div>
<button type="button" class="btn btn-info">For Landlords</button>
<md-button class="md-icon-button" ng-click="toggleRight()" ng-hide="isOpenRight()" class="md-primary">
Menu
</md-button>
</md-toolbar>
sidenav.html
<md-toolbar class="md-theme-light">
<h1 class="md-toolbar-tools">Menu</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-autofocus="">
</md-input-container>
</form>
<md-button ng-click="close()" class="md-primary">
Close
</md-button>
</md-content>
</md-sidenav>
My form with #formLogin ID not adapt to width parent. It's small, it's weird.
Help me please.
I want to adapt the form to parent.
I see it very small.
<body layout="row">
<div flex>
</div>
<div id="formLogin" layout="column" layout-align="center center" flex="40" flex-sm="90" flex-md="70">
<div>
<md-toolbar class="md-primary">
<div class="md-toolbar-tools">
<h2 class="md-flex">Acceso a la Intranet</h2>
</div>
</md-toolbar>
<md-content flex="auto" layout-padding>
<md-input-container>
<label>RUT</label>
<input ng-model="login.rut" type="text">
</md-input-container>
<md-input-container>
<label>Contraseña</label>
<input ng-model="login.contrasena" type="password">
</md-input-container>
<md-button class="md-raised" style="width:90%;">Ingresar</md-button>
</md-content>
</div>
</div>
<div flex>
</div>
</body>
By setting the attribute flex="grow" the element will fit its parent width and shrink automatically. Though you are also using layout-align="center center" which literally places the div vertically and horizontally in the center. I believe that's not exactly what you want, but if you read the documentation you'll get all your answers.