While learning Twitter Bootstrap 3 to create responsive web pages I faced a problem:
How to move element up from one row to another? I need something like col-md-push / col-md-pull but for vertical direction.
For example, on desktop screen element D is in second row, but on tablet it should be in first one:
Desktop:
| A | B | C |
| D | E | F |
Tablet:
| A | D |
| B | C |
| E | F |
Phone:
| A |
| D |
| B |
| E |
| C |
| F |
Thanks in advance!
Found the solution using nested columns. A and D elements are grouped in one column. On desktop screen (col-md) they occupy 12 columns each, so that D is placed below A. On tablet screen (col-sm) A and D are equal size (6) so that they fit in one row.
Complete code: http://jsfiddle.net/UNs25/1/
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-12">
<div class="row">
<div class="col-md-12 col-sm-6">
<input type="text" class="form-control" placeholder="A">
</div>
<div class="col-md-12 col-sm-6">
<input type="text" class="form-control" placeholder="D">
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<input type="text" class="form-control" placeholder="B">
<input type="text" class="form-control" placeholder="E">
</div>
<div class="col-md-4 col-sm-6">
<input type="text" class="form-control" placeholder="C">
<input type="text" class="form-control" placeholder="F">
</div>
</div>
</div>
Related
I try to hide a row-input using ng-show but doesn't work. The field works in cascade with form.purchase:
- The field is visible if form.achat = R (Renewal)
- The field is empty and masked if form.buy = N (New)
this is my html code:
<div class="form-group mode-update col-md-10 no-padding">
<label class="col-md-4 control-label font-normal"> {{
'field.investissement.nouveauRenouvellement' | translate }} </label>
<div class="col-md-8">
<div class="form-group mode-update col-md-12
no-padding">
<div class="radio-inline">
<label for="achatBudgetTrue">
<input ng-
disabled="disabledField" ng-checked="true" type="radio" ng-true-
value="A" ng-false-value="B" name="achatBudget" value="N" ng-
model="entity.achatBudget" id="achatBudgetTrue"{{
'field.investissement.achatBudget.nouveau' | translate }}
</label>
</div>
<div class="radio-inline">
<label for="achatBudgetFalse">
<input ng-change="operations.changeEntityField"
ng-disabled="disabledField" type="radio" name="achatBudget" value="R"
ng-model="entity.achatBudget" id="achatBudgetFalse">
{{
'field.investissement.achatBudget.renouvellement' | translate }}
</label>
</div>
</div>
</div>
</div>
<raw-input
property="field"
vertical="true"
ng-repeat="field in fields | updateParams:metadata |
filter : { fieldSet : 'fieldset.investissement.descriptif'} | filter : {
name : 'parcAncienBudget' }"
entity="entity"
on-update="operations.updateEntityField"
on-change="operations.changeEntityField"
metadata="metadata"
ng-show="entity.achatBudget =='R'"
mode="update"
ng-show = "false"
creating="creating"
style="{inputSize: 'col-md-10 no-padding'}">
</raw-input>
You have two times an ng-show-attribute in your attributes:
<raw-input
...
ng-show="entity.achatBudget =='R'"
...
ng-show = "false"
The value of the second overrides the value of the first, so the element is never shown, no matter what value entity.achatBudget has.
I add a function in js:
$scope.isBudgetAchatVisible = false;
$scope.ShowParc= function(value) {
$scope.isBudgetAchatVisible = (value == "R") ? true : false;
}
and in the view:
<div class="radio-inline">
<input ng-checked="true" ng-change="ShowParc('N')" ............... >
</div>
<input ng-change="ShowParc('R')".....................>
</div>
<raw-input
ng-if="isBudgetAchatVisible
..............
</raw-input>
I have a form that works well, and I would like to add filters to it.
For the moment I can search for a person by his first name, but I would like to be able to search also with his name, and his e-mail address.
{
fname : "paul",
name : "raoul",
mail : "raou#paul.com"
}
Here is my search form:
<form ng-controller="searchCtrl" id="search-form5" class="list" name="myForm" ng-submit="search()" ng-disabled="myForm.$invalid">
<label class="item item-input" id="search-search1" style="">
<i class="icon ion-search placeholder-icon"></i>
<input placeholder="Search" type="text" ng-model="form.fname" required>
</label>
<ion-list id="menu-list1">
<ion-item ng-repeat="item in list track by $index" ng-click="showCard(item)">{{ item.name | UpFirstLetter }} {{ item.fname | UpFirstLetter }}</ion-item>
</ion-list>
</form>
Thank you for your answers :)
To search by any matching string of any form property, search model can be like:
<input placeholder="Search" type="text" ng-model="filterBy.$" required>
Then apply this filter in the ng-repeat by:
<ion-item ng-repeat="item in list | filter : filterBy track by $index" ng-click="showCard(item)">{{ item.name | UpFirstLetter }} {{ item.fname | UpFirstLetter }}</ion-item>
just add a filter to the ng-repeat
<ion-item ng-repeat="item in list | filter : form.fname track by $index" ng-click="showCard(item)">{{ item.name | UpFirstLetter }} {{ item.fname | UpFirstLetter }}</ion-item>
I have a drop down box with a search box above it.
For example, if my drop down values are:
Apple
Banana
Pineapple
If I type apple in my search box, I expect the filter to show only Apple, but not both Apple and Pineapple. My code shows both Apple and Pineapple which I don't want.
Angular code:
<div class="form-inline">
<div class="input-group">
<input type="text" ng-model="itemSelectFilter" class="form-control">
<div class="input-group-addon"><span class="glyphicon glyphicon-search"></span></div>
</div>
</div>
<div class="list-group" id="itemSelectorList">
<a ng-repeat="i in items | filter:{title:itemSelectFilter}" class="list-group-item">
{{i.title}}
</a>
</div>
Here 'title' is Fruits.title.
I am working with ui-select, and whenever I press enter to select some searched results, the result is selected and the form directly goes on to submit. I cant figure it out, what is the problem.
Here is the HTML I'm using
<form>
<div class="form-group">
<label class="col-sm-3 control-label">Address</label>
<div class="col-sm-5">
<input type="text" ng-model="address.street" class="form-control" placeholder="e.g. NUST Campus, H-12">
<div class="form_wrapper_error">
<p ng-show='addressError'>{{addressError}}</p>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">City/Town</label>
<div class="col-sm-5">
<!-- <location-autocomplete bind-value="address.city" coordinates="cityAddInitialCoordinates" placeholder="e.g. Islamabad"> -->
<ui-select ng-model="$parent.address.city"
theme="select2"
reset-search-input="true"
title="Select City">
<ui-select-match allow-clear="true" placeholder="Select City">{{$select.selected}}</ui-select-match>
<ui-select-choices repeat="city as city in cities track by $index"
refresh="refreshLocation($select.search)"
refresh-delay="0">
<div ng-bind-html="city | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
<div class="form_wrapper_error">
<p ng-show='cityError'>{{cityError}}</p>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Zip</label>
<div class="col-sm-5">
<input type="text" ng-model="address.zip" class="form-control" placeholder="e.g. 44000">
<div class="form_wrapper_error">
<p ng-show='zipError'>{{zipError}}</p>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-8">
<button class="btn btn-primary buttt" ng-click="addAddress()">Add Address</button>
</div>
</div>
</form>
Solution Found: I was using <button>, and the default type of button is submit, so I had to specify the type="button", and the issue is fixed....
Reference: Found in UI-Select Pull Requests...
If anyone still struggles with this issue, I found a solution\work around.
Add skip-focusser="true" to your ui-select like so:
<ui-select ng-model="$parent.ngModel" theme="bootstrap" class="input-xs" skip-focusser="true">
<ui-select-match >{{$select.selected.description}}</ui-select-match>
<ui-select-choices repeat="item in options | orderBy :'code' | filter: $select.search">
<div ng-bind-html="item.description | highlight: $select.search"></div>
</ui-select-choices>
This will remove the focus from the select element and therfore the Enter key will not reopen the dropdown menu.
<div ng-init="qty=1;cost=2">
<b>Invoice:</b>
<div>
Quantity: <input type="number" ng-model="qty" required>
</div>
<div>
Costs: <input type="number" ng-model="cost" required>
</div>
<div>
<b>Total:</b> {{qty * cost | currency}} //may be change is required here
</div>
</div>
This Results in :
like ₹, £, ¥
You do this using the symbol parameter for the currency filter.
{{qty * cost | currency:"¥"}}
Check the reference: http://docs.angularjs.org/api/ng/filter/currency.