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>
Related
I have a form built using contact form 7. I have 2 selects.
The first selects a number 1-7. It also has an option for "Not Started". If, an only if, "Not Started" is selected, then the second select should be made visible.
Select 1 = number
Select 2 = startYear
startYear is hidden to begin with.
If number option is selected as "Not started" then startYear select appears
Both fields should be required when visible. And startYear should be reset if number is changed to a different value
Below is what I have and it operates mostly as it should except for a couple of things. Primarily the fields are not required and can be submitted blank. Also, while the second select correctly appears and disappears, the value is not reset.
Any help would be most appreciated.
Thanks
<div style="display: inline-block;">
<p style="margin-bottom: 0;">Primary(at present)
<select name="number" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false" onchange="showdiv(this.value);">
<option disabled selected value></option>
<option value="0">Not yet started</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
</p>
</div>
<div id="div-two" style="display:none;">
<p>Year due to start, if not yet started[select startyear include_blank id:startyear "2018/19" "2019/20" "2020/21" "2021/22"]</p>
</div>
<script type="text/javascript">
function showdiv(element){
document.getElementById("div-two").style.display = element==0?"inline-block":"none";
}
</script>
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>
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.
In functions php, this works like a charm:
<textarea name="menu1anchor" id="menu1anchor" cols="40" rows="1"><?php echo get_option('menu1anchor'); ?></textarea>
How can i make this drop down list work? I want to be able to input my values and select a desired one later on.
Right now, it does not matter which value I select, after i press "save changes" it does not send my value thru the form to wordpress options.
<select name="menu1" id="menu1">
<option value="1">Microsoft</option>
<option value="2">Google</option>
<option value="3">Apple</option>
</select>
Thank u!
<select name="menu1" id="menu1">
<option value="1"<?php selected(get_option('menu1'),1); ?>>Microsoft</option>
<option value="2"<?php selected(get_option('menu1'),2); ?>>Google</option>
<option value="3"<?php selected(get_option('menu1'),3); ?>>Apple</option>
</select>
Try that instead.