I use bootstrap selectpicker (http://silviomoreto.github.io/bootstrap-select/)
I am trying to enlarge the select box size by doing:
<select class="selectpicker input-lg">...</select>
If I add "input-lg" to the select input, selectpicker overrides it and the select box isn't resized.
How to overcome this problem?
See http://www.bootply.com/107358# for example.
You can use the style option on the selectpicker..
style:'btn-lg'
http://www.bootply.com/127059
If you like to add it inline then use data-style="input-lg btn-default" or data-style="btn-lg btn-default"
<select name="" class="form-control input-lg selectpicker" data-title="Select Time" data-style="input-lg btn-default">...</select>
Related
Sounds so simple but I've tried quite a few things and none work.
I'm using Angular 4 and my form is template-driven:
<form #form="ngForm" novalidate>
<label for="insz">{{ 'SEARCH_PAGE.searchInszNumber' | translate }}</label>
<input type="text" name="insz" [placeholder]="'SEARCH_PAGE.searchInszNumber' | translate" #input required>
<button (click)="onSearch(input.value)" ><span>{{'SEARCH_PAGE.search' | translate }}</span></button>
</form>
I want to disable the button when the (one and only) input field is empty.
You are missing ngModel in your input, for your input field to actually be a form control:
<input type="text" name="insz" ngModel
[placeholder]="'SEARCH_PAGE.searchInszNumber' | translate" #input required>
and then you need to disable the button of course if form is not valid:
<button [disabled]="!form.valid" (click)="onSearch(input.value)" >Submit</button>
You could take a look at reactive forms. I had no knowledge of them until a week ago, but they're so powerful !
This means all you need to do is add a Validator (Validators.required in your case), and add a disabled condition to your button. And that's it, you're set.
This is a very simple and probably scilly question but I can't figure it out. I need a label to be on the same line as the associated select, using Bootstrap CSS. The select keeps 'jumping' below the label if I reduce window's width. How is it possible to control this behaviour using Bootstrap classes? I would need to keep both on the same line, whatever window's width is.
Code sample:
<form class="form-inline">
<div class="form-group">
<label for="example">Year</label>
<select class="form-control" id="example">
<option>2016</option>
<option>2015</option>
</select>
</div>
</form>
See on JS Fiddle here.
Your current solution is default, but you could also make use of columns inside the form. In the next article in bootstrap columns are used, see: http://getbootstrap.com/css/#forms-horizontal
What you are looking for is:
<form class="form-horizontal">
<div class="form-group">
<label for="example" class="col-xs-2 control-label">Year</label>
<div class="col-xs-10">
<select class="form-control" id="example">
<option>2016</option>
<option>2015</option>
</select>
</div>
</div>
</form>
I'm trying to force a <label/> and its <input/> to stay on the same line.
I'm using the form-control class to make the <input/> pretty. However, when I do so, it REALLY wants to put itself on a separate line. I'm avoiding using rows and columns because I want the label right next to the textbox, not to move around depending on the size of the screen.
<div>
<label class="form-label">Search</label>
<input type="text" class="form-control">
</div>
I want this:
Search [______________________]
I get this:
Search
[_____________________]
How do I force them to stay on the same line?
http://embed.plnkr.co/qA2s5RGRpvfRa7rhiq1n/preview
What you are looking for is referred by Bootstrap as an inline form or horizontal form.
<form class="form-inline" role="form">
<div class="form-group">
<label class="form-label">Search</label>
<input type="text" class="form-control">
</div>
</form>
Make sure your form has the form-inline class on it and realistically they should be wrapped in a form-group. The inline form make everything in one line.
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">Search</label>
<div class="col-sm-10">
<input type="text" class="form-control">
</div>
</div>
</form>
When using form-horizontal, the form-group acts like a row, so you can move content to separate lines :) With that, you would need to use grid properties so the label/input is properly aligned.
With Bootstrap 3, form input element size does not change as specified by size attribute, code snippet:
<input class="form-control" id="exampleInputEmail1" placeholder="Enter email" type="email" size="50">
I understand that there are workarounds to shorten the length of an input element but, help me understand why doesn't it work with size attribute of input element?
Working code at bootply.
Thanks!
There are a couple things you could do. You could use Bootstrap's col-* classes to change how your form lays out, or you can either modify the CSS or add inline styles to your inputs (such as <input ... style="width:200px;">).
I would personally try to use the col-* classes for consistency, even though it adds a bit more markup to your pages. As an example, something like this:
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1" class="col-sm-4">Email address</label>
<div class="col-sm-8">
<input class="form-control" id="exampleInputEmail1" placeholder="Enter email" size="50" type="email">
</div>
</div>
...
I'd also try to follow the documentation and examples from the Bootstrap docs.
if you are using bootstrap 3 try placing your inputs in a div
<div class="col-md-6">
<input class="form-control" id="exampleInputEmail1" placeholder="Enter email" type="email" />
</div>
If you're using Visual Studio then you might want to remove Microsoft's defaults in the Site.css which contains:
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
This example seems simple enough, I just can't seem to figure out why it is not working (I don't want to use ng-options because that doesn't work with select2, a plugin I want to use once I get this figured out):
HTML:
<div ng-app="myApp">
<div ng-controller="MyCtrl">
selectedNumber: {{selectedNumber}}
<select ng-model="selectedNumber">
<option ng-repeat="number in numbers" value="{{number}}">{{number}}</option>
</select>
<div ng-repeat="number in numbers">
{{number}}
</div>
</div>
</div>
AngularJS:
var app = angular.module('myApp', []);
app.controller('MyCtrl', function($scope) {
$scope.numbers = [1, 2];
$scope.selectedNumber = 2;
});
When inspect the element it looks like this:
<select ng-model="selectedNumber" class="ng-pristine ng-valid">
<option value="? number:2 ?"></option>
<!-- ngRepeat: number in numbers -->
<option ng-repeat="number in numbers" value="1" class="ng-scope ng-binding">1</option>
<option ng-repeat="number in numbers" value="2" class="ng-scope ng-binding">2</option>
</select>
I am guessing the extra "<option value="? number:2 ?"></option>" is causing this issue but I am not sure how to get rid of it. I also created a jsfiddle of this in action.
The reason you see that is because your select is bound to an item that is not contained in its options. Although you are adding options via a ng-repeat I suspect that the directive won't work and is not designed to work this way:
Here is a reference for why that extra value is coming up.
AngularJS - extra blank option added using ng-repeat in select tag
I think you have two options:
1. Write your own directive
2. Use the built in ng-options and try to make it work with your plugin
Here is a reference: https://github.com/angular/angular.js/issues/639
and a fiddle from that issue: http://jsfiddle.net/GTynf/3/
Those will probably point you in the right direction for a solution.