I am using the Themify builder and I created a small form in a text block in the builder.
There is unintentional gap above the fields. You can view it live here.
HTML:
<form action="contact_info.php" method="get">
Loan Calculator
<select class="form-inline">
<option value="1000">$1,000 Loan</option>
<option value="2000">$2,000 Loan</option>
<option value="5000">$5,000 Loan</option>
<option value="7500">$7,500 Loan</option>
<option value="10000">$10,000 Loan</option>
<option value="12000">$12,000 Loan</option>
<option value="15000">$15,000 Loan</option>
<option value="17000">$17,000 Loan</option>
<option value="20000">$20,000 Loan</option>
<option value="25000" selected="selected">$25,000 Loan</option>
<option value="30000">$30,000 Loan</option>
<option value="40000">$40,000 Loan</option>
<option value="50000">$50,000 Loan</option>
<option value="60000">$60,000 Loan</option>
<option value="70000">$70,000 Loan</option>
<option value="80000">$80,000 Loan</option>
<option value="90000">$90,000 Loan</option>
<option value="100000">$100,000 Loan</option>
</select>
<select class="form-inline">
<option value="1">1 Year</option>
<option value="2">2 Years</option>
<option value="3">3 Years</option>
<option value="4">4 Years</option>
<option value="5" selected="selected">5 Years</option>
<option value="6">6 Years</option>
<option value="7">7 Years</option>
</select>
<input type="submit" value="Calculate" class="form-inline">
</form>
CSS:
.form-inline {
display: inline-block;
margin: 0px;
float: left;
}
Hi please remove <br> tag between <select> in your code and your form fields will be shown as you want. <br> tag forces to break the line, that is why see such gaps.
On your demo page, there are <br> tag after every element in the form, please remove that.
I figured out the problem.
Wordpress adds <br> tags automatically if there is whitespace between form tags.
I removed all the whitespaces between every single tag and the problem was solved.
Related
i am trying to chaneg the colour of text using twitter-bootstrap but something is wrong it is not working.
here is my code:
<select name="number" '<?=htmlspecialchars($s['number'])?>'td>"
<option><?=htmlspecialchars($s['number'])?></option>
<option class="text-cuccess">Tak</option>
<option class="text-danger">Nie</option>
</select>
.newcolor {
color:red;
}
.newcolor1{
color:green;
}
<select id="select" onchange="this.className=this.options[this.selectedIndex].className">
<option style="color:gray" value="null">select one option</option>
<option value="1" class="newcolor">one</option>
<option value="2" class="newcolor">two</option>
<option value="2" class="newcolor1">two</option>
</select>
I am using Materialize.css library (v 1.0.0), as of 2018 for my project to add the material components. However, I failed to initialize two select boxes with it.
I have two select boxes in my page.
$(function() {
$("#numPagesPaginate").formSelect();
$("#numRatingsEdit").formSelect();
});
<select id="numPagesPaginate" name="numPagesPaginate" data-ng-model="bkCtrl.page.pageSize">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="numRatingsEdit" name="numRatingsEdit" style="display:none">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
However, when I initialize both the select boxes using this only the first one works.
In addition, if I initialize the second selectbox in the script tag elsewhere, the box gets initialized and works, but there is one duplicate selectbox.
Edited: To add this question, I want to tell you that I have read the documentation and the default method. However, no results.
You should follow documentation and initialize globally with one line:
$('select').formSelect();
Just like Serg said, you should follow the documentation properly.
<div class="container">
<div class="row">
<div class="col s6">
<label>Num Pages Paginate</label>
<select id="numPagesPaginate" name="numPagesPaginate" data-ng-model="bkCtrl.page.pageSize">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div class="col s6">
<label>Num Ratings Edit</label>
<select id="numRatingsEdit" name="numRatingsEdit">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('select').formSelect();
});
</script>
<select class='ui selection dropdown' name='YearLevel' style="display:none" id='YearLevel'>
<option value=''>Year Level</option>
<option value='II'>I</option>
<option value='II'>II</option>
<option value='III'>III</option>
<option value='IV'>IV</option>
</select>
<style>
select#YearLevel{
display:none !important;
}
</style>
I tried everything I know but it just wouldn't work.
We want to display birthday in dropdown list
How to use Multiple select tag in single line while using bootstrap?
<div class="form-group col-lg-12">
<label>Birthday</label><br>
<select class="form-control" id="sel1">
<option value="jan">Jan</option>
<option value="jan">Feb</option>
<option value="jan">Mar</option>
................
<option value="jan">Dec</option>
</select>
<select class="form-control" id="sel2">
<option value="">Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
................
<option value="jan">12</option>
</select>
<select class="form-control" id="sel2">
<option value="">Year</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
................
<option value="2015">2015</option>
</select>
</div>
Note: we are using bootstrap
You need to use the form-inline class on the parent element...
<div class="form-inline">
<div class="form-group col-lg-12">
<label>Birthday</label><br>
<select class="form-control" id="sel1">
<option value="jan">Jan</option>
<option value="jan">Feb</option>
<option value="jan">Mar</option>
................
<option value="jan">Dec</option>
</select>
<select class="form-control" id="sel2">
<option value="">Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
................
<option value="jan">12</option>
</select>
<select class="form-control" id="sel2">
<option value="">Year</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
................
<option value="2015">2015</option>
</select>
</div>
</div>
DEMO
For the first time i needed to restyle some dropdown select menu's. Only they leave me with a problem.
I can't seem to get them lined up with the submit image. Anyone got any tips? Maybe i'm overlooking something simple.
<body>
<div class="filterbalk">
<form>
<label>
<select style="width: 250px;">
<option>Woningtype</option>
</select>
</label>
<label>
<select style="width: 250px;">
<option>Plaats</option>
</select>
</label>
<label>
<select style="width: 90px;">
<option value="0">Prijs van</option>
<option value="0">0</option>
<option value="100">100</option>
<option value="200">200</option>
<option value="300">300</option>
<option value="400">400</option>
<option value="500">500</option>
<option value="600">600</option>
<option value="700">700</option>
<option value="800">800</option>
<option value="900">900</option>
<option value="1000">1000</option>
</select>
</label>
<label>
<select style="width: 90px;">
<option value="1000000000">Prijs tot</option>
<option value="100">100</option>
<option value="200">200</option>
<option value="300">300</option>
<option value="400">400</option>
<option value="500">500</option>
<option value="600">600</option>
<option value="700">700</option>
<option value="800">800</option>
<option value="900">900</option>
<option value="1000">1000</option>
<option value="1000000000">1000+</option>
</select>
</label>
<input type="image" src="http://www.wauwwebdesign.nl/problem/buttonFilter.jpg" value="Filter" id="submit">
</form>
</div>
Both HTML and CSS can be found in the fiddle. I can't seem to paste the CSS here.
http://jsfiddle.net/5FcLf/
I think all you need to add is
#submit {
display: inline-block;
vertical-align: top;
}
JSFiddle
Then tweak...