In the example you see below, the text (Faculty not selected) stands under the checkbox, i didn't get any special features when i checked the attributes from style palette. Normally text should be near the checkbox. Any idea about the problem?
<div class="container">
<div class="row">
<form class="col s12">
<div class="row mt50">
<div class="input-field col s3">
<select class="validate faculty" name="faculty" id="faculty" onchange="getCourse();">
<option value="">Choose</option>
<option value="FEng">Faculty of Engineering</option>
<option value="FMed">Faculty of Medicine</option>
<option value="FSci">Faculty of Science</option>
</select>
<label for="faculty">Faculty</label>
</div>
<div class="input-field col s4">
<select name="course" id="course" multiple>
<option value="" disabled>Faculty not selected</option>
<select/>
<label for="course">Course</label>
</div>
</div>
</form>
</div>
</div>
You just need to add either display:inline or display:flex on #course. Something is probably making the checkbox display:block by default.
Related
I'm trying to create an inline form with a text and select input, but I'm unable to get it to look how I want it.
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Body -->
<div class=r ow>
<div class="col-lg-12">
<div class=r ow>
<div class="col-md-2">
<label for="the_select" class="form-label">Key Name</label>
</div>
<div class="col-md-2">
<select class="form-select" id="the_select">
<option selected>Open this select menu</option>
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
<option value="Other">Other</option>
</select>
</div>
<div class="col-md-2">
<label for="value_field_id" class="form-label">Variable Name</label>
</div>
<div class="col-md-2">
<input type="text" class="form-control" id="value_field_id">
</div>
</div>
</div>
</div>
This is my current hmtl code. I'm using bootstrap 5. The label is waaaay to far apart from the corresponding input/select and it's not vertically center with it. Is there an easy way to correct this? I tried chaging the display in the styled field of the label but it gets completely ignored.
These 2 Bootstrap Flex class additions should:
center both flex items vertically and
move 1st flex item's <label> content to the right border of its parent flex item.
<div class = row align-items-center*>
<div class = "col-md-2">
<label for="the_select" class="form-label ms-auto">Key Name</label>
<div class="col-sm-6">
<div class="form-group">
<label for="country">Country:</label>
<select class="form-control bfh-countries" data-country="US"></select>
</div>
</div>
I want to select the countries using this form.
I think you'd probably rather bring in the countries via SQL. Though, if you're going to manually enter them, just add the <option> tag with a value and text.
<div class="col-sm-6">
<div class="form-group">
<label for="country">Country:</label>
<select class="form-control bfh-countries" data-country="US">
<option value="United States">United States</option>
</select>
</div>
</div>
I am trying to add a checkbox below a select element in an inline form. Is there an option to "break" the line in order to add the checkbox below?
This is what I am trying to achieve:
And this is what I have at the moment:
jsFiddle
<div class="form-inline">
<div class="form-group">
<select class="form-control select-year text-smd">
<option>Month</option>
<option>January</option>
<option>February</option>
</select>
</div>
<div class="form-group">
<select class="form-control select-year text-smd">
<option>Year</option>
<option>2016</option>
</select>
</div>
<div class="form-group ml-15 mr-15">
<label> - </label>
</div>
<div class="form-group">
<select class="form-control select-year text-smd">
<option>Month</option>
<option>January</option>
<option>February</option>
</select>
</div>
<div class="form-group">
<select class="form-control select-year text-smd">
<option>Year</option>
<option>2016</option>
</select>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> I currently work here
</label>
</div>
</div>
I think the easiest way is to put it in a help-block and right align it. Then add a little CSS to override the form-group aligment to the top.
.form-inline .form-group {
vertical-align: top;
}
http://bootply.com/dCbo7trghW
best answer is that from Aramil (in the comments)
if you wan the "lazy" option, you can always use this
(i do not recommend this code, use the grid instead)
.checkbox-inline{
position: relative;
top: 2em;
right: 11em;
}
I got 2 input fields below. One select another input text. I need it to stay inline even in mobile mode.
How do I prevent input fields within from breaking? They stay inline regardless of screen size.
<div class="col-sm-4">
<label class="control-label">Form label</label>
<div class="form-inline">
<div class="form-group">
<select class="form-control">
<option value="A">Option A</option><option value="B">Option B</option><option value="C">Option C</option><option value="D">Option D</option>
</select>
</div>
<div class="form-group">
<input class="form-control" type="text">
</div>
</div>
</div>
From http://getbootstrap.com/css/
Bootstrap's inline forms, as in:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form class="form-inline">
<div class="form-group">
<select class="form-control" >
<option>Thing One</option>
<option>Thing Two</option>
</select>
</div>
<div class="form-group">
<input type="text" class="form-control">
</div>
</form>
States in the docs 'This only applies to forms within viewports that are at least 768px wide.'
You could directly force them to stay inline with a fluid width in CSS and floating the elements.
Ex: https://jsfiddle.net/cm94dup9/
You can use tables for both select field and text field.
In table you can specify the width of the so both are inline.
<table>
<tr><td><div class="form-group">
<select class="form-control">
<option value="A">Option A</option><option value="B">Option B</option><option value="C">Option C</option><option value="D">Option D</option>
</select>
</div></td></tr>
<tr><td>
<div class="form-group">
<input class="form-control" type="text">
</div>
</td></tr>
</table>
if you mean inline, both to be have same width and are on each other. Not that both are in same line.
What has worked for me is wrapping the label and input, select, checkbox, etc.. in a div tag.
<form>
<div style=" white-space: nowrap;overflow: hidden;" >
<label>
<select>
<option value="?">Select</option>
<option value="february">February</option>
<option value="march">March</option>
<option value="april">April</option>
</select>
</label>
</div>
</form
i have a form which i implemented form-inline and bootstrap-select . That is working fine for screen width> 768, however when i try to resize it to ipad size, it is no longer inline. How to solve my problems:
because i set data-width="auto" for bootstrap-select, it is no 100% (1 column) or 50%(2 columns, which is most ideal in ipad case to display two select box side by side). i tried many ways, e.g. resetting the attribute data-width to "50%" then call $('.selectpicker').selectpicker(render);, but failed, what to do?
the checkboxes are auto break into four lines, for ipad size, i think it is better to keep them in one line, what can i do?
JSFiddle links: http://jsfiddle.net/nc16ntwq/ as the codes cant appear
<form class="form-inline" style="margin:10px 0px;">
<div class="form-group">
<select id="date" name="date" class="date selectpicker" data-width="auto">
<option value='01'>01</option>
<option value='02'>02</option>
</select>
</div>
<div class="form-group">
<select id="dateYear" name="dateYear" class="date selectpicker" data-width="auto">
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
</select>
</div>
<div class="form-group">
<select id="toDate" name="toDate" class="date selectpicker" data-width="auto">
<option value='01'>01</option>
<option value='02'>02</option>
<option value='03'>03</option>
</select>
</div>
<div class="form-group">
<select id="toDateYear" name="toDateYear" class="date selectpicker" data-width="auto">
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019" selected>2019</option>
</select>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input id="v1" type="checkbox" checked> Value 1
</label>
</div>
<div class="checkbox">
<label>
<input id="v2" type="checkbox" checked> value 2
</label>
</div>
<div class="checkbox">
<label>
<input id="v3" type="checkbox"> value 3
</label>
</div>
<div class="checkbox">
<label>
<input id="v4" type="checkbox"> Values 4
</label>
</div>
</div>
</form>
JSFIddle. I only do this for dropdown. Just add this to you CSS
.form-inline .form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}