This snippet of code I am using as template:
<div class="input-group input-group-sm date-time-with-arrows" style="width:100%">
<span class="input-group-btn">
<button class="btn btn-default" ng-click="prevDay()"> <i class="fa fa-angle-left "></i></button>
</span>
<div id="input" class="input-group input-group-sm nested-group" ng-model="model">
<input class="form-control input-sm" ng-disabled="disabled" type="text" ng-attr-placeholder="{{configuration.noSelectionLabel}}" />
<span class="input-group-btn after-date-input">
<button class="btn btn-default pick-cal" ng-disabled="isDisabled" type="button">
<span class="glyphicon glyphicon-calendar"></span>
</button>
</span>
</div>
<span class="input-group-btn after-date-input">
<button class="btn btn-default" ng-click="nextDay()"> <i class="fa fa-angle-right"></i></button>
</span>
</div>
Note functions in tags button prevDay() and nextDay(). When I change date in input and press enter, prevDay() function is called and I have no idea why.
If you don't specificy a type="button" for a <button>, it will default as a submit button.
The button with function prevDay() on it is the first one, which will be used when you hit enter.
Just add type="button" to your <button>s and it will work.
I almost got insane for this just a couple of days ago...
The reason is that angular submits form on click of every button that is not of type="button".
If you change to <button type="button" class="btn btn-default" ng-click="nextDay()"> <i class="fa fa-angle-right"></i></button> it should work.
Related
I have run into an issue I hope you can help solve.
I have a button group which when the browser expanded 100% wraps around the label. What is the best method to stop this happening. As I do not want the button group wrapping the label.
see html below.
<div class="form-group">
<label for="selectme" class="form-control-label">add and remove me</label>
<div class="btn-group btn-group-sm" role="group">
<input name="selectme" id="selectme" placeholder="add and remove me" class="form-control" type="text">
<button onclick="addItem()" type="button" class="btn btn-success btn-sm">
<i class="fa fa-plus-circle"></i> Add
</button>
<button onclick="removeItem()" type="button" class="btn btn-secondary btn-sm">
<i class="fa fa-minus-circle"></i> Remove
</button>
</div>
<ul class="list-group" id="my-list">
</ul>
</div>
Does simply adding <br> after your input solve your issue? like this:
<div class="form-group">
<label for="selectme" class="form-control-label">add and remove me</label>
<div class="btn-group btn-group-sm" role="group">
<input name="selectme" id="selectme" placeholder="add and remove me" class="form-control" type="text"><br>
<button onclick="addItem()" type="button" class="btn btn-success btn-sm">
<i class="fa fa-plus-circle"></i> Add
</button>
<button onclick="removeItem()" type="button" class="btn btn-secondary btn-sm">
<i class="fa fa-minus-circle"></i> Remove
</button>
</div>
<ul class="list-group" id="my-list">
</ul>
</div>
I am using slick slider and its methods 'slickPrev' and 'slickNext' inside bootstrap modal to slide some content manually.One slide has a form and everything works perfect until form input gains focus and then I am unable to go back to previous slide using the button that triggers 'slickPrev' method.
The problem occurs only on mobile browsers, so far chrome for android.
I've tried to reproduce the problem outside of the modal but it seems the problem occurs only inside of it as you can see in this jsfiddle: https://jsfiddle.net/3x4bum5h/1/ where
$('body').on('click','.back-to-content',function(){
$('.wl-items-swipe').slick('slickPrev');
$('body').find('.modal-footer .btn-group').html('<button type="button" class="btn btn-default" data-dismiss="modal">Close <i class="fa fa-times"></i></button><button type="button" class="btn wl-next-step">Next step <i class="fa fa-arrow-right"></i></button>');
});
only makes the input lose focus otherwise it works as it should when no focus on input.
Ok I've found a solution.To make it work I had to remove the buttons that trigger slides from the footer and put them inside the slides.
Here is the working fiddle: https://jsfiddle.net/yjex03gf/
<div class="wl-content">
<p id="some-content">Lorem ipsum dolor sit amet.</p>
<div class="btn-group">
<button type="button" class="btn btn-default" data-dismiss="modal">Close <i class="fa fa-times"></i></button>
<button type="button" class="btn wl-next-step">Next step <i class="fa fa-arrow-right"></i></button>
</div>
</div>
<div class="wl-form">
<form id="w-items-form">
<div class="form-group">
<label for="email" style="font-weight:bold;font-size:14px">Email</label>
<input type="text" class="form-control wl-email" placeholder="Email"/>
</div>
<div class="form-group">
<label for="phone" style="font-weight:bold;font-size:14px">Phone<span style="color:red">*</span></label>
<input type="tel" class="form-control wl-phone" max="15" placeholder="Phone number"/>
</div>
<div class="form-group text-center">
<button type="button" class="btn btn-wl-submit" style="font-size:14px;">Send <i class="fa fa-send"></i></button>
</div>
</form>
<div class="btn-group">
<button type="button" class="btn btn-default back-to-content" style="border-right: 2px solid #ececec;"><i class="fa fa-arrow-left"></i> Back</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close <i class="fa fa-times"></i></button>
</div>
</div>
<style>
.modal{
display:block!important;
z-index:-1;
}
.modal-open .modal{
z-index:1080;
}
</style>
I'm using angular2 in my project,i have a service which returns this JSON Object :
items={"departure":"New York","arrival":"California","stations":[{"station":"toto"},{"station":"titi"},{"station":"tata"}]}
i tried to populate this JSON object in the UI like this picture shows:
here's what the result looks like
heres the code :
<div class="panel-body panelcolor">
<div *ngIf="items?.departure">
<span>{{items.departure}}</span> -->
<span *ngIf="items.stations.length > 0">
{{items.stations[0].station}}
</span>
<span *ngIf="items.stations.length === 0">
{{items.arrival}}
</span>
<div class="input-group spinner">
<input type="text" formControlName="price" class="form-control">
<div class="input-group-btn-vertical">
<button (click)="spinnerPriceUp()" class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button>
<button (click)="spinnerPriceDown()" class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button>
</div>
</div>
</div>
<div *ngFor="let item of items.stations; let i=index, let last = last">
<div *ngIf="!last">
<span>{{item.station}}</span> --> <span *ngIf="items.stations[i+1]">{{items.stations[i+1].station}}</span>
<div class="input-group spinner">
<input type="text" formControlName="price" class="form-control">
<div class="input-group-btn-vertical">
<button (click)="spinnerPriceUp()" class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button>
<button (click)="spinnerPriceDown()" class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button>
</div>
</div>
</div>
</div>
<div *ngIf="items?.arrival && items?.stations.length > 0">
<span>{{items.stations[items.stations.length-1].station}}</span> --> <span>{{items.arrival}}</span>
<div class="input-group spinner">
<input type="text" formControlName="price" class="form-control">
<div class="input-group-btn-vertical">
<button (click)="spinnerPriceUp()" class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button>
<button (click)="spinnerPriceDown()" class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button>
</div>
</div>
</div>
<button style="margin-left: 479px;"> Submit </button>
my problem is when i tried clic (up or down) the spinner to change the value of the textBox, all the textBoxes change its value.can anyone help please to fix this problem ? I tried to use formgroup to fix this issue but i didnt manage to fix it.
I am unsure what's inside you're spinnerPriceUp() and spinnerPriceDown() functions.
You are rendering textBox from inside of a ngFor loop.
That is why all the textboxes rendered from this loop are getting
targeted for the value change.
A way to fix this is by assigning dynamic IDs to you're
element.
<input [attr.id]="'textbox' + i">
'i' being index & 'textbox' is some text for the ID.
now you have unique ids to your textboxes. Further, you can pass these IDs to the functions performing the update.
Hope this solves you're issue
Plunker.
In this plunker I want to keep lable names on top of textboxes. How can I keep lables for the textboxes.
<a class="btn btn-success btn-xs" data-nodrag ng-click="toggle(this)"><span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed}"></span></a>
<input type="text" ng-model="item.rowId"> <input type="text" ng-model="item.name">
<a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="remove(this)"><span class="glyphicon glyphicon-remove"></span></a>
<a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="newSubItem(this)" style="margin-right: 8px;"><span class="glyphicon glyphicon-plus"></span><span class="glyphicon glyphicon-plus" style='margin-left:4px'></span></a>
<a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="addParentRow(this)" style="margin-right: 8px;"><span class="glyphicon glyphicon-plus"></span></a>
I guess you're trying to prevent changes on rowId element.
In that case just add ng-disabled="true" to that input:
<input type="text" ng-model="item.rowId" ng-disabled="true">
I hope this will help u
Demo
CSS
label {display:block;}
textarea { display:block;}
HTML
<label for="title">Title: </label><textarea rows="5" id="title" name="title"></textarea>
I'm trying the access the input field value using ng-model searchQuerybut it's not getting set. After removing typehead and typeahead-editable it works fine.
<div class="col-md-3">
<div class="input-group" class="pull-right" style="margin: 10px">
<input type="text" name="input" class="form-control"
placeholder="Get quote..." ng-model="searchQuery"
ng-controller="TypeaheadController"
typeahead="script as script.symbol for script in getSymbols($viewValue)"
typeahead-editable="false">
Value - {{searchQuery}}
<span
class="input-group-btn"> <a class="btn btn-default"
type="button" data-toggle="modal" data-target="#search-popup">
<span
class="glyphicon glyphicon-chevron-down">
</span>
</a>
<a class="btn btn-default" type="button"
ng-href="#/show-details/{{searchQuery}}"> <span
class="glyphicon glyphicon-search"></span>
</a>
</span>
</div>
</div>
Thanks for your help.
Move your ng-controller="TypeaheadController" statement to parent div, it will work fine.