I have a select that looks as follows:
<select id="select-full"
title="Make selection"
class="form-control form-custom input-sm"
name="Select"
ng-model="form.select"
ng-options="select.displayName as select.text for select in selects | orderBy:'text'">
<option value="">Any</option>
</select>
Some of the text populated by ng-options is very long, and so I plan to have the ones that would cause overflow to have trailing ellipses.
But I wanted to know if, additionally, there is a way to make it so that mousing over one of the options within the select to have a tooltip display the full entry? So that the user could inspect the full entry before making a choice. Whether it is in the HTML or angular controller doesn't matter.
If there isn't a way, that is a fine answer, but doing some searching hadn't yielded an answer as to whether exactly what I want to do here is doable.
Thanks!
You can use uib-tooltip as :
<span tooltip-append-to-body="true" uib-tooltip="{{select.displayName}}" tooltip-placement="right">{{select.displayName}}</span>
Here tooltip-append-to-body="true" will move your tooltip to parent scope so that it is not chopped off in selections div.
Learn more about it on Uib Angular
Related
I am creating a dropdown with AngularJS.
here is the code..
<div class="col-md-9">
<input type="text" placeholder="Enter Module" list="names"
ng-model="data.Name" />
<select id="names" class="form-control" ng-model="data.Name"
ng-change="SetCategory(data.Name)" name="name">
<option value='' disabled selected>------------- select an option ----------</option>
<option ng-repeat="e in BrData | filter:data.Name "
value="{{e.Name}}">{{e.Price}}</option>
</select>
</div>
NOTE: List is Dynamic and i am using AngularJS to get data.
I need To create a searchbar inside select tag.
But Input tag can't nested in select tag.What should I do?
You can use typeahead from UI Bootstrap: https://angular-ui.github.io/bootstrap/#!#typeahead
Or if you need more advanced features along with search like multi-select, select all, deselect all, disable options, keyboard controls and much more try this: http://dotansimha.github.io/angularjs-dropdown-multiselect/docs/#/main
The way I see it, there are three options here.
Option One - Input outside the dropdown
Get the input outside the dropdown, and filter the values based on that value from the outside. I know that this is not your intended functionality exactly, but it would save you some trouble.
Option Two - Use some kind of third party dropdown library
As Mohd mentioned https://angular-ui.github.io/bootstrap/#!typeahead is a good fit and UI select too
Option three - Create something of your own
It need not even be using <select> tag. This is by far the most difficult, but also the most customizable and suitable for individual needs. The select tag will not be used as it does not support input inside of it, so some high end css will need to be used, as well as some backwards compatibility multiple browser testing that the already made libraries have already done.
Dealing with the <select> nightmare
From the Docs:
<select> Element Technical summary1
Permitted content: Zero or more <option> or <optgroup> elements.
Tag omission: None, both the starting and ending tag are mandatory.
Permitted parents: any element that accepts phrasing content
The short answer is that <input> elements can not be placed inside <select> elements.
<datalist> Element2
The datalist element is intended to provide a better mechanism for this concept.
<input type="text" name="example" list="exampleList">
<datalist id="exampleList">
<option value="A">
<option value="B">
</datalist>
For more information, see
HTML combo box with option to type an entry
MDN Learn HTML Forms - Dealing with the select nightmare
Use select2 as a dynamic option instead of HTML select option:
here is link for select using js:
https://select2.org/tagging
I am displaying tag with number of options and every option contain two text separated by single space ,so what I want is one text should appear left side and second part should appear right side.
for example :
text 1234
I want text in dropdown should come left side and 1234 should come right side of option in dropdown so by which css property can acheive this for all <option></option>
<select id="" class="form-control ">
<option> Select options </option>
<option>text 1234</option>
<option>text 1234</option>
<option>text 1234</option>
<option>text 1234</option>
</select>
Select option element styling is very limited and custom layout is impossible. You'll need a replacement select control to achieve your goal. Take a look at selectize.js, select2, chosen plugins for a quick solution.
I just started learning angular 2 and making small web page.
One important requirement is to have expanded drop down list with check button.
The drop down list has to stay expanded, show 10 elements by default and support multiple selection. so I used multiple and size attribute for it. But I can't find a way to put checkbox in front of each element.
I also thought about using checkbox control instead of select option. But as there are so so many elements, I don't know how to make only 10 items visible with scroll bar.
Below is my code. Each group has array of element object. Can anyone help me please?
<div class="blahblah">
<div class="select-wrapping hide-list" >
<select class="wide" size="10" name="groups" multiple>
<optgroup *ngFor="let group of groups" label="{{group.name}}">
<option *ngFor="let element of group.elements" [value]="element.ID">
</optgroup>
</select>
</div>
</div>
Is there a simple way to get jaws to read all the options for a select, currently we have
<div class="mySelectLabel">
<label for="mySelectId" class="mySelectLabel">
<span class="required" aria-hidden="true" role="presentation">*</span>
<span class="offScreenText">Mandatory</span>
<span class="labelText">Are you old enough?</span>
</label>
</div>
<div class="myDivClass">
<select id="mySelectId" name="mySelectName">
<option value="">Please Select...</option>
<option selected="selected" value="Y">Yes</option>
<option value="N">No</option>
</select>
</div>
Currently jaws reads ... Are you old enough? Combo box Yes the client wants it to read all the options.
I figure I could output hidden text for jaws to read but it would be nicer if there was an aria setting or something similar I could apply.
This is one of basic navigation rules with JAWS.
Actually JAWS should read:
Are you old enough? Combo box Yes
If a user hears that this is a combo box, he/she knows (at least, should know) that in order to navigate he/she must press the Enter key in order to turn on the forms mode (unless the automatic forms mode is turned on). When in forms mode, he/she reviews the combo box with his/her vertical arrow keys.
This is intended behavior, again, navigation with JAWS works like this.
What you can do if you are absolutely required to do such a thing is the following: put an aria-describedby attribute to your select and in the description (which is visually hidden, of course) put something like this: «Select from one of the following values: Yes, No» (sure, you can grab the values from the options array with some JavaScript).
I have been looking around for a couple days now and haven't found the answer. I did see this: jQuery - Copy / move text from select list to textarea which I already did, but then the problem is what if the after copying the selected drop down item to go into the text area you change your mind and want to send it back or get rid of it?
I'm not sure if it's best to use two tags or if I should use textareas. This is what I have for the field on the left:
<select size="10" name="options" variable="#available options" multiple="multiple">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
And then when options are selected and the button is clicked they are added to a list and my textarea on the right reflects that list. Should I also make the area on the right a selectable drop down similar to the one with all my options? If I do that, then how to I get it to reflect only the options I have clicked?
Sorry if this doesn't make sense. It's my first time posting here and I'm not a programmer (but learning). Thanks in advance!