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;
}
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 am working on md-input-container and I am trying change default asterisk color to red.
Plz take a look here
pen link
<div ng-controller="AppCtrl" layout="column" ng-cloak="" class="inputdemoErrors" ng-app="MyApp">
<md-input-container class="md-block">
<label>Description</label>
<input md-maxlength="30" required="" md-no-asterisk="" name="description" ng-model="project.description">
<div ng-messages="projectForm.description.$error">
<div ng-message="required">This is required.</div>
<div ng-message="md-maxlength">The description must be less than 30 characters long.</div>
</div>
</md-input-container>
<div layout="row">
<md-input-container flex="50">
<label>Client Name</label>
<input required="" name="clientName" ng-model="project.clientName">
<div ng-messages="projectForm.clientName.$error">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
<md-input-container flex="50">
<label>Project Type</label>
<md-select name="type" ng-model="project.type" required="">
<md-option value="app">Application</md-option>
<md-option value="web">Website</md-option>
</md-select>
</md-input-container>
</div>
<md-input-container class="md-block">
<label>Client Email</label>
<input required="" type="email" name="clientEmail" ng-model="project.clientEmail" minlength="10" maxlength="100" ng-pattern="/^.+#.+\..+$/">
<div ng-messages="projectForm.clientEmail.$error" role="alert">
<div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']">
Your email must be between 10 and 100 characters long and look like an e-mail address.
</div>
</div>
</md-input-container>
<md-input-container class="md-block">
<label>Hourly Rate (USD)</label>
<input required="" type="number" step="any" name="rate" ng-model="project.rate" min="800" max="4999" ng-pattern="/^1234$/">
<div ng-messages="projectForm.rate.$error" multiple="" md-auto-hide="false">
<div ng-message="required">
You've got to charge something! You can't just <b>give away</b> a Missile Defense
System.
</div>
<div ng-message="min">
You should charge at least $800 an hour. This job is a big deal... if you mess up,
everyone dies!
</div>
<div ng-message="pattern">
You should charge exactly $1,234.
</div>
<div ng-message="max">
{{projectForm.rate.$viewValue | currency:"$":0}} an hour? That's a little ridiculous. I
doubt even Bill Clinton could afford that.
</div>
</div>
</md-input-container>
<div>
<md-button type="submit">Submit</md-button>
</div>
<p style="font-size:.8em; width: 100%; text-align: center;">
Make sure to include ngMessages module when using ng-message markup.
</p>
</form>
The asterisk's default color is gray right next to"Client Name" label.(if you click the field, its color changes to red.) Is there any way that I can change the default color of the asterisk from gray to red?
thanks in advance,
Add the following to your CSS :
md-input-container.md-default-theme:not(.md-input-focused):not(.md-input-invalid) label.md-required:after, md-input-container:not(.md-input-focused):not(.md-input-invalid) label.md-required:after {
color:red;
}
For some reason just giving the following does not work :
label.md-required:after {
color:red;
}
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 have a small search bar which is hidden initally. With a ng-click i set "filter.show" to true and the searchbar becomes visible. As soon as this happens i want the text input inside to be focused automatically.
I'm using Angular 1.5 and Angular Material and found the focus-me option as presented below. But this doesn't work somehow and I don't understand what's the problem. Maybe someone can help me.
The html presented below uses the same controller for the button and the input.
<md-toolbar class="md-table-toolbar md-default" ng-show="filter.show && !selected.length" aria-hidden="false">
<div class="md-toolbar-tools">
<md-icon md-svg-icon="magnify"></md-icon>
<form flex="" name="filter.form">
<md-input-container class="md-block" flex="" style="margin-bottom:0">
<label>Search</label>
<input type="text" focus-me="filter.show" ng-model="query.filter" ng-model-options="filter.options" aria-invalid="false">
</md-input-container>
</form>
<button class="md-icon-button md-button md-ink-ripple" type="button" ng-click="removeFilter()">
<md-icon md-svg-icon="close"></md-icon>
<div class="md-ripple-container"></div>
</button>
</div>
</md-toolbar>
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>