I am using Bootstrap 3 and I have a table with some inputs and selects.
The inputs are about 1px lower than the select:
and no matter what I do I cant seem to get them to line up on the same level.
This rows HTML is like so:
<tr id="other-license-row-new" data-other-license-id="-1">
<td class="text-center">
Attach File
</td>
<td>
<select class="form-control other-license-class">
<option>C - Car</option>
<option>LR - Light Rigid</option>
<option>MR - Medium Rigid</option>
<option>HR - Heavy Rigid</option>
<option>HC - Heavy Combination</option>
<option>MC - Multi Combination</option>
</select>
</td>
<td class="expiry-date-row">
<input type="text" class="form-control other-license-expiryDate date-picker" data-position="top left">
</td>
<td>
<select type="text" class="other-license-state form-control">
<option value="NSW">NSW</option>
<option value="QLD">QLD</option>
<option value="VIC">VIC</option>
<option value="ACT">ACT</option>
<option value="SA">SA</option>
<option value="WA">WA</option>
<option value="NT">NT</option>
<option value="TAS">TAS</option>
</select>
</td>
<td>
<input type="text" class="other-license-number form-control">
</td>
<td class="action-column">
...dropdown button html removed for brevity...
</td>
</tr>
I would like to know how I can align the inputs and select so it doesnt have he 1px difference.
I have tried:
select, input{
vertical-align: middle; //as well as all options in web inspector
}
Related
I have this HTML code :
<table>
<tr>
<td colspan="2">
<input type="radio" name="lineChoice" id="lineChoiceA" value="A"><label for="lineChoiceA">Line A</label>
<input type="radio" name="lineChoice" id="lineChoiceB" value="B"><label for="lineChoiceB">Line B</label>
</td>
</tr>
<tr id="lineA" style="display: none;">
<td>List A : </td>
<td>
<select name="mySelect" id="mySelect">
<option value=""></option>
<option value="A0">A0</option>
<option value="A1">A1</option>
<option value="A2">A2</option>
</select>
</td>
</tr>
<tr id="lineB" style="display: none;">
<td>List B : </td>
<td>
<select name="mySelect" id="mySelect">
<option value=""></option>
<option value="B0">B0</option>
<option value="B1">B1</option>
<option value="B2">B2</option>
</select>
</td>
</tr>
</table>
And I have this JQuery code :
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(function(){
// If Click on Radio
$('[id^="lineChoice"]').click(function(){
// Hide Line
$("#lineA").hide();
$("#lineB").hide();
// Display Line
if($(this).val()=="A") $("#lineA").show();
if($(this).val()=="B") $("#lineB").show();
});
// If Change on List
$('#mySelect').change(function(){
// Just Display in Console
console.log($(this).val());
});
});
</script>
Both lines are basically hidden.
And by selecting the radio button I display the corresponding line. I voluntarily simplified the name of the lines (it is more complex in my initial code).
If I select row A. Display in JQuery works fine. But I get nothing if I select line B. I know that my "select" have the same name but that's precisely the goal for me. Have only one "select" to process but only the displayed one.
Hoping to be clear in my question which is "Why no display when selecting line B while it works with line A...?
You cannot have two elements with the same id within one page. Hence I update your code using different Ids for the two selects.
In order to register the event using the name, you can use the attribute selector instead. [name="mySelect"] would do the trick.
The reason why the change event is not working on line B is because $('#mySelect').change(function(){}) only register the event on the first select which turn out is the Line A <select>
$(document).ready(() => {
$('input[type="radio"]').on('change', (e) => {
$("#lineA").hide();
$("#lineB").hide();
if (e.currentTarget.id === 'lineChoiceA') {
$("#lineA").show();
} else {
$("#lineB").show();
}
})
// If Change on List
$('[name="mySelect"]').change(function() {
// Just Display in Console
console.log($(this).val());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td colspan="2">
<input type="radio" name="lineChoice" id="lineChoiceA" value="A"><label for="lineChoiceA">Line A</label>
<input type="radio" name="lineChoice" id="lineChoiceB" value="B"><label for="lineChoiceB">Line B</label>
</td>
</tr>
<tr id="lineA" style="display: none;">
<td>List A : </td>
<td>
<select name="mySelect" id="mySelect1">
<option value=""></option>
<option value="A0">A0</option>
<option value="A1">A1</option>
<option value="A2">A2</option>
</select>
</td>
</tr>
<tr id="lineB" style="display: none;">
<td>List B : </td>
<td>
<select name="mySelect" id="mySelect2">
<option value=""></option>
<option value="B0">B0</option>
<option value="B1">B1</option>
<option value="B2">B2</option>
</select>
</td>
</tr>
</table>
I'm looking for a way to target my value option page 1 of X. It seems this is defined as a value option. Can i just target the div class to move it down the page slightly to align with another element?
Html:
<div class="pager">
<form class="awpcp-pagination-form" method="get">
<table>
<tbody>
<tr>
<td>1</td>
<td>
<select name="results">
<option value="5">5</option>
<option value="10" selected="selected">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="60">60</option>
<option value="70">70</option>
<option value="80">80</option>
<option value="90">90</option>
<option value="100">100</option>
<option value="500">500</option>
</select>
</td>
</tr>
</tbody>
</table>
</form>
Page: https://adsler.co.uk/browse-adsler/
Your question is quite undefined, but assuming you want a way to target the element and based on the provide HTML this are ways to target the specific HTML elements.
/* Pagination container */
.awpcp-pagination-form {
outline: 1px solid purple;
padding: 10px;
}
/* Only the selection within container */
.awpcp-pagination-form select {
outline: 1px solid blue;
}
/* or */
select[name="results"] {
background: red;
}
<div class="pager">
<form class="awpcp-pagination-form" method="get">
<table>
<tbody>
<tr>
<td>1</td>
<td>
<select name="results">
<option value="5">5</option>
<option value="10" selected="selected">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="60">60</option>
<option value="70">70</option>
<option value="80">80</option>
<option value="90">90</option>
<option value="100">100</option>
<option value="500">500</option>
</select>
</td>
</tr>
</tbody>
</table>
</form>
If I understand your question you can do this using margins with css.
.divclass{
margin-top: 2%;
}
Something like that might work. You can also try using Flex-Box or Grid.
Good luck!
I have a form on my site and I want to put a button and select tag on the same line, but it keep causing line break. I've tried a button instead and it works totally fine one after another on a line. I am using bootstrap 3.
<div class="panel-footer" style ="overflow: hidden; white-space: nowrap;">
<button type="submit" class="btn btn-success" style="width:100px; margin:4px;">send</button>
<button type="submit" class="btn btn-success" style="width:100px; margin:4px;">send</button>
<select class="form-control" style = "width:100px; margin:4px;">
<option value="volvo">Math</option>
<option value="saab">History</option>
<option value="opel">English</option>
<option value="audi">Gymnastics</option>
</select>
</div>
There is enough space for like 4 more selects on the line.
use display: inline; or display: inline-block; on the select and the button
You can put the select and button inside a table.
Works for me. Simple really.
<table>
<tr>
<td>
<select>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
</td>
<td>
<input type="submit" value="Choose number">
</td>
</tr>
</table>
The forms which l have here, have required files to be entered before the submit button. All l need it for the top 'title' list to be required='true'. I know how to do it for each and every of the text forms but unsure how to position the code for an options choice list.
Cheers guys.
Please take a look at the jsfiddle l have created for this:
http://jsfiddle.net/New_to_Websites/5A4vS/#run
Code:
<script language="javascript">
var sa_sent_text = 'Thank you for contacting us. We will get back to you soon.';
function sendme() {
alert(sa_sent_text);
document.getElementById("name").value = "";
document.getElementById("message").value = "";
document.getElementById("subject").value = "";
document.getElementById("email").value = "";
return false;
}
</script>
<div id="sa_contactdiv">
<form name=sa_htmlform style="margin:0px" onsubmit="return sendme();">
<table>
<tr>
<td>Title:
<br>
<select name="title" size="1">
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
<option value="Miss">Miss</option>
<option value="Ms.">Ms.</option>
<option value="Dr.">Dr.</option>
<option value="Prof.">Prof.</option>
<option value="Other">Other</option>
</select>
</td>
</tr>
<tr>
<td>Name:
<br>
<input type="text" id="name" name="name" />
</td>
</tr>
<tr>
<td>E-mail Address: <span style="color:#D70000">*</span>
<br>
<input type="text" id="email" name="email" required="true" />
</td>
</tr>
<tr>
<td>Subject: <span style="color:#D70000">*</span>
<br>
<input type="text" id="subject" name="subject" required="true" />
</td>
</tr>
<tr>
<td>Message: <span style="color:#D70000">*</span>
<br>
<textarea name="message" id="message" cols="42" rows="9" required="true"> </textarea>
</td>
</tr>
<tr>
<td>
<input type="submit" value="Send Message" style="font-weight:bold">
</td>
</tr>
</table>
</form>
</div>
This should work:
<select name="title" size="1" required aria-required=”true”>
<option value="">Please Choose</option>
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
<option value="Miss">Miss</option>
<option value="Ms.">Ms.</option>
<option value="Dr.">Dr.</option>
<option value="Prof.">Prof.</option>
<option value="Other">Other</option>
</select>
If you have an option with a empty value as default, the required attribute works.
Working Fiddle
The required attribute is a boolean attribute. When specified, the user will be required to select a value before submitting the form.
If a select element has a required attribute specified, does not have a multiple attribute specified, and has a display size of 1; and if the value of the first option element in the select element's list of options (if any) is the empty string, and that option element's parent node is the select element (and not an optgroup element), then that option is the select element's placeholder label option.
Quoted from http://dev.w3.org/html5/spec-author-view/the-select-element.html
Try this
<td>Title:<span style="color:#D70000">*</span>
<br>
<select name="title" size="1" required="true">
<option value=""></option>
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
<option value="Miss">Miss</option>
<option value="Ms.">Ms.</option>
<option value="Dr.">Dr.</option>
<option value="Prof.">Prof.</option>
<option value="Other">Other</option>
</select>
I have a jsfiddle below:
http://jsfiddle.net/C95uc/3/
I am having trouble with my css. I want to display both drop down menus on the left above one another and I want to display the text inputs on the right hand side, but how can I do this?
Below is the html code:
<div class='lt-container'>
<form id='moduleForm'>
<select name="module" id="modulesDrop">
<option value="">Please Select Module</option>
</select>
</form>
</div>
<div class='lt-container' >
<form id='moduleExistForm'>
<select name="module" id="modulesDrop">
<option value="">Please Select Course</option>
</select> </form>
</div>
<div id='rt-container' >
<form id='detailsForm'>
<table>
<tr>
<th></th>
<td><input type='hidden' id='idmodule' name='moduleid' value='' /> </td>
</tr>
<tr>
<th>Module ID:</th>
<td><input type='text' id='nomodule' name='moduleno' readonly='readonly' value='' /> </td>
</tr>
<tr>
<th>Module Name:</th>
<td><input type='text' id='namemodule' name='modulename' readonly='readonly' value='' /> </td>
</tr>
<tr>
<th>Credits:</th>
<td><input type='text' id='credits' name='creditsname' readonly='readonly' value=''/> </td>
</tr>
</table>
<div id='moduleAlert'></div>
</form>
</div>
CSS:
.lt-container, #rt-container {
float: left;
}
#rt-container {
clear: right;
margin-left: 5%;
}
http://jsfiddle.net/C95uc/4/
<div class='lt-container'>
<form id='moduleForm'>
<select name="module" id="modulesDrop">
<option value="">Please Select Module</option>
</select>
</form>
<form id='moduleExistForm'>
<select name="module" id="modulesDrop">
<option value="">Please Select Course</option>
</select> </form>
</div>
Both <select> go in the same <div class='lt-container'>
The two dropdowns don't stack on top of each other because you have assigned both of them a "float:left" property which makes them go side by side. Instead, wrap them in a div and make that div float left.
<div class="lfloat">
<!-- Both Dropdowns -->
</div>
CSS:
.lfloat {
float:left;
}
Be sure to add a "float:right" property to the form so that it doesn't appear below the two drop downs.
Example: http://jsfiddle.net/C95uc/5/