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.
Related
I am trying to center align the Input/Edit Text in the card using the layout-align attribute. However due to my ignorance and infancy (started learning today), I am unable to figure out why the Edit Text won't get center aligned inside this card View.
<div flex="50" layout="row" layout-align="center">
<md-card flex="50">
<md-input-container layout-align="center center" class="md-block" flex="50">
<input required type="text" placeholder="Observation Number" ng-model="learningCenter.observations.obsNum" />
</md-input-container>
</md-card>
</div>
Demo here: https://codepen.io/camden-kid/pen/zBQZLW?editors=1010#0
According to the material guideline, you need to place the input-container in a row element,
<md-card flex="50">
<div layout="row" layout-align="center center">
<md-input-container flex="50">
<input required type="text" placeholder="Observation Number" ng-model="learningCenter.observations.obsNum" />
</md-input-container>
</div>
</md-card>
DEMO
In order to center the md-input-container you should surround it by a div with a layout="row". This will do the trick to align it horizontally, however in order to align it vertically you need to give your div some height. Your md-card should look something like this: (note that you can give a height of your choice depending on how you want the md-input-container to align vertically)
<md-card flex="50">
<div layout="row" layout-align="center center" style="min-height: 100%">
<md-input-container class="md-block" flex="50">
<input required type="text" placeholder="Observation Number"
ng-model="learningCenter.observations.obsNum"/>
</md-input-container>
</div>
</md-card>
Here is a working fork of your code.
I have the following tabs inside my project but my problem that the tabs is not cover all the space
<fieldset class="form-group userEditGrid" ng-if="proj.checkEditProjectPanelCriteria(proj.selectionRow)" style="top:42%; height: 55%; !important">
<legend style="color:#d77509;font-weight:bold; border:0px; width:10%;" > {{proj.getMode()}}</legend>
<div ng-cloak="" class="tabsdemoDynamicHeight">
<md-content>
<md-tabs md-dynamic-height="" md-border-bottom="" md-selected="proj.selectedLevelTabs" >
<md-tab label="General Information" ng-disabled = "proj.isFireProtectionPanelOpen() || proj.isAddDocumentPanelOpen()">
<form name="editForm">
<md-content class="md-padding">
<div class="row" disable-all = "proj.ViewMode == 1">
<div class="row">
<div class="col-sm-2" ng-class="{ 'has-error': editForm.projanyname.$dirty && editForm.projectname.$error.required }">
<md-input-container class="md-block" >
<label for="projectname">Project Name *</label>
<input type="text" name="projectname" id="projectname" class="form-control" ng-model="proj.copyProjectRow.projectName" required="">
<span ng-show="editForm.projectname.$dirty && editForm.projectname.$error.required" class="help-block">project name is required</span>
</md-input-container>
</div>
</div>
</div>
</md-content>
</form>
</md-tab>
<md-tab>
<md-content class="md-padding">
<div class="row">
<jsp:include page="levels/level1.jsp" />
</div>
</md-content>
</md-tab>
</md-tabs>
</md-content>
</div>
</fieldset>
How can I make the length of the tabs take up all the space?
NOTE: I call this file form other jsp file
<div>
<jsp:include page="editProject.jsp" />
</div>
This is how I do to fill 100% height of the md-tab body:
First of all we need to create a CSS class to make first child of md-tab-content 100% height:
md-tab-content > div {
height: 100%;
}
Then the structure of a tab must be like this:
<md-tab>
<md-tab-label>Tab title label</md-tab-label>
<md-tab-body>
<div layout-fill layout="column">
<p>This will be full height</p>
</div>
</md-tab-body>
</md-tab>
Note that we must use layout-fill on the container inside <md-tab-body> to make it grow with 100% height. If we need to have more children layouts inside our container we must use layout="column"to make them grow vertically and use flexattributes as we need our layout structure.
I hope this solve your problem! It's probably impossible to make md-tab-bodycontent grow only using flex and not using CSS classes.
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>
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 :)