I have a simple HTML code (drop down) and for some reasons i want to display items on the right side without using a direction on select tag directly.
It works on fire fox but do not works on IE(ver 11).
I used these codes and css but it does not work
<select name="SelectedGroup" style="text-align:right" id="groups" >
<option value="">Select one</option>
<option style="text-align:right; " value="1">abcd#1</option>
<option style="text-align:right; direction:rtl;" value="2">abcd#2</option>
<option value="3">abcd#3</option>
<option value="4">abcd#4</option>
</select>
It works for me in IE11 using direction. try this
<select name="SelectedGroup" dir="rtl" id="groups" >
<option value="">Select one</option>
<option value="1">abcd#1</option>
<option value="2">abcd#2</option>
<option value="3">abcd#3</option>
<option value="4">abcd#4</option>
</select>
Related
I have following drop-down :
<select class="form-control">
<option value=1>Pooja Parikh</option>
<option value=2>Poorti Parikh</option>
<option value=3>Agent 2</option>
<option value=6>AWS Bot AWS Bot</option>
</select>
I want the above dropdown with a bootstrap badge, like following
<select class="form-control">
<option value=1>Pooja Parikh</option>
<option value=2>Poorti Parikh</option>
<option value=3>Agent 2</option>
<option value=6>AWS Bot AWS Bot <span class='badge badge-info'>Bot</span> </option>
</select>
when I tried the above code, its giving simple dropdown options with text only (not giving badge)
I was wondering if anyone one helps me out to implement the above.
Thanks
I am trying to hide the placeholder text in a dropdown menu from showing up as a selectable option. I have searched other options on stack overflow and tried the following solution but none have worked:
<option style="display:none" >Select Stop</option>
<option value="" disabled selected hidden >Select Stop</option>
<option value="" disabled selected style="display: none;">Select Stop</option>
My code looks like this which WORKS in stackoverflow but not when I put it into my site using latest version of chrome...
<select>
<option value="" disabled selected hidden>Select Stop</option>
<option value="home">home</option>
<option value="school">school</option>
<option value="office">office</option>
</select>
Not sure what are you actually trying achieve, to hide the select or option simply add disabled to them, see below, i have 2 select, one with option disbaled other one the entire select disabled
<select>
<option value="">Select Stop</option>
<option value="home" >home</option>
<option value="school" disabled>school</option>
<option value="office" >office</option>
</select>
<select disabled>
<option value="" >Select Stop</option>
<option value="home" >home</option>
<option value="school" >school</option>
<option value="office" >office</option>
</select>
Maybe you might want to add some JQuery into your file
$(function() {
$('.location').find('option:contains(office)').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='location'>
<option value="select stop">Select Stop</option>
<option value="home">home</option>
<option value="school">school</option>
<option value="office">office</option>
</select>
I must have missed something very trivial, but I cant figure it out.
The select below shows 5 options (as expected), but I cant get access to option 6 and 7. The scrollbar is shown, but the browser doesnt allow me to move it down
<select size='5' multiple name='driver[]'>
<option value= >(No Driver Filter)</option>
<option value=drivername=''></option>
<option value=drivername='alex'>alex</option>
<option value=drivername='marc'>marc</option>
<option value=drivername='frank'>frank</option>
<option value=drivername='james'>james</option>
<option value=drivername='michael'>michael</option>
</select>
I think your code is not well formatted . You should use double quotes for attribute values.
<select size="5" multiple="multiple" name="driver[]">
<option value="" >(No Driver Filter)</option>
<option value="drivername=''"></option>
<option value="drivername='alex'">alex</option>
<option value="drivername='marc'">marc</option>
<option value="drivername='frank'">frank</option>
<option value="drivername='james'">james</option>
<option value="drivername='michael'">michael</option>
</select>
There is a requirement in my project like.,
I have select box in desktop view and in mobile only options has to be displayed.
I got stuck how to display all the options without selecting select box .
<h3>Desktop View</h3>
<select name="carmakes" id="carmakes">
<option selected='selected' value="0">Car makes</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
</select>
<br/><br/><br/><br/>
<h3>Mobile View</h3>
<option selected='selected' value="0">Car makes</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
Thanks
Demo
Just give multiple for your select box and it'll display like that...
<select multiple name="carmakes" id="carmakes">
<option selected='selected' value="0">Car makes</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
</select>
I have a problem with a form select box on iPhones with bootstrap and I am looking for a way to fix this. For some reason when an option is selected and the user moves on to the next select box below on the form, the selected option clears and says 0 Items selected, being required fields, this stops the user being able to submit the form. This only happens on mobile devices, it works fine in a desktop browser.
The HTML is pretty bog standard stuff, these options are generated by PHP and I am using a Smarty template:
<tr>
<td class="title">Industry <span class="pink">*</span></td>
<td><select class="validate3" name="industry[]" style="width:200px;height:230px;" multiple >
<option selected="selected">Select an Industry</option>
<option value="1004" >Apprenticeships</option>
<option value="1035" >Building Services</option>
<option value="1007" >Construction & Property Jobs</option>
<option value="1010" >Energy Jobs</option>
<option value="1011" >Engineering Jobs</option>
<option value="1008" >Industrial Jobs</option>
<option value="1018" >IT & Telecoms Jobs</option>
<option value="1022" >Management & Executive Jobs</option>
<option value="1023" >Manufacturing Jobs</option>
<option value="1003" >Mechanical and Electrical</option>
<option value="1026" >Motoring & Automotive Jobs</option>
<option value="1027" >Public Sector Jobs</option>
<option value="1029" >Recruitment Consultancy Jobs</option>
<option value="1033" >Temporary Work Jobs</option>
<option value="1034" >Transport & Logistics Jobs</option>
</select></td>
</tr>
<tr>
<td class="title">Job Type <span class="pink">*</span></td>
<td><select class="validate3" name="job_type[]" style="width:200px;height:70px;" multiple >
<option selected="selected">Select a Job Type</option>
<option value="1001" >Permanent</option>
<option value="1002" >Temporary</option>
</select></td>
</tr>
As you can see I have a default option selected, which does not clear itself until the user tries to change it.
Here is the Smarty code incase it is a problem here:
<select class="validate3" name="industry[]" style="width:200px;height:230px;" multiple {if !empty($error.industry)}class="required-field"{/if}>
<option selected="selected">Select an Industry</option>
{section name="z" loop=$select_industries}
<option value="{$select_industries[z].id}" {get_value field=multiplelocation selectvalue=$select_industries[z].id fieldname="industry"}>{$select_industries[z].industry}</option>
{/section}
</select>
<select class="validate3" name="job_type[]" style="width:200px;height:70px;" multiple {if !empty($error.job_type)}class="required-field"{/if}>
<option selected="selected">Select a Job Type</option>
{section name="y" loop=$select_jobtypes}
<option value="{$select_jobtypes[y].id}" {get_value field=multiplelocation selectvalue=$select_jobtypes[y].id fieldname="job_type"}>{$select_jobtypes[y].job_type}</option>
{/section}
</select>