I'm looking for a solution for a mobile website version with multiple selects in a search form using the most simple HTML code and I can't use jQuery Mobile ;(
<select multiple>
<option value="New York">New York</option>
<option value="Londres">Londres</option>
<option value="Berlin">Berlin</option>
<option value="Zurich">Zurich</option>
</select>
Here is the JSFiddle to see it on desktop!
In this form, the user will select more than one option, but this code is not working perfectly on mobile browsers (except on Windows Mobile). It's loosing some selected options after I close the select box.
Thanks!
Related
I'm new to HTML and trying to use a datalist. I need to limit it to display only 5 items and the rest to be viewed using scrolldown. Is there any way?
My code :
<form>
<input list="Android" name="Android">
<datalist id="Android">
<option value="Alpha">
<option value="Beta">
<option value="Cupcake">
<option value="Doughnut">
<option value="Eclairs">
<option value="Fryo">
<option value="GingerBread">
<option value="HoneyComb">
<option value="Icecream Sandwich">
<option value="Jelly Bean">
<option value="Kitkat">
<option value="Lollipop">
<option value="Marshmallow">
<option value="Nougat">
</datalist>
<input type="submit">
</form>
This is the output of my code
Thanks in advance!
Well, that's not possible to do, the datalist layout is defined by the browser the same as it does with the select tag and there is very little flexibility on customization. Your example comes from Chrome; in Firefox, it shows only 6 items and on Edge it shows something similar with limited size as well.
The proposed solution is using something else rather that using datalist, if you can't live with the datalist design Chrome offers, try some other component with a similar behavior, like dropdown select, autocomplete, autosugest, typeahead, etc.
I have a basic SELECT element like this:
<select name="bla" id="bla">
<option value="1">Opt1</option>
<option value="2">Opt2</option>
</select>
I want that if this component is rendered by Safari browser, it renders
<select name="bla" id="bla">
<option value="">Select an option</option><!-- ONLY FOR SAFARI BROWSER -->
<option value="1">Opt1</option>
<option value="2">Opt2</option>
</select>
What is the faster way to implement it ?
Thanks to support
There is no HTML component which can condition the browser, but you can add dynamically an option with Javascript on browser detection.
var is_safari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
I have a problem with multiselect box on iPhone Safari. When I open the multiselect box it automatically selects the first option. Here is the code snippet that i am using:
<select multiple>
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
</select>
I have added a blank option with the disabled attribute (see below from here) as the first option but it didn't work in iPhone Safari. I am using an iPhone 6s+:
<option disabled></option>
disable=disable
just add it in option so that no one will be able to access that option
<option selected=selected value="test0">Pick an option</option>
Use the attribute selected to specify that this option should be the one selected. Or put the first one you want to see selected by default at the top of your list.
disabled attribute will, well i know how unprobable it sounds, disable your select option, thus means it will not be able to be selected.
Is it possible to dynamicaly resize the visible options in select tag in forms? I have the example:
<select size="1">
<option value='1'>1
<option selected value='2'>2
<option value='3'>3
<option value='4'>4
</select>
I would like to have visible all options (to setup size dynamically with css) when design page for printing. And also to see selected option(s) in another design (color, bold ...). For resize I tried:
select{
size:4;
}
but it doesn't work. I need a working solution at least for FF, IE, Safari ...
Do have any idea?
Thanks in advance!
You can use this way:
<select size="1" size="4">
<option value='1'>1</option>
<option selected value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
</select>
And don't forget to close the </option>
I am building my first website and am trying to make it responsive. I am using a html list as the menu and for the links. When I test it on an opera software tester. It doesn't work properly. I don't know of any other tester devices.
The problem that I have is that when I click on a link it always displays the site map page. None of the other links will display.
The html code that i use is below;
<div id="drop-down">
<form name="form">
<SELECT name="guidelinks" onChange="window.location=document.form.guidelinks.options[document.form.guidelinks.selectedIndex].value">
<option selected>Main Menu</option>
<option value="index.html">Home Page</option>
<option value="small-books.html">Free books to download</option>
<option value="contact.html">Contact Us</option>
<option value="sitemap.html">Site map</option>
<option value="Free-studies-to-download.html#study-3">- Study -Reconciliation</option>
</select>
</form>
There is a close div at the end. Doesn't show in code.
It also seems that the sub menus don't work. They are anchors. The page just refreshes in mobile devices. I understand that some mobile browsers block them.
Is there a way to get the list to work?