I have a dropdownlist declared like this:
<select id="PageToCreate_AuthorID">
<option value="">Please select...</option>
<option value="1">Thierry</option>
<option value="2">Vanessa</option>
</select>
When the page is showed the fist time, here is what is displayed:
As you can see, we don't see all the text inside the control.
Then I click inside it and the dropdown is adjusted:
How can I do to have the dropdown showed correctly when the page is showed the first time?
Thanks.
Try to add some css for your select tag :
<select id="PageToCreate_AuthorID">
<option value="">Please select...</option>
<option value="1">Thierry</option>
<option value="2">Vanessa</option>
</select>
Css:
#PageToCreate_AuthorID {
min-width:200px; /* Change this value if you think you must do it */
}
Related
I have a page with a Select Option
but in my AMP Page i cant see this element,
What i need to add to this work?
For navigate the page use AMP.navigateTo
<select on="change:AMP.navigateTo(url=event.value)">
<option selected>-Select a Page-</option>
<option value="YOUR-PAGE-URL">Home Page</option>
<option value="YOUR-PAGE-URL">About Us</option>
<option value="YOUR-PAGE-URL">Camping Tips</option>
</select>
I have a form with code similar to:
<form class="eng-select" action="action.php" method="POST">
<select name="position">
<option value="disabled" disabled selected>Engineer</option>
<option value="entry-1">John Doe</option>
<option value="entry-2">David Smith</option>
<option value="entry-3">Michael Silk</option>
</select>
</form>
Which produces a dropdown like this:
However I would like to change the css color of the disabled selected entry (what the user sees when they load the page - the picture above). Is this possible, and if so what would the proper CSS call be?
I have looked at similar posts for IE here that mention:
select option [disabled] { background-color: blue; }
but this does not work for me (I am using Google Chrome).
To clarify - I would like to change the CSS before the user clicks and opens the dropdown box.
Your CSS must be
select option[disabled] { background-color: blue; }
Without the space after option. It should work better this way.
With the space, it applies to descendants of the option.
use below css for disabled select option
select option:disabled {
background-color: blue;
}
<form class="eng-select" action="action.php" method="POST">
<select name="position">
<option value="disabled" disabled selected>Engineer</option>
<option value="entry-1">John Doe</option>
<option value="entry-2">David Smith</option>
<option value="entry-3">Michael Silk</option>
</select>
</form>
I am using a multiselect box in JSP(Spring MVC).I have Three options in the multiselect. No CSS used for the size. but I am getting the multiselect size oversized. I just need the exact size with no extra spaces in it.
Please refer below for the code:
<select id="test" name="test" multiple="multiple">
<option value="test1">test1</option>
<option value="test2">test2</option>
<option value="test3">test3</option>
</select>
The output contains some space under test3 which is not required. is there a way to eliminate that extra space?
NOTE: No CSS is used with the id.
Why not just set the height of the select via CSS?
select {
height: 45px;
}
<select id="test" name="test" multiple="multiple">
<option value="test1">test1</option>
<option value="test2">test2</option>
<option value="test3">test3</option>
</select>
On a select dropdown, I need to make certain items 'strong/bold'.
How can I do this?
Example of what I ideally require:
<option value="#"><strong>Andorra</strong></option>
<option value="#">--Grandvalira</option>
<option value="#">--Vallnord</option>
<option value="#"><strong>Austria</strong></option>
<option value="#">--Amadé</option>
<option value="#">--Bad Kleinkirchheim</option>
<option value="#">--Mallnitz</option>
You actually can't.
The closest thing (you can't choose a bold item)
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
Which gives you this:
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_optgroup
You can also build one of your own but it won't be input an input tag (you should use inputs of your own).
you could use :nth-child(N)
option:nth-child(1), option:nth-child(4) {
font-weight:bold;
}
Demo: http://jsfiddle.net/Sotiris/sqshN/
Find more info and browser support for this pseudo-class at http://reference.sitepoint.com/css/pseudoclass-nthchild
Using css in the works as a quicker, easier alternative
<option value="value" style="font-weight: bold;">SELECT ME</option>
You could do it with jQuery.
$('#Your select').append($("<option></option>").attr.css("font-weight" , "bold").html("Bold Text"));
You'd have to add some logic to determine which options to bold, obviously.
This also works (Firefox 50 and Chrome 55). Items 3 and 5 are shown in bold
<style>
.bld {font-weight:bold;}
</style>
<select>
<option value = "1">Kanakangi
<option value = "2">Ratnangi
<option class = "bld" value = "8">Hanumatthodi
<option value = "9">Dhenuka
<option class = "bld" value = "15">Mayamalavagowla
<option value = "16">Chakravaaham
</select>
I have a html select control. I want to have a item which is a link to navigate to some other page, when it is selected with out postbacking.
Thanks in advance
How about this ?
<select onchange="location=this.options [this.selectedIndex].value;">
<option>- Select -</option>
<option value="http://www.google.com" >Google</option>
<option value="http://www.facebook.com" >Facebook</option>
<option value="http://www.stackoverflow.com" >Stackoverflow</option>
</select>