I have two drop downs in a search box, a "YearFrom" and a "YearTo".
When nothing has been selected in the "YearFrom", the "YearTo" box looks a little like this :
However the functionality is that once a "YearFrom" is selected, that the "YearTo" fields only offer what is available AFTER the year from. In essence, we end up with HTML like this :
<select>
<option value="">Any</option>
<option value="1950" disabled="disabled" style="display: none;">1950</option>
<option value="1960" disabled="disabled" style="display: none;">1960</option>
...
<option value="2011" style="">2011</option>
<option value="2012" style="">2012</option>
<option value="2013" style="">2013</option>
</select>
So any years below the YearFrom value are hidden. However what we then end up with is the select list looking like this :
So it isn't so much as a drop down, as now a tiny little box with a scroller on the right.
For reference, this doesn't happen in any other browser. e.g. this is how it looks in Firefox.
I've just come across this error as well.
My guess is that the Chrome browser calculates the drop-down height by measuring the heigths of the options and optgroups, but stops calculating the moment it comes across an element that has no height or is display:none.
To work around this in my own code, I dynamically rearrange the options after each update so that display:none elements are at the bottom of the list. it creates another visual bug (white space on right of dropdown) but I can live with that one.
Related
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>
I have a simple form with some select options that need to do stuff when the options are changed (create new form elements). This all works fine, however when a select option is chosen and the user clicks elsewhere on the page (either another form option or a blank area of the page) the text of the chosen option remains highlighted blue.
I've used select's before and not had this problem, however they weren't linked to the .change function. Is that something to do with why this is happening? Has anybody encountered this issue before? All help greaty appreciated! Code is below...
<div id="container1" class="form-group">
<label class="control-label">Select an option</label>
<div>
<select class="form-control" id="mySelect">
<optgroup label="A">
<option value="1A">Option1A</option>
<option value="2A">Option2A</option>
<option value="3A">Option3A</option>
<option value="4A">Option4A</option>
</optgroup>
<optgroup label="B">
<option value="1B">Option1B</option>
<option value="2B">Option2B</option>
<option value="3B">Option3B</option>
<option value="4B">Option4B</option>
</optgroup>
</select>
</div>
</div>
I've seen the issue brought up here
Remove Blue highlighting of option
However I don't think this quite describes my problem, as it seems to me that that person wants to remove the blue highlighting whilst using the form (hard to be 100% sure though). I don't mind the blue highlighting being there when using the form, I just want it to stop persisting when you stop using the form and do something else on the page.
UPDATE: Problem only seems to occur in Internet Explorer (tested versions 9, 10 and 11). Tested in Chrome and issue doesn't occur. Just to elaborate on the comments, the issue has nothing to do with JS (so I have removed the JQuery code and subsequent tags). The issue occurs when using optgroups in a select form. Loading the HTML outlined above into IE produces the error.
I am using a datalist to display a drop down as
<datalist id="ddl1">
<option value="one">Apple</option>
<option vlaue="two">Mango</option>
<option value="three">Cherry</option>
</datalist>
How can I increase the spacing between 2 datalist rows. If I try adding
<option value="one">One<br /></option>
This shows up fine in Safari but shows a <br /> as text in chrome.
How can this be resolved.
Unfortunately this is not possible as of yet. Recent versions of Chrome don't show the <br /> as text anymore, but also don't render a newline in the dropdown.
Generally this should be fixed with CSS as it's a styling problem, but that doesn't work either. The actual datalist element only provides values for the suggestion dropdown, but the element itself is not shown. The list you see resides in the shadow DOM, just like (for example) the up/down arrows on an <input type="number" />.
One would hope for some datalist pseudo-selectors like input::-webkit-outer-spin-button that Chrome has for the number controls, but none have been specced or implemented for datalist at all.
When I add "multiple" attribute to select menu, it behaves differently & doesnt show all options in a drop down list.
How it looks:
Here's the html code:
<select name="advertLocation" multiple="multiple">
<option value="--Select--">--Select--</option>
<option style="color:#3366cb;" value="Public - No specific target"><b>Public - No specific target</b></option>
<option>Afghanistan</option>
<option>Albania</option>
......
</select>
When adding multiple="multiple" and since you cannot select multiple values in a drop-down list, the browser renders the element as a scrolled list box.
There is nothing you can do to change this behaviour.
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!