Ok, so i have a simple thing on my website where users can enter a phone number and text them, so when they enter the phone number they need to select an item in a dropdown list with all country dial codes, the problem is that the dropdown list is as long as my textbox which makes everything look quite awkward, I've done some research and have messed around with it myself without any luck, just for an example here is what i am talking about (btw i use the bootstrap framework so any answer would need to support bootstrap)
As you can see the text box is actually smaller than the dropdown list which makes it look kinda weird, i would like to somehow scale down the dropdown so it looks better along side my text field.
Thanks for reading, any help will be appreciated!
EDIT:
My current code for this <select> dropdown looks like this
<select class='form-control'>
<option value='213'>Algeria (+213)</option>
<option value='376'>Andorra (+376)</option>
<option value='244'>Angola (+244)</option>
<option value='1264'>Anguilla (+1264)</option>
<option value='1268'>Antigua & Barbuda (+1268)</option>
<option value='54'>Argentina (+54)</option>
<option value='374'>Armenia (+374)</option>
<option value='297'>Aruba (+297)</option>
<option value='61'>Australia (+61)</option>
//There is more countries..... I just cut it here so it won't be too long
</select>
Related
I would like to ask how I can focus on a specific item in the long list via a search bar.
example: when a user enters something on the search bar, the list is filtered to find the elements that contain that search key, I would like that if at least one result is found, the focus is placed on the first element found.
when user visit the page:
after the user search a something:
thanks!
i don't know if this solves your problem or not u can use datalist tag in html which work kind of similar it will filter everything except what u have typed in search box instead of focusing at that element.
<label for="browser">Choose your browser from the list:</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
I've searched a bit but the found solutions here on SO seems not working for me. I have a select input field and I want to assign it a placeholder. I'm using bootstrap 4 and to manage the front-end.
As I understand from the documentation I need to assign the selected hidden or selected disabled to the <option> tag I want to use as placeholder. I've tried but didn't worked.I don't know if this is because I'm using vue.js, is there a fix?
<label>Filter List</label>
<select
class="form-control"
v-model="listFilter"
v-on:change="filterList()"
>
<option value="" selected disabled class="text-hide">Select filter</option>
<option value="a">All</option>
<option value="f">Fe</option>
<option value="m">Mas</option>
<option value="s">Tru</option>
<option value="c">Cou</option>
</select>
<select>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
this is a normal select box in which when we select one, its value changes to One. But let me know is it possible to set value 1 when I select one
like the image shown down
I think here we set +297 as the value for the option Aruba
You can also suggest any other alternative way to do so
I have created a select list with some option values inside an asp.net tablecell. For some reason VS10 keeps placing more and more non breaking spaces into the code before the option values. I have to keep deleting them because it eventually fills the page with them. Here is my original code:
<asp:TableCell>
<select id="selectBankID" onchange="changeFormatLabel(this.options[this.selectedIndex].value,'txtBankIDFormat')">
<option value=""></option>
<option value="SWIFT (W/Branch)">SWIFT (W/Branch)</option>
<option value="SWIFT (W/O Branch)">SWIFT (W/O Branch)</option>
<option value="BSB">BSB</option>
<option value="BIC">BIC</option>
<option value="TRNO">TRNO</option>
<option value="BLZ">BLZ</option>
<option value="UKSORT">UKSORT</option>
</select>
</asp:TableCell>
On its own, without my saving or anything, a bunch of nbsp characters appear out of nowhere and just keep multiplying as I keep working on other parts of the page:
<asp:TableCell>
<select id="selectIntermedBankID" onchange="changeFormatLabel(this.options[this.selectedIndex].value,'txtIntermedBankIDFormat')">
SWIFT (W/Branch)
SWIFT (W/O Branch)
BSB
BIC
TRNO
BLZ
UKSORT
Of course, they don't display nicely in the code window on this site, but they are there. What the ##$!* is going on? Visual Studio hatred for non asp tags?
As stated above, just used a dropdownlist instead of standard HTML selectlist.
Friends there is a simple solution for this...
Remove all spaces and carriage returns with in the control. Problem will be solved
for eg: if your control is like
<Select>
<Option>1</Option>
<Option>2</Option>
</Select>
Solution is to make the mark up as following
"12"
Let me know whether you are still facing this issue
How to design a dropdown on XSLT? I need a dropdown with four values
option 1
option 2
option 3
option 4
I have the following on the XSLT
<div>
<select>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
</select>
</div>
I wanted to pass the selected value from the dropdown to the asp.net
XSLT has nothing to do with "designing a dropdown". It is an XML-based language to transform an input XML tree into some other form of output. XSLT has no concept of a "dropdown", that would be in whatever web or UI system you're using.
First design the output, in other words, decide specifically what HTML you want to produce.
Then determine the input XML and figure out what parts of it need to be reflected in the output dropdown.
If you can show us those two things, we can help you figure out what sort of XSLT to use.
FYI there is an example here of an XSLT template for generating an OPTION/SELECT. You could try that and let us know if you need help figuring out how to use it.