I have a text field and a button with the following code:
<form class="form-inline" role="form" method="POST" action="{!! route('buyer_bid_create', ['id' => $lot->id ]) !!}">
<input type="hidden" name="_token" value="{{{ csrf_token() }}}" />
<div class="form-group">
<input type="text" class="form-control" name="bid_value" id="bid_value" placeholder="VAT number">
</div>
<div>
<button type="submit" class="btn btn-success">Confirm VAT number</button>
</div>
</form>
The result is shown below:
How can I ensure a whiteline between the textbox and the button?
You can apply a margin-bottom to the input wrapper with a separate class.
You'll need to use !important because .form-inline .form-group has a margin-bottom: 0 property.
<form class="form-inline" role="form" method="POST" action="{!! route('buyer_bid_create', ['id' => $lot->id ]) !!}">
<input type="hidden" name="_token" value="{{{ csrf_token() }}}" />
<div class="form-group margin-bottom">
<input type="text" class="form-control" name="bid_value" id="bid_value" placeholder="VAT number">
</div>
<div>
<button type="submit" class="btn btn-success">Confirm VAT number</button>
</div>
</form>
.margin-bottom{
margin-bottom: 1.25rem;
}
http://codepen.io/tomanagle/pen/rLEGXz
In your example, you could add some custom CSS on form-group
.form-inline .form-group {
margin-bottom: yourValue;
}
Only do that if you want to apply the margin to all form-group elements
Or you could add a new class to the element and apply styling that way. Use this method if you only want to add the margin to specific form-group elements
HTML
<div class="form-group form-group--margin-bottom">
<input type="text" class="form-control" name="bid_value" id="bid_value" placeholder="VAT number">
</div>
CSS
.form-inline .form-group--margin-bottom {
margin-bottom: yourValue
}
You need to include the .form-inline class to override bootstrap's specific targeting of that element. I wouldn't advise using !important unless absolutely necessary as it came make the CSS harder to understand in the future
I have a working version of the 2nd option on codepen
Related
I would like to remove all the extra spacing between my form controls using bootstrap 4 horizontal form to make it more compact and smaller. I added the css below which removes some of the spacing, but the spacing between label and input is still there and I cant figure out how to remove it.
.form-group {
margin-top: 0;
margin-bottom: 0;
}
Use !important to prevent override:
.form-group {
margin-bottom: 0px!important;
}
Or use bootstrap 4 spacing:https://getbootstrap.com/docs/4.0/utilities/spacing/
<div class="form-group mb-0">
For example:
.space .form-group {
margin-bottom: 0px!important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form action="/action_page.php">
<h1>Without space</h1>
<div class="space">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="form-grou">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
</div>
<h1>With space</h1>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
</form>
Bootstrap sets a default margin-bottom on the .form-group class:
By default it only applies margin-bottom
https://getbootstrap.com/docs/4.1/components/forms/#form-groups
If youre using precompiled bootstrap just overwrite it using a stronger selector (aka proper cascading).
If youre compiling bootstrap yourself just set the $form-group-margin-bottom variable to whatever value you desire (e.g. 0).
I solved it by adding
label {
margin-bottom: 0;
}
It works fine now.
size of the select field is affecting by a bootstrap file as shown in the screenshot and i'm unable to find out how to solve this problem.
<form>
<div class="form-group">
<label for="name" class="labstyle">Enter Your Name</label>
<input type="text" class="form-control" name="name" size="20"
maxlength="40" placeholder="Enter You Name" required autofocus>
</div>
<div class="form-group">
<label for="sell" class="labstyle">Chose Your Wish:</label>
<select class="form-control" id="sell">
<option value="0" hidden="hidden" disabled="" selected="">Chose Your
Wish</option>
<option value="morning">Good Morning</option>
<option value="night">Good Night</option>
</select>
</div>
<div class="form-group">
<label for="message" class="labstyle">Message</label>
<textarea class="form-control" name="message" rows="3" cols="40"
placeholder="Optional" maxlength="92"></textarea>
</div>
<button type="submit" class="btn" id="btncustom">Create</button>
</form>
Adding the following will calculate correctly the height in this situation.
select.form-control:not([size]):not([multiple]) {
height: auto!important;
}
include this in abc.component.ts
styles: [`
:host /deep/ select.form-control:not([size]):not([multiple]) {
height: auto!important;
padding: 0.375rem 0.75rem;
}`]
Ok, inside your custom select.form-control class, try to decrease the line-height property for something like that:
line-height: 1.0;
or maybe a small value.
Add this class in your custom style sheet (css file).
.form-control{
height:30px;
line-height:30px;
padding:6px;
}
include this on your css it will fix the problem
#sell.form-control{
height: 46px important!;
}
I want to add a Textfield input-group-addon. The problem is that when I use this class with a glyphicon the icon is not positioned right next to textfield see the image below.
Maybe someone has some hints for me - why is that?
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="name2"></label>
<div class="col-md-4">
<input id="name2" name="name2" type="text" placeholder="" class="form-control input-md">
</div>
</div>
<!-- Multiple Radios (inline) -->
<div class="form-group">
<label class="col-md-4 control-label" for="gender">Geschlecht</label>
<div class="col-md-4">
<label class="radio-inline" for="gender-0">
<input type="radio" name="gender" id="gender-0" value="1" checked="checked">
männlich
</label>
<label class="radio-inline" for="gender-1">
<input type="radio" name="gender" id="gender-1" value="2">
weiblich
</label>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="gender">Geburtsdatum</label>
<div class="col-md-4">
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker2').datetimepicker({
language: 'de'
});
});
</script>
</div>
</div>
Your code works fine with Bootstrap only (see this fiddle http://jsfiddle.net/WNAB8/1/)
The problem is in your own css. Use developer tools (F12) to find out what gives margin-right for the input or margin-left for the addon. Or optionally paste in your custom css so we can help you.
Update:
It definitely is because of given max-width for inputs. If for some reason you want to use max-width anyway, one solution is to give the max-width to .input-group:
.input-group {
max-width: 280px;
}
Demo: http://jsfiddle.net/WNAB8/5/
In your fiddle you are overriding bootstrap's textarea maxwidth option. Remove this from CSS:
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
Working example
If you want to change the width of your text areas, change it using the form layout. From your layout you should look at the horizontal form and width can be changed by placing the input into a div controlled with the col-*:
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
I'd like to have some "horizontally styled" fields inside a "vertically styled" form with Bootstrap.
How can I do that (if possible)?
You can leverage Bootstrap's existing classes (checkbox.inline)to get the effect you're looking for. The key to making it look right is to specify padding-left: 0px; on the labels:
<div class="control-group">
<div class="controls">
<label class="checkbox inline" style="padding-left: 0px;" for="inputColor">Favorite Color <input type="text" id="inputColor" class="span2" /></label>
<label class="checkbox inline" style="padding-left: 0px;" for="inputNColor">Next Color <input type="text" id="inputNColor" class="span2" /></label>
</div>
</div>
Please see http://jsfiddle.net/jhfrench/Hzucn/ for a working example.
I tried to create a new class for you (along the lines of .controls-row label.inline { padding-left: 0px;} so you wouldn't have to do styling on the element, but it caused more conflicts than I anticipated. So if you're going to use this solution pervasively, you might want to invest the time in untangling that...
You can use similar formatting to .form-horizontal implementation in bootstrap. (scroll sown to Horizontal Forms here: http://twitter.github.com/bootstrap/base-css.html#forms)
Wrap your labels and form elements in grouping divs (that's what .control-group does in Horizontal Form layout in bootstrap).
Float labels left to show them in horizontal alignment with the fields.
label.horizontal {
float: left;
width: 160px;
padding-top: 5px;
margin-right: 20px;
text-align: right;
}
In the above example, labels with class .horizontal will be "horizontally styled" and the rest "vertical" or default form layout.
there is a class ready to use on bootstrap!
check this example:
<div class="span6">
<form>
<div class="controls controls-row">
<input id="name" name="name" type="text" class="span3" placeholder="Name">
<input id="email" name="email" type="email" class="span3" placeholder="Email address">
</div>
<div class="controls">
<textarea id="message" name="message" class="span6" placeholder="Your Message" rows="5"></textarea>
</div>
<div class="controls">
<button id="contact-submit" type="submit" class="btn btn-primary input-medium pull-right">Send</button>
</div>
</form>
</div>
I have few form fields, each input and label is wrapped inside a div in following way:
<div class="field">
<label for="name">Name:</label>
<input type="text" class="input" name="name" />
<p class="hint">Enter your name</p>
</div>
the hint class is initially hidden like display:none.
How can I display the hidden hint class on hover anywhere in class field.
Thanks.
In CSS you can do it the following way:
.hint { display: none; }
.field:hover .hint { display: block; }
Edit: As Karl said, this will not work in Internet Explorer 6. You can, however, resort to JavaScript (in this example using jQuery) to do that:
jQuery(".field").hover(
function() {
jQuery(this).find(".hint").css("display","block");
},
function() {
jQuery(this).find(".hint").css("display","none");
}
);
This option will work in IE 4 and later.
<div class="field" onmouseover="document.getElementById('hint').style.display='none';" onmouseout="document.getElementById('hint').style.display='block';">
<label for="name">Name:</label>
<input type="text" class="input" name="name" />
<p id="hint">Enter your name</p>
</div>
And for your other forms just change the id hint2, hint3, etc.
<div class="field" onmouseover="document.getElementById('hint2').style.display='none';" onmouseout="document.getElementById('hint2').style.display='block';">
<label for="name">Name:</label>
<input type="text" class="input" name="name" />
<p id="hint2">Enter your name</p>
</div>