My dropdown fields use a hidden dropdown field that updates a text input. The reason is because I use a field for 'state' and when a country other than the United States is selected, it turns into the text field that is being updated. There is also a presentation interactive dropdown menu that is separate from the native menu, that uses react to update the hidden dropdown, and the text field. This is all handled using one state through react.
The structure looks like this...
.hidden {
display: none;
}
<div class="wrapper">
<input type="hidden" name="state" autocomplete="shipping address-level1">
<div class="dropdown">
<i class="icon icon-drop-down" role="presentation"></i>
::before <!-- presentation of dropdown that sets the hidden dropdown -->
</div>
<select class="hidden">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AS">American Samoa</option>
<!-- ... -->
</select>
</div>
Recently Chrome's autofill would not update the hidden select menu. Is this an issue with chrome? Has anyone else experienced this issue? Poking around I've found display: none and visibility: hidden cause the issue, but making the item visible will enable Chrome's autofill for the dropdown.
Any info would be greatly appreciated! Thanks!
Related
I have used a select option dropdown which has a default design like below:
<div class="select-wrapper">
<div class="form-group">
<div class="multipleSelection" id="selectQueryTemplateAdd">
<select id="selectQueryTemplate" class="dynamic_Time form-control TaskOverlayDropDown">
<option selected="selected"> Select </option>
<option value="Please confirm the status of the event whether it is resolved. If y....">Please confirm the status of the event whether it is resolved. If ye....</option>
<option value="Narrative mentions that the subj....">Narrative mentions that the subject ...".</option>
</select>
<div class="overSelect"></div>
</div>
</div>
</div>
Is there any way to change its default design like below image:
It should show pointer (hand icon) when we hover on the value
Below background color should be there when we hover.
Want to adjust its height and width
If Dropdown data is long as below, only some part of it should be visible when we open the dropdown list. But full data should be visible as a tooltip when we hover on any value.
You need to use a CSS framework like bootstrap to achieve this kind of styles.
https://getbootstrap.com/
I have a very simple <select> dropdown with two child <option>'s:
<div>
<select>
<option
value="defaultPrice"
selected
>Price</option>
<option
value="title"
>Title</option>
</select>
</div>
When I use my mouse and click the select, I am shown the options context menu to select an option:
However, when I use my keyboard and focus the select element, the up and down keys will not bring up the same dialogue, as expected.
However when I add a label to my select, the up and down keys do show the context menu:
<div>
<label for="my-select">Sort order</label>
<select id="my-select">
<option
value="defaultPrice"
selected
>Price</option>
<option
value="title"
>Title</option>
</select>
</div>
Then, if I then add CSS to hide the label, again the dropdown will not show.
This seems to be happening wherever I've been using select drop-downs, and only seems to be an issue in Chrome (v. 77.0.3865.90).
I have no CSS included in the site yet, so it's not a styling issue.
Has anyone else encountered such an issue? Unsure if it's a problem with my markup or a bug with Chrome.
I'm setting up a makeshift search bar on my website that lists the results in a dropdown menu. According to my knowledge, the easiest way to do that is using a datalist. But how can I prevent the dropdown menu (that contains all the possible keywords) to show up before the user starts typing in the search box?
I currently have the following set up:
<input type="text" list="options" placeholder="Search">
<datalist id="options">
<option value="Foo">
<option value="Bar">
</datalist>
By default, when you click inside the input field, the list shows up, but I would like to have that hidden until the user starts typing data. Only then should the dropdown menu be shown.
I am trying to make a html page in my angularjs application. I have a input box and one dropdown side by. My Input box has size and i want to make the dropdown expansion with same size as my input box.
My Html Code,
<body ng-controller="Controller">
<h1>Plunkr Example</h1>
<fieldset style="border:1px solid black;">
<legend>Data</legend>
<span style="float:right">Check4: <input type="input" id="input"
ng-repeat="x in string | filter : 'check'"
ng-model="x._text"/>
<select id="dropdown">
<option value="1">True</option>
<option value="2">False</option>
<option value="3">Edit</option>
</select>
</span>
</fieldset>
</body>
And Controller code,
$scope.string = [
{"_attributes":{"name":"comments"},"_text":"comments"},
{"_attributes":{"name":"check"},"_text":'Some Content Here'},
{"_attributes":{"name":"value"},"_text":123}
]
I also made a plunkr to demonstrate where the current layout is like this, with some gap between inputbox and dropdown. I tried to remove space by padding:0 and margin:0 but no success.
And what is want is,
And on click on dropdown the options should come beneath the input box with same size, like below
Also if user select True/false , the input box should become readonly. It should be editable only if the Edit option is selected.
Please suggest , how this can be achieved. Many thanks in advance.
You can use something like following to select option:
<select id="dropdown" ng-model="selectedOption">
<option ng-repeat="option in options" value="{{option.isEditable}}">{{option.value}}</option>
</select>
And use this value as ng-disabled as follow:
<input type="input" id="input"
ng-repeat="x in string | filter : 'check'"
ng-disabled="{{selectedOption}}"
ng-model="x._text"/>
Hope this helps!
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>