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.
Related
I am trying to use md-dialog with two 50% divs. How can I avoid the scroll bar in the bottom
So far I tried this:
And this is the result
<md-dialog id="testTemplate-dialog">
<div layout="row">
<md-input-container flex="50">
<label>Test1</label>
<input ng-model="$ctrl.test.Name" ng-required="true" />
</md-input-container>
<md-input-container flex="50">
<label>Test2</label>
<input ng-model="$ctrl.test.Description" ng-required="true" />
</md-input-container>
</div>
</md-dialog>
It looks like you need to increase the width of the matdialog: or you can just hide the overflow with css:
#testTemplate-dialog{
overflow: hidden;
}
I created a webpage with Angularjs and Laravel. It's an event page.
In my admin-panel I can manage all events.
When I click at "Bearbeiten" a new window appears.
At the bottom I can add/remove different attractions. When I submit the form, I want save the new data in the database, but I don't know how I can get the data from the formula. I tried different thinks and yes I used google.
When I click at "Bearbeiten" following code will be executed:
<md-dialog-content style="padding: 20px;">
<div layout-gt-sm="row">
<md-input-container class="md-block"flex-gt-xs>
<label>Name (Bsp: Schützenfest, Kirmes, Sommerdom)</label>
<input value="{{ $data['event']->name }}" name="event_name">
</md-input-container>
<md-input-container class="md-block">
<label>Stadt (Bsp: Hannover, München, Köln)</label>
<input value="{{ $data['event']->city }}" name="event_city">
</md-input-container>
</div>
<div layout-gt-sm="row">
<md-input-container class="md-block" style="margin: 0" flex-gt-xs>
<label>Straße</label>
<input value="{{$data['event']->street }}" name="event_street">
</md-input-container>
<md-input-container class="md-block" style="margin: 0" flex-gt-xs>
<label>Postleitzahl</label>
<input value="{{ $data['event']->zip->id }}" name="event_zip">
</md-input-container>
<md-input-container class="md-block" style="margin: 0">
<label>Webseite</label>
<input value="{{ $data['event']->website }}" name="event_website">
</md-input-container>
</div>
<div layout-gt-sm="row">
<md-input-container class="md-block" style="margin: 0" flex-gt-xs>
<label>Start (YYYY-MM-DD)</label>
<input value="{{$data['event']->start }}" name="event_start">
</md-input-container>
<md-input-container class="md-block" style="margin: 0" flex-gt-xs>
<label>Letzter Spieltag (YYYY-MM-DD)</label>
<input value="{{$data['event']->end }}" name="event_end">
</md-input-container>
</div>
<md-chips ng-model="mdDialogData[0]" name="event_attractions" readonly="false"
md-removable="true" md-max-chips="100" placeholder="Attraktionen">
<md-autocomplete
md-selected-item="mdDialogData[1].selectedItem"
md-search-text="mdDialogData[1].searchText"
md-items="item in mdDialogData[1].querySearch(mdDialogData[1].searchText)"
md-item-text="item"
placeholder="Attraktion suchen">
<span md-highlight-text="mdDialogData[1].searchText" style="width: 280px;">#{{ item }}</span>
</md-autocomplete>
<md-chip-template>
<strong style="margin-right: 15px;">#{{$chip}}</strong>
</md-chip-template>
</md-chips>
</md-dialog-content>
<md-dialog-actions layout="row">
<span flex></span>
<md-button ng-click="answer([#{{ mdDialogData[0] }}, '1', '2'])">
Änderungen speichern
</md-button>
<md-button ng-click="answer('useful')">
Abbrechen
</md-button>
</md-dialog-actions>
I am not really good with angular. Maybe are here some experts!
Since the data is already populating on the popup, I will assume you have correctly passed the data array to the function/module responsible for the popup.
Now, all you need is to update the array containing variable data fields that you are modifying. You will need to remove the data you chose to remove from the array, or keep adding if you are adding new values. You will then need to pass updated array as you click on ABBRECHEN and need to update the new values in the DB. The data removed from the array will create empty spaces in the array, you can either remove it on the Angular or Backend, or simply put the logic to skip if particular index is null/undefined.
I'm having problem with designing simple form.
<div layout="column" ng-cloak>
<md-content class="md-padding">
<form name="search">
<md-input-container>
<label>From where?</label>
<input name="from" ng-model="from" required>
</md-input-container>
<md-input-container>
<label>To where?</label>
<input name="to" ng-model="to" required>
</md-input-container>
<md-datepicker ng-model="date" md-placeholder="When?" ng-required="true" required></md-datepicker>
<md-input-container>
<md-button class="md-raised md-primary">Search</md-button>
</md-input-container>
</form>
</md-content>
</div>
This is how it looks, I don't know am I doing something wrong? I'm new to this framework. I want all inputs to be aligned to same base line, and I wan't to add icons in front of text inputs.
There are known issues with input alignment at the moment. You would have to tweak some margins if you want to align it yourself.
https://github.com/angular/material/issues/6636
https://github.com/angular/material/issues/6219
You can get icons in the input containers by specifying a <md-icon>.
<md-input-container class="md-icon-float md-block">
<label>Name</label>
<md-icon md-svg-src="img/icons/ic_person_24px.svg" class="name"></md-icon>
<input ng-model="user.name" type="text">
</md-input-container>
Check the documentation for more input examples.
Your structure has only one md-content under the layout="column". To stack the md-input-container and md-datepicker items you would need to add layout="column" to the form tag <form name="search" layout="column">which is the tag that is the parent to the tags your want to stack in a column.
<div layout="column" ng-cloak>
<md-content class="md-padding">
<form name="search" layout="column">
<md-input-container>
<label>From where?</label>
<input name="from" ng-model="from" required>
</md-input-container>
<md-input-container>
<label>To where?</label>
<input name="to" ng-model="to" required>
</md-input-container>
<md-datepicker ng-model="date" md-placeholder="When?" ng-required="true" required></md-datepicker>
<md-input-container>
<md-button class="md-raised md-primary">Search</md-button>
</md-input-container>
</form>
</md-content>
</div>
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.
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 :)