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>
Related
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
I created a bootstrap modal, I am looking for possible solution to make my modal content change dynamically.. here is my modal
<div class="modal fade" id="signupmodal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>Sign up or log in</h4>
</div>
<div class="modal-body">
<a class="btn btn-block btn-social btn-facebook btn-lg">
<i class="fa fa-facebook"></i> Sign in with Facebook
</a>
<h4 style="text-align:center;"><b>OR</b></h4>
<a class="btn btn-success btn-lg btn-block" data-toggle="modal" data-target="#loginmodal">LOG IN</a>
<a type="button" class="btn btn-link btn-md" data-toggle="modal" >Create Account</a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-sm" data-dismiss="modal"><b>Close</b></button>
</div>
</div><!--modalcontent-->
</div><!--modaldialog-->
</div><!--modalfade -->`
when i click the log in button i want to change my modal-body content to this login form
<form>
<div class="form-group">
<label for="inputEmail">Email / Username</label>
<input class = "form-control" type="email" id="inputEmail"placeholder="Email">
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input class = "form-control" type="password" id="inputPassword" placeholder="Password">
<a type="button" class="btn btn-link btn-sm">Forgot password</a>
</div>
<div class="form-group">
<a type="button" class="btn btn-info btn-md">Log in</a>
</div>
</form>
THANK YOU SO MUCH!
Just look at the code and you will know the solution .
Just remember that it is not necessary that things you don't see on browser can't be there. For example, in your case what you want to do is to click on login and code from some where else should be loaded to your modal-body div where in this case it is not necessary to do so rather then you can do what i have show in snippet.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="modal-body">
<div id="initial-content">
<a class="btn btn-block btn-social btn-facebook btn-lg">
<i class="fa fa-facebook"></i> Sign in with Facebook
</a>
<h4 style="text-align:center;"><b>OR</b></h4>
<a class="btn btn-success btn-lg" onclick="$('#login-content').show();$('#initial-content').hide();">LOG IN</a>
<a class="btn btn-success btn-lg" type="button" class="btn btn-link btn-md" data-toggle="modal">Create Account</a>
</div>
<div id="login-content" style="display :none;">
<a class="btn btn-success btn-lg" onclick="$('#login-content').hide();$('#initial-content').show();$('#form-id').trigger('reset');"><i class="fa fa-arrow-circle-left" aria-hidden="true"></i>Back</a>
<form id="form-id">
<div class="form-group">
<label for="inputEmail">Email / Username</label>
<input class="form-control" type="email" id="inputEmail" placeholder="Email">
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input class="form-control" type="password" id="inputPassword" placeholder="Password">
<a type="button" class="btn btn-link btn-sm">Forgot password</a>
</div>
<div class="form-group">
<a type="button" class="btn btn-info btn-md">Log in</a>
</div>
</form>
</div>
</div>
And as suggested by others use bootstrap dialog. But in that case also looking at your requirement your code will also remain same until and unless you want to show login button somewhere rather then modal-body. No doubt that plugin will make you code way more easy to understand and edit then ever before.
You can:
Put the form HTML into a Javascript variable or into a hidden div
Make a jQuery function and on click of the Login button load the output of the form HTML.
I suggest trying bootstrap-dialog, it's a great tool that simplifies the work to do for displaying dialogs.
See the Manipulating Dialog Message section for how to change your dialog content dynamically, there is a setMessage functionality:
BootstrapDialog.show({
title: 'Default Title',
message: 'Click buttons below.',
buttons: [{
label: 'Message 1',
action: function(dialog) {
dialog.setMessage('Message 1');
}
}, {
label: 'Message 2',
action: function(dialog) {
dialog.setMessage('Message 2');
}
}]
});
In this plunk I have an Angular UI Datepicker that uses a template. I need to change the colors of the "Today", "Clear" and "Close" buttons but changing them in popup.html doesn't work. It should show gray, orange and blue buttons.
I changed from
<li ng-if="showButtonBar" class="uib-button-bar">
<span class="btn-group pull-left">
<button type="button" class="btn btn-sm btn-info uib-datepicker-current" ng-click="select('today', $event)" ng-disabled="isDisabled('today')">{{ getText('current') }}</button>
<button type="button" class="btn btn-sm btn-danger uib-clear" ng-click="select(null, $event)">{{ getText('clear') }}</button>
</span>
<button type="button" class="btn btn-sm btn-success pull-right uib-close" ng-click="close($event)">{{ getText('close') }}</button>
</li>
to
<li ng-if="showButtonBar" class="uib-button-bar">
<span class="btn-group pull-left">
<button type="button" class="btn btn-sm btn-default uib-datepicker-current" ng-click="select('today', $event)" ng-disabled="isDisabled('today')">{{ getText('current') }}</button>
<button type="button" class="btn btn-sm btn-warning uib-clear" ng-click="select(null, $event)">{{ getText('clear') }}</button>
</span>
<button type="button" class="btn btn-sm btn-primary pull-right uib-close" ng-click="close($event)">{{ getText('close') }}</button>
</li>
Note that I changed the button class names to change the color, but when I inspect in the browser, the datepicker is still using the old classes. How to fix this?
To set a custom popup template use datepicker-popup-template-url attribute, for example:
<input datepicker-popup-template-url="popup.html" type="text" class="form-control" is-open="true" ng-model="dt" uib-datepicker-popup="MM-dd-yyyy"
datepicker-options="dateOptions" close-text="Close" popup-placement="bottom-left" on-open-focus="false" />
Demo
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.