While designing a form using Angular Material I noticed that the <md-select> directive is not aligned with the other input controls. See below:
I literally copied the code from the example on the Angular Material page, and added the <md-select>. Here is my code:
<div layout="column" layout-padding>
<md-content>
<form>
<div layout layout-sm="column">
<md-select placeholder="Title" ng-model="vm.title">
<md-option value="Mr">Mr.</md-option>
<md-option value="Mrs">Mrs.</md-option>
<md-option value="Ms">Ms.</md-option>
</md-select>
<md-input-container flex>
<label>Last Name</label>
<input ng-model="vm.lastName">
</md-input-container>
<md-input-container flex>
<label>First name</label>
<input ng-model="vm.firstName">
</md-input-container>
</div>
<md-input-container flex>
<label>Address</label>
<input ng-model="vm.address">
</md-input-container>
</form>
</md-content>
I tried adding an <md-input-container> with no luck.
My mistake, I discovered this post on GitHub straight after posting: apparently it has already been fixed in the one of the latest commits to master.
Related
I have 3 containers which contain an input and a span. The span width can change dynamically because I will be adding localization so I don't know the max width of the text. Therefore, is there a way that I can set all spans to be the same width without setting a fixed width or using Javascript? Preferably using Angular Material.
See example here: http://codepen.io/cmacdonnacha/pen/PzWWda
<body ng-app="myApp" ng-controller="AppCtrl">
<div layout="column">
<md-input-container md-no-float layout="row">
<span>From:</span>
<input type="email">
</md-input-container>
<md-input-container md-no-float layout="row">
<span>To:</span>
<input type="email">
</md-input-container>
<md-input-container md-no-float layout="row">
<span>Cc:</span>
<input type="email">
</md-input-container>
</div>
</body>
Thanks!
Try to use div element for each md-input-container and use span with flex attribute. Here is the code for that.
<div layout="column">
<div layout="row" flex layout-align="start center">
<span flex="initial">From:</span>
<md-input-container flex>
<input type="from">
</md-input-container>
</div>
<div layout="row" flex layout-align="start center">
<span flex="initial">To:</span>
<md-input-container flex>
<input type="email">
</md-input-container>
</div>
<div layout="row" flex layout-align="start center">
<span flex="initial">Subject:</span>
<md-input-container flex>
<input type="subject">
</md-input-container>
</div>
You can define the value flex as desired to get the required result. Here is the working code. http://codepen.io/next1/pen/yJgKBR
Edit: As you will use inital as flex value, span element will only use the space required by it but you will lose the alignment in that way.
Following the provided documentation in angular material, I have setup a working autocomplete directive.
The required validation is being shown in the nested error message "div", but there is no effect on the parent form.
The parent form seems to be valid even for empty value in autocomplete.
<form ng-submit="ngSubmit()" layout="column" class="md-padding"
name="itemsForm" flex>
<md-input-container>
<label>Code *</label>
<input type="text" name="code" required ng-model="ngModel.code"/>
</md-input-container>
<md-autocomplete flex
required
md-input-name="author"
md-search-text="searchText"
md-search-text-change="ngModel.author = (searchText)"
md-selected-item-change="ngModel.author = item"
md-items="item in filterAutocomplete(searchText)"
md-item-text="item"
md-floating-label="Author *">
<md-item-template>
<span md-highlight-text="ctrl.searchText">{{item}}</span>
</md-item-template>
<div ng-messages="autocompleteForm.autocomplete.$error">
<div ng-message="required">This field is required</div>
</div>
</md-autocomplete>
<md-button class="md-primary" type="submit"
ng-disabled="itemsForm.$invalid"
ng-class="{'md-raised': itemsForm}">
Save
</md-button>
</form>
How can I achieve the similar behaviour to normal required input fields in side a form, when using md-autocomplete?
There have been some commits in the past few days that address this issue. It is fixed in master I believe.
https://github.com/angular/material/issues/7350
https://github.com/angular/material/issues/5896
You can try this version:
https://cdn.gitcdn.link/cdn/angular/bower-material/v1.0.6-master-3310aa9/angular-material.css
https://cdn.gitcdn.link/cdn/angular/bower-material/v1.0.6-master-3310aa9/angular-material.js
I'm making a multi-page web app. I want it to have a left and right panel that are available no matter what page you're on. I managed to do that but the contents don't seem like they have the jQuery CSS rules applied to them. I did
$("[data-role=panel]").panel().enhanceWithin();
And that made my panel work... kinda of the labels for my check marks aren't formatted like they were when the panel wasn't external. I guess I'll just put the code up. I swear I've searched this site forever trying to find answers.
$(function () {
$("[data-role=panel]").panel().enhanceWithin();
});
<div data-role="panel" id="RoomInfoPanel" data-display="overlay" data-theme="b" data-position="right" data-dismissible=false>
<div data-role="main" class="ui-content">
<h2 id="roomNumberHeader">Panel Header..</h2>
<p class="main" id="CrewText">Crew Assigned:</p>
<select id="selectCrew" >
<option>Select Crew</option>
</select>
<div id="cblist" style="display:inline">
<label for="#compChk" class="ui-content">Completed</label>
<input type="checkbox" value="first checkbox" id="compChk" />
<input type="checkbox" value="first checkbox" id="paidChk" />
<label for="#paidChk">Paid</label>
</div>
<div data-role="main">
Edit Crews
</div>
</div>
</div>
Remove # in for attribute. It should be for="checkboxID" without hash.
i've got this code using Jquery Mobile :
<div role="main" class="ui-content">
<form action="/" method="post">
<fieldset data-role="controlgroup">
<input type="checkbox" name="checkbox-1a" id="checkbox-1a" checked="">
<label for="checkbox-1a">Cheetos</label>
<input type="checkbox" name="checkbox-2a" id="checkbox-2a">
<label for="checkbox-2a">Doritos</label>
<input type="checkbox" name="checkbox-3a" id="checkbox-3a">
<label for="checkbox-3a">Fritos</label>
<input type="checkbox" name="checkbox-4a" id="checkbox-4a">
<label for="checkbox-4a">Sun Chips</label>
</fieldset>
</form>
</div>
The problem is that when i load the page the codes looks like this :
<div class="ui-controlgroup-controls ">
<div class="ui-checkbox">
I've skipped the whole code, the problem is in the
that should not be there.
Any idea about how to fix it?
This problem comes when copying and pasting the source code from their website.
In fact in this way you copy also invisible blank spaces which are converted as by the browser and make the last block go down.
To solve the issue simply remove all the spaces between the tags and all will be displayed correctly.
There are many ways you can remove the automatic default padding.
First
<div style="padding: 0;">...</div>
Second: Define an id for the div tag and set padding to 0 in css
<div id="myID">
#myID{ padding:0; }
So I'm building a web application using Jquery Mobile and Phonegap. The app was working fine until I removed some input fields and drop down menus which became obsolete.
The problem now is that when I click on the last input field of the page & the ios keyboard activates, the footer bar is no longer fixed and there is a white gap between the footer bar and the ios keypad. When the keypad hides again I see the full page but the white gap is above the footer.
This doesn't seem to be a problem on the Android platform so I'm wondering if it is a CSS issue. Help is most certainly welcome. Here's the page code in question...
<div data-role="page" data-theme="f" id="">
<div data-role="header" class="ui-state-persist">
<h1>text</h1>
</div>
<div data-role="content">
<label for="">Text</label>
<input type="text" name="text" id="" value="" class="input-field required"/>
<label for="">Text</label>
<input type="text" name="" id="" value="" class="input-field required"/>
<label for="">Text</label>
<input type="text" name="" id="" value="" class="input-field required"/>
<label for="">Text</label>
<input type="" name="" id="" value="" class="input-field required"/>
</div>
<div data-role="footer" class="ui-state-persist" style="min-height:42px;">
Done
</div>
Try the following code (using jQuery Mobile version 1.2.0):
<div data-role="page" data-theme="f" id="quickquote_insured">
<div data-role="header" class="ui-state-persist">
<h1>Contact Details</h1>
</div>
<div data-role="content">
<label for="quickquote-insured_initials">Initials:</label>
<input type="text" name="quickquote-insured_initials" id="quickquote-insured_initials" value="" class="input-field required"/>
<label for="quickquote-insured_surname">Surname:</label>
<input type="text" name="quickquote-insured_surname" id="quickquote-insured_surname" value="" class="input-field required"/>
<label for="quickquote-insured_phone_number">Mobile number:</label>
<input type="text" name="quickquote-insured_phone_number" id="quickquote-insured_phone_number" value="" class="input-field required"/>
<label for="quickquote-insured_email_address">e-Mail address:</label>
<input type="email" name="quickquote-insured_email_address" id="quickquote-insured_email_address" value="" class="input-field required"/>
<br>
</div>
<div data-role="footer" class="ui-state-persist" style="min-height:42px;">
Done
</div>
</div>
I know it may look simple, but I just added a <br> just under your email input field.
I think the problem is that, since your footer is "static", you need to "fill" your page.
For example, if you have few fields on your page and if you don't "fill" your page, you'll get the following result:
Hope this helps.