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>
Related
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 asp.net screen to enter the data as we as I also want to use same screen as red-only mode to view only for some users.
I have drop down in my screen that default selected index is 0 and text is 'Please Select' these drop downs are not mandatory so in edit mode user may not select any value for drop downs so default value would be 'Please Select' but when user open a same screen in read-only mode to view the saved data I want to hide those drop-down which are having default value as 'Please Select' but by using CSS. I have an option using jquery but I am looking a way by using css if it is possible. I have two css file that I am changing dynamically for read-only mode and edit mode.
I got some css as follows, in same way I am looking solution for my issue.
<!DOCTYPE html>
<html>
<head>
<style>
select [value=two][selected=selected] {
display:none
visibility:hidden;
}
</style>
</head>
<body>
<th>Show This Drop down</th>
<select id="ddlNumber">
<option value="-1">Please Select</option>
<option value="one">one</option>
<option value="two" selected="selected">two</option>
<option value="three">three</option>
<option value="four">four</option>
</select>
<br>
<br>
<th>Hide This Drop down by css</th>
<select id="ddlAlpha">
<option value="-1" selected="selected">Please Select</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
</body>
</html>
I have two select boxes as show on the image above. Now the issue is that when I click on the year field, the month field is still being triggered. Seemed like the area for the first select box is too wide or there is some kind of overlap.
Anyone know a work around for this please?
This is a web app by the way, if that helps. :)
<label>
<span>Expiration</span><br>
<select class="card-expiry-month input-mini">
<option value="01" >01</option>
</select>
<select class="card-expiry-year input-mini">
<option value="2014">2014</option>
</select>
</label>
Not sure if it's because of the label?
It's because you have the <label> surrounding both elements. If you move the label to not wrap both elements, it will work:
<label>
<span>Expiration</span><br>
<select class="card-expiry-month input-mini">
<option value="01" >01</option>
</select>
</label>
<label>
<select class="card-expiry-year input-mini">
<option value="2014">2014</option>
</select>
</label>
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 */
}
For this portion of code
<label for="gender">I am:</label>
<select class="select" name="sex" id="sex">
<option value="0">Gender:</option>
<option value="1">Female</option>
<option value="2">Male</option>
</select>
W3C Validator giving this error reference to non-existent ID "gender"
How to solve this?
Edit
Getting here also
reference to non-existent ID "birthday"
<label for="birthday" class="birthday">Birthday:</label>
<div class="field_container">
<select name="birthday_month" id="birthday_month" class="">
<option value="-1">Month:</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
</select>
<select id="birthday_day" name="birthday_day">
<option value="-1">Day:</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="birthday_year" name="birthday_year">
<option value="-1">Year:</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
</select>
</div>
Change the value of the for attribute in the label element:
<label for="sex">I am:</label>
Edit to add:
Your second example is more complicated, because you're using one label for three input fields.
I'd recommend something like the following:
Add the following CSS rule to your site:
.hidden_label {
font-size:1px;
height:0;
line-height:0;
margin:0 0 0 -1000px;
text-indent:-9999px;
}
Then update your form:
<div class="birthday">Birthday:</div>
<div class="field_container">
<label for="birthday_month" class="hidden_label">Birthday Month</label>
<select name="birthday_month" id="birthday_month" class="">
<option value="-1">Month:</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
</select>
<label for="birthday_day" class="hidden_label">Birthday Day</label>
<select id="birthday_day" name="birthday_day">
[...]
</select>
<label for="birthday_year" class="hidden_label">Birthday Year</label>
<select id="birthday_year" name="birthday_year">
[...]
</select>
You want to do two things:
Have a visually appealing form for your users, and then for those users that are using assistive technology, provide some additional helpers along the way. Using the CSS class I defined above, you are ensuring that screen readers will still see the elements and read their contents when the user moves into the form elements, while hiding all the additional labels from the visual site.
There is no id="gender" or name="gender". You are using sex. Either use sex or use gender. Keep it consistent.