Working with bootstrap I use next code when I need to change layout of label/input
depending on device :
<fieldset class="bordered text-muted p-0 m-0 mb-4">
<legend class="bordered">Filters</legend>
<dl class="block_2columns_md m-0 p-2">
<dt class="key_values_rows_label_13">
<label class="col-form-label" for="filter_title">
By title
</label>
</dt>
<dd class="key_values_rows_value_13">
<input style="flex: 1 0" name="filter_title" id="filter_title" class="form-control" type="text" value="" v-model="filter_title">
</dd>
</dl>
and changing in block_2columns_md flex-direction depending on device
I put on small devices label input on different rows.
Now I work with bootstrap-vue and wonder whicj elements bootstrap-vue have for such blocks,
as I suppose using of bootstrap-vue is prefered if I use bootstrap-vue ...
"bootstrap-vue": "^2.3.0",
Thanks!
Sounds like what you want is the Form Group component. More specifically the Horizontal Layout portion of it.
The component has label-cols-{breakpoint} props to define how much space the label should use at a given breakpoint. It uses the same 12 grid system as normal bootstrap uses.
So if you want the label to use the entire row (be above the input) at a certain breakpoint, add label-cols-{breakpoint}="12" to the form-group.
The snippet has the label above on small mobile devices, and on sm and above it's beside the input.
new Vue({
el: '#app'
})
<link href="https://unpkg.com/bootstrap#4.4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue#2.4.1/dist/bootstrap-vue.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.4.1/dist/bootstrap-vue.js"></script>
<div id="app">
<b-form-group label-cols="12" label-cols-sm="2" label="Default">
<b-input></b-input>
</b-form-group>
</div>
Related
I have an input with a prepend from Bootstrap, looks nice and modifiable. I know I can put another button on the other side, but can that button be a reset? I have tried multiple things. Here is what I know and I will attach pictures below.
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Your calculation</span>
</div>
<input type="number" onkeypress="return isNumberKey(event)" onkeyup="return truncateDecimals(this, 2)" id="userInputMapOne" class="form-control" min="0" max="1000" step="0.01" aria-label="input value for your zone" value="e.g 12.34">
This is the current code I am using, it is NOT wrapped in a form. When I wrap it in a form things stop working for a strange reason. I am already having troubles with this, the min/max and step don't work (I have controlled min/max and step with JavaScript). So, is there a way to prepend (or append at the same time as a prepend) a second button onto that input and without being in a form and use that to clear the input field back to the default of ""?
It seemed like an easy job but this constantly interfered with the data being input. And for a weird reason, I can't seem to put a form just wrapping this input without upsetting the divs.
Note: While this would certainly work I think it would be in your bests
interests to review why a <form> is interfering with the
functionality of your code.
You cannot add a true <button type="reset">...</button> because you are not using a <form> and so the reset button doesn't know what to actually 'do'. You can quickly do something similar with just a few modifications of your existing code:
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Your calculation</span>
</div>
<input type="number" id="calculation" onkeypress="return isNumberKey(event)" onkeyup="return truncateDecimals(this, 2)" id="userInputMapOne" class="form-control" min="0" max="1000" step="0.01" aria-label="input value for your zone" value="e.g 12.34">
<div class="input-group-append">
<button role="button" class="btn btn-secondary" onclick="document.getElementById('calculation').value = ''">Reset</button>
</div>
</div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
First you need to add an ID to your input field so that you can easily target the field with a bit of JavaScript. Then you just need to add an .input-group-append to extend the input-group to include the new button we'll be adding.
The button operates just like any button would, with the exception that there is an onclick event:
document.getElementById('calculation').value = ''
This finds the field with an ID value of calculation and on a click event resets the value of that field to empty. It's not a reset in the true sense of how <button type="reset">...</button> would operate, but functionally it achieves the same result.
This is a very simple and probably scilly question but I can't figure it out. I need a label to be on the same line as the associated select, using Bootstrap CSS. The select keeps 'jumping' below the label if I reduce window's width. How is it possible to control this behaviour using Bootstrap classes? I would need to keep both on the same line, whatever window's width is.
Code sample:
<form class="form-inline">
<div class="form-group">
<label for="example">Year</label>
<select class="form-control" id="example">
<option>2016</option>
<option>2015</option>
</select>
</div>
</form>
See on JS Fiddle here.
Your current solution is default, but you could also make use of columns inside the form. In the next article in bootstrap columns are used, see: http://getbootstrap.com/css/#forms-horizontal
What you are looking for is:
<form class="form-horizontal">
<div class="form-group">
<label for="example" class="col-xs-2 control-label">Year</label>
<div class="col-xs-10">
<select class="form-control" id="example">
<option>2016</option>
<option>2015</option>
</select>
</div>
</div>
</form>
I'm trying to force a <label/> and its <input/> to stay on the same line.
I'm using the form-control class to make the <input/> pretty. However, when I do so, it REALLY wants to put itself on a separate line. I'm avoiding using rows and columns because I want the label right next to the textbox, not to move around depending on the size of the screen.
<div>
<label class="form-label">Search</label>
<input type="text" class="form-control">
</div>
I want this:
Search [______________________]
I get this:
Search
[_____________________]
How do I force them to stay on the same line?
http://embed.plnkr.co/qA2s5RGRpvfRa7rhiq1n/preview
What you are looking for is referred by Bootstrap as an inline form or horizontal form.
<form class="form-inline" role="form">
<div class="form-group">
<label class="form-label">Search</label>
<input type="text" class="form-control">
</div>
</form>
Make sure your form has the form-inline class on it and realistically they should be wrapped in a form-group. The inline form make everything in one line.
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">Search</label>
<div class="col-sm-10">
<input type="text" class="form-control">
</div>
</div>
</form>
When using form-horizontal, the form-group acts like a row, so you can move content to separate lines :) With that, you would need to use grid properties so the label/input is properly aligned.
I'm trying to learn bootstrap on my site but the form is just too narrow that I cannot change the width by changing the text field's cols.
see the page:
http://saslab.org/mycontact.php
and this page:
http://saslab.org/testme.html
could some one educate me on this?
thank you!
John
do it like this:
<div class="row">
<div class="span4">
<p>Name</p> <input type="text" name="name">
</div>
<div class="span4">
<p>Email</p> <input type="text" name="email">
</div>
<div class="span4">
<p>Phone</p> <input type="text" name="phone">
</div>
</div>
wrap the p tag and input with span
You have a line in your source: <div class="container marketing">. Upon further inspection, your 'marketing' class has the attribute text-align:center. This means all of your form will be centered because the div that contains it has that class. This is why your form is narrow.
Specifically, you have a file called mycontact.php and here's what you have for the CSS that applies:
.marketing .span12 {
text-align: center;
}
well, i guess it is Bootstrap's default css that causes the narrowing. in the following links, you can see the contrast
one without bootstrap:
http://saslab.org/testme.html
one with bootstrap:
http://saslab.org/testme_bootstrap.html
I am creating a form that requires the user to input their name and email address. The first line of the form has two inputs side by side for each part of the name and the 2nd line has one input for the email address that should be the same width as the first line combined. I'm trying to use the fluid grid system but can't line up the 2nd row with the first.
<form action="/subscriptions" method="post">
<fieldset>
<div class="control-group">
<label class="control-label" for="name">Name</label>
<div class="controls row-fluid">
<input class="span2" id="first_name" name="first_name" placeholder="First" required="required" type="text">
<input class="span2" id="last_name" name="last_name" placeholder="Last" required="required" type="text">
</div>
</div>
<div class="control-group">
<label class="control-label" for="email">Email</label>
<div class="controls row-fluid">
<input class="span4" id="email" name="email" type="email">
</div>
</div>
</fieldset>
</form>
http://jsfiddle.net/sguha095/v4amX/
Have a look a this jdfiddle: http://jsfiddle.net/kY5LL/18/
I added some div.row-fluid containers per row of your form and one extra set of inputs for demonstration.
Hope this is what you were looking for.
First we need to clean up the HTML a bit, there is an extra closing div on the first line.
I just added some classes to improve the styling so you could see how it works. The input-block-level class is a bootstrap mixin to force inputs to act like true block level elements. That's needed if you want this to be clean and to leverage the benefits of CSS. If you want to do all of your styling with HTML, then you can do so with more markup and less semantic methods, but I would recommend against it.
Hope this helps!
http://jsfiddle.net/kY5LL/12/