I am using select2() in <select multiple>. What I have is a placeholder in that select. What I am doing is initially I am hiding the select containing div and then I am making it visible. In this case initially placeholder not showing.
If we are not doing this hide and block thing then it is working fine.
FIDDLE
(EDITED) Sorry I read the question wrong. I thought it was about regular selects not multiples.
I've checked your fiddle.
This contains 2 multiples. <select multiple id="e1" style="width:100%" multiple data-placeholder="Choose country(s)*">. I don't know if this is intentional. But you should remove one.
The input element select2 has it's width set to 0px when you set display: none. You need to increase the width to an appropriate size.
I added $('.select2-input, .select2-default', $("#divid")).css('width', '100%'); to your code and this solved your issue.
Snippet (non-functional, needs select2 libraries):
$("#e1").select2();
$('.select2-input, .select2-default', $("#divid")).css('width', '100%');
$("#divid").css("display","block");
<div id="divid" style="display:none;">
<select id="e1" style="width:100%" multiple data-placeholder="Choose country(s)*">
<option value="AL">Alabama</option>
<option value="Am">Amalapuram</option>
<option value="An">Anakapalli</option>
<option value="Ak">Akkayapalem</option>
<option value="WY">Wyoming</option>
</select>
</div>
just add this class in your .css file.
.select2-search__field{width:100% !important;}
Related
I use the following code in my app with reactive forms.
If I uncomment the [multiple] line, the Choose ... option does not set the dformControl form control object back to status INVALID.
dformControl.multiple by the way returns false. Even if I change the commented line to [multiple]="false", still switching back to the Choose ... option does NOT set the form control status to INVALID.
<select class="form-control"
[id]="dformControl.key"
[formControlName]="dformControl.key"
/*[multiple]="dformControl.multiple"*/>
<option *ngIf="!dformControl.value"
value="">
Choose ...
</option>
<option *ngFor="let opt of dformControl.options"
[value]="opt.value"
[selected]="dformControl.value == opt.value">
{{opt.label}}
</option>
</select>
Bind to the multiple property at the select level to a boolean isMultiple. Then you can change it and the select will change as well. Take a look at the this, I change it using a button. plnkr
<select formControlName="cars" [multiple]="isMultiple">
<option></option>
<option *ngFor="let car of cars" >{{car}}</option>
</select>
It seems when adding the multiple property it is affecting the required validator. I was able to just add an extra validator and it worked as expected.
Validators.compose([Validators.required,Validators.pattern('.+')]
I would like to use a <select> in a form to let the user being able to update values among different <option>. I have used the technique from the guide here: https://angular.io/docs/ts/latest/guide/forms.html. Here is the sample I am talking about:
<div class="form-group">
<label for="type">Type :</label>
<select class="form-control" [(ngModel)]="order.type" ngControl="type">
<option *ngFor="#type of types" [value]="type">{{type}}</option>
</select>
</div>
In my order-details.component I have got an updateOrder() which calls the updateOrder() from myApp.services.
My problem is when I am trying to send the data from the form to the back-end: all the parts with an <input> are OK, but not those with <select> (it returns the original values, and not the one selected).
Does anyone have encountered this or a similar problem?
Thanks for your help!
There is a way to get the value from different options.
check this plunker
component.html
<select class="form-control" #t (change)="callType(t.value)">
<option *ngFor="#type of types" [value]="type">{{type}}</option>
</select>
component.ts
this.types = [ 'type1', 'type2', 'type3' ];
this.order = {
type: 'type1'
};
callType(value){
console.log(value);
this.order.type=value;
}
Been tackling this problem for a few hours.
Checked in the (incomplete) documentation to find an item in the NgSelectOption page called "ngValue"
Not sure if this is the intended use but it seemed to work fine.
So instead of using
[value]="item"
Use:
[ngValue]="item"
Just use ngModel on the select and ngModelChange event if you want to do something when it changes.
In fact I can't reproduce your problem. I created a plunkr with a very simple form with an input and a select. When I submit the form, I have actual values in the bound object. See this plunkr: https://plnkr.co/edit/5C3agW7QZfcrdt88QzSh?p=preview.
Feel free to tell me if I didn't correctly understand your problem.
Thierry
If you have static, hard-coded values for the select tag like below:
<select #quantity>
<option value="one">1</option>
<option value="two">2</option>
<option value="three">3</option>
<option value="four">4</option>
<option value="five">5</option>
</select>
You can do the following:
#ViewChild('quantity') quantity: ElementRef;
console.log(this.quantity.nativeElement.value); // will print value of the currently selected option
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.
I am using Zend 1.11.10 and I am trying to set a value in a dropdown list. My code is:
$state = new Zend_Form_Element_Select("mytest");
$state->setLabel("mytest")
->setName("mytest");
$state->addMultiOption('Pear','PE');
$state->addMultiOption('Banana','BA');
$state->addMultiOption('Orange','OR');
$state->addMultiOption('Kiwi','KI');
$state->setValue('Banana');
$this->addElement($state);
The problem is that the generated HTML code is:
<select id="mytest" name="mytest" style="opacity: 0;"><option value="PE">Pear</option><option selected="selected" value="BA">Banana</option><option selected="selected" value="OR">Orange</option><option selected="selected" value="KI">Kiwi</option></select>
It is making "selected" all options after "Banana". Is this a bug in Zend?
Looks to me like you're using a non-standard FormSelect view helper. For starters, your <option> value attribute and text values are reversed and you have no label attributes.
Eg, for
$state->addMultiOption('Pear','PE');
the generated markup should be
<option value="Pear" label="PE">PE</option>
I'd also hazard a guess that there's some JavaScript playing with the DOM due to the opacity style attribute.
Using your code exactly I get:
<select name="mytest" id="mytest">
<option value="Pear" label="PE">PE</option>
<option value="Banana" label="BA" selected="selected">BA</option>
<option value="Orange" label="OR">OR</option>
<option value="Kiwi" label="KI">KI</option>
</select>
this is also with 1.11.10. Are you using custom form classes or anything else that might be affecting it?
I have an HTML input element of type select. The height of the element is 28px. Without modifying the element with CSS, the text inside gets automatically vertically-aligned in all browsers except for IE8. In IE8 the select's text is in the bottom left corner of the element.
Does anyone know how to vertically-align the text inside an HTML select element?
Without your html it is hard to know exactly what you are styling. It sounds like you are using something like <input type="select" /> but that isn't actually valid html.
However, to vertically align the text in the middle you need to set the line-height to be the same figure as your height.
So in this case you would need to set line-height: 28px; to match height: 28px;.
For your html I would recommend either using:
<input type="text" /> if you are looking for a standard text input
or
If you are looking for a drop down selection:
<select>
<option value="Test1">Test 1</option>
<option value="Test2">Test 2</option>
</select>