I'm not sure if this is a browser bug or if I am missing something subtle. Along the top of my page I have 2 select drop-downs, a label and then a text box all arranged horizontally. Everything is aligned to the left.
Initially, only the first select box is populated. When the user selects an item, the second box is populated via JavaScript. When this happens the width of the second select box increases to accommodate the contents and the label is pushed to the right. However the problem is that the input box does not move and ends up overlapping the select box.
In Firefox everything works fine and both the label and the text box get pushed to the right. Also, if I open the IE developer tools, select the text-box and un-check align left and then re-check it the text box moves to where it should be.
My html looks like this:
<div id="main-top">
<select id="firstSel" name="firstSel" >
<option value="">-- Select an Item --</option>
<option value="one">One</option>
</select>
<select id="secondSel" name="secondSel" >
<option value="">--</option>
</select>
<label for="Currency">Currency:</label>
<input class="input-sm" type="text" id="BECurrency" name="Currency" />
</div>
Any suggestions on how to solve this annoying problem?
I ended up fixing the width of the element in the css. This means that the width is set so that it is always the same width in all browsers.
Related
I am attempting to create a form with a select with a bunch of options that are pulled from a database, and also one option that will be a placeholder that will say something like "Choose a title".
The issue I am experiencing is that although the placeholder option is indeed selected and is disabled correctly, it does not display in the actual input list before anyone clicks on it as the selected option.
Required behavior:
Before a user has clicked on the dropdown at all, they should see a dropdown that has the grayed out text of a disabled item that says "Choose a title". When they click on the dropdown, they can then choose from the list of titles that are grabbed from the database.
Current incorrect behavior:
Before a user has clicked on the dropdown at all, they see an empty dropdown menu with nothing written or selected in it. Once they click on the dropdown, it shows that the disabled option is currently selected even though the text doesn't show in the input box (but does in the dropdown), and are able to select one of the non-disabled options that is pulled from the database.
What am I doing wrong here? I've found several things online that tell me to do it the way I have it right now. Here is my code:
<label for="TitleSelector">
What do you want to edit?
</label>
<select name="TitleSelector" id="TitleSelector" v-model="selectedTitle">
<option value="" disabled selected>Choose A Title</option>
<option
v-for="(title, index) in allTitles"
:value="title"
:key="index"
>
{{ title }}
</option>
</select>
I've got it, it works if I v-bind the value of the disabled option like so:
<option :value="null" selected disabled>Choose A Title</option>
<select id="selectIdentity" name="selectIdentity" required ng-trim="true" ng-change="changedValue(addUser.identityProvider)" ng-model="addUser.identityProvider" >
<option value="" selected hidden />
<option ng-repeat="idprovider in identityProvider" value="{{idprovider .UOM}}">
{{idprovider}}
</option>
</select>
for all the browsers white space is not appearing in first option of the dropdown but in IE11 shows White space. how to remove that white space in IE.
here i have created a fiddle link http://jsfiddle.net/vinothsm92/gkJve/1502/
kindly check it in IE browser
Can any one tell me how to fix this
The problem sees to be with the hidden attribute of your empty option
I am looking for how to do a searcher like this (The select with a map area)
I've done a select, but I don't know how to integrate a map area like that for select a destination.
<div class="form-group">
<select class="selectTbx" id="combobox" placeholder="Zone" name="zone">
<option value="">Select one...</option>
<%=this.strOptions %>
</select>
From the website that you have shown, first search box does not seem to have a search functionality, its just a text box and onclick of it its showing a DIV with contents. You can do the same easily with JQuery/Javascript
First, I thank you for reading my post,
As my title says it I need to create popups on an option select.
I've searched in many jquery tutorials but they all talk about buttons or tags to create popups.
But that really doesn't help cause here is the fact : all my selected tags are in an tag which make the button and tag of no use.
So I need that when someone, with his mouse, just hover the text present in the selected option, there's for each options a dialog box that appears with in it the description of the text hovered , so here's my code :
<select name ="soin" id="soin" size="5"> <!-- the second one, pseudo-dynamic -->
<option value="">-----Select-----</option>
<option value="Passage" class="Logistique" >Passage</option>
<option value="PresenceDansUs" class="Logistique">Présence dans une US</option>
<option value="Rangement" class="Logistique">Rangement</option>
<option value="Medicarte" class="Logistique">Medicarte</option>
<option value="ChercheMateriel" class="Logistique">Cherche du Matériel</option>
<option value="Transfert" class="Logistique">Transfert d'un patient</option>
<option value="Autre" class="Logistique">Autre</option>
...there are 50 more values...
</option>
So for example if someone hover the mouse on "Passage" ,the first select value, a box appear with :"Passage is a way across a specified location" and so on for the others.
Here is a little picture to help you to figure out the idea:
and then with the mouse on the option value
That "dialog box" was made with paint, so please don't tell me I did it xD
So I thank you for your concern because I'm too junior to make that sort of things in jquery .
What you might be looking for is the 'title' attribute of the <option> tag -
<option value="Passage" title="Passage is a way across a specified location" class="Logistique" >Passage</option>
Check this fiddle
If you hover your mouse over the 'Passage' option, you will see the message as a small tooltip.
I am using boxover.js tool tip:
http://www.koders.com/javascript/fid8780CBE6D1BEE164FC239AA55DCB13A53B3536E8.aspx?s=document#L6
The tool tip works well with all the elements except SELECT box in IE.
I have a code where i need to show some image as a tool tip on selecting the option in a select box.
Ex:
<select name="categoryName" id="categoryName" style="width:50%;" size="10" >
<option value="">--Select Category--</option>
<option title="cssbody=[bdycss] cssheader=[hdrcss] header=[Category] body=[<center><p><img src='icon1.png'></p>]" value="1">category1</option>
<option title="cssbody=[bdycss] cssheader=[hdrcss] header=[Category] body=[<center><p><img src='icon2.png'></p>]" value="2">category2</option>
<option title="cssbody=[bdycss] cssheader=[hdrcss] header=[Category] body=[<center><p><img src='icon3.png'></p>]" value="3">category3</option>
</select>
Pls help me in fixing this issue. Thanks in advance.
IE6 does not [IE7 onwards it does] support title property for OPTION tag. You can have same title for all OPTIONs by setting title attribute in SELECT tag.
Another option is to have DHTML popup as tooltip.