Screenshot
The problem is that there is a huge space between the datetime input field and the text field. How do i fix it? I have used slds-size and also css width property.But none of that works
What should I do to fix it?
I have used slds-grid for the input fields. The 2nd row code is as follows
<div class="slds-grid slds-gutters">
<div class="slds-col slds-m-left_small">
<label for="rcdt"><div class="required-field">Receiving Date Time</div></label>
<lightning-input id="rcdt" variant="label-hidden" type="datetime"></lightning-input>
</div>
<div class="slds-col">
<label for="delnoid">Delivery Note Number</label>
<lightning-input type="text" variant="label-hidden" id="delnoid"></lightning-input>
</div>
<div class="slds-col slds-m-right_small">
<label for="notesid">Notes</label>
<lightning-input type="text" variant="label-hidden" id="notesid"></lightning-input>
</div>
</div>
Related
I'm using Bootstrap 4.2.1 and I have an inline form that displays perfectly at viewport widths > 575 px:
However, at viewport widths < 576 px, the form submit button becomes misaligned, dropping slightly:
I've replicated the problem here: https://www.codeply.com/go/hW1xZkJXQ9
<div class="container">
<div class="row">
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="Email">Email address</label>
<input type="email" class="form-control mr-2" id="Email" placeholder="user#gmail.com">
</div>
<button class="btn btn-primary" type="submit">Add</button>
</form>
</div>
</div>
Any ideas why this happens at smaller screen widths?
Here's what I ended up doing without having to customize the core Bootstrap CSS.
I learned that .form-inline only displays form elements inline at screen widths of at least 576 px. Additionally, I was incorrectly using .form-group along with .form-inline when I should have been using .input-group on the inputs, as was pointed out above. But this still didn't allow me to keep things inline at narrow screen widths of less than 576 px.
Therefore, I abandoned .form-inline altogether and instead used a form grid approach using Bootstrap's built-in grid classes. I used .form-row and treated the inline form elements as normal columns:
Updated Codeply: https://www.codeply.com/go/hwBPwM6qTV
<div class="container">
<form>
<div class="form-row">
<div class="col-8 col-sm-5 col-md-4">
<div class="form-group">
<label class="sr-only" for="Email">Email address</label>
<input type="email" class="form-control" id="Email" name="Email" placeholder="user#gmail.com">
</div>
</div>
<div class="col">
<button class="btn btn-primary" type="submit">Add</button>
</div>
</div> <!-- .form-row -->
</form>
</div>
This keeps everything inline at very narrow screen widths:
Obviously, the columns can be changed to suit the needs of the particular application or preference.
after 576px, form-control remove inline block property, so i will add it for all resolution.
and for btn, i am using mt-n3 mt-sm-0 bootstrap class.
updated codeply: https://www.codeply.com/go/35ENnBhxpA
body {
padding:100px;
}
.form-control {
display: inline-block !important;
width: auto;
vertical-align: middle;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<div class="container">
<div class="row">
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="Email">Email address</label>
<input type="email" class="form-control mr-2" id="Email" placeholder="user#gmail.com">
</div>
<button class="btn btn-primary mt-n3 mt-sm-0" type="submit">Add</button>
</form>
</div>
</div>
Noticed something strange on my Bootstrap forms today (v303).
I set my labels to use 3 columns and the input field to use 9 columns, and normally I'd expect this to extend full width of the available space.
But the fields seem to have a mind of their own and are adjusting to their own widths... I can't seem to get them to extend.. even if I add more columns.
What's strange is that, for my fields w/ Bootstrap PREPEND character, it goes full width as expected.
screenshot:
code:
<div class="form-group">
<label class="col-sm-3 control-label">A</label>
<div class="col-sm-9">
<div class="input-group">
**<span class="input-group-addon">#</span>**
<input type="text" class="form-control" placeholder="Username">
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">B</label>
<div class="col-sm-9">
<div class="input-group">
<input type="text" class="form-control" placeholder="Username">
</div>
</div>
</div>
You are using the input-group class incorrectly.
Extend form controls by adding text or buttons before, after, or on both sides of any text-based input. Use .input-group with an .input-group-addon to prepend or append elements to a single .form-control.
http://getbootstrap.com/components/#input-groups
input-group will only work well when textbox has other elements before and/or after. As such, from your second input either remove the enclosing input-group div or add some surrounding content within the tag.
<div class="form-group">
<label class="col-sm-3 control-label">A</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="text" class="form-control" placeholder="Username">
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">B</label>
<div class="col-sm-9">
<input type="text" class="form-control" placeholder="Username">
</div>
</div>
I'm not able to resize Jasny's Fileupload form. First I made a centered span8 with offset2. Then I put a simple input form into the span and set it to 'input-block-level'. That's working fine: the input form has now a size of span8.
I want to do the same with the Jasny's Fileupload. I tried a lot, but it didn't work for me. What I need, is a function that replaces the span3 entry in class="uneditable-input span3" with some kind of auto-resizing function, that stretches the input box to span8. Replacing span3 with input-block-level also doesn't work.
Another possibility would be a fixed value for the control button (maybe span3) and a for the input field (span5).
Any ideas?
<div class="row-fluid">
<div class="container pagination-centered">
<div class="span8 offset2" style="background-color:#FFCC33">
<form class="form" action="someaction" method="post" enctype="multipart/form-data" style="background-color:#FFFFFF">
<div class="control-group">
<div class="controls">
<input type="text" id="someid" name="somename" class="input-block-level" placeholder="well stretched box">
</div>
</div>
<div class="control-group">
<div class="controls">
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="input-append">
<div class="uneditable-input span3">
<i class="icon-file fileupload-exists"></i>
<span class="fileupload-preview"></span>
</div>
<span class="btn btn-file">
<span class="fileupload-new">Select file</span>
<span class="fileupload-exists">Change</span>
<input type="file" />
</span>
Remove
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
Few days ago Twitter Bootstrap 3 RC1 released and i just started to play with it on a personal project.
I have a horizontal form which includes some inline radio-checkbox groups but horizontal alignment of these elements are not equal:
Question 1: Why chrome doesn't displays help-block element on the same line with the label?
Question 2: How to align inline radio group on the same line with label?
Question 3: Is following markup valid? Are these problems related with the markup?
Markup:
<div class="container">
<form class="form-horizontal">
<div class="form-group">
<label class="col-lg-2 control-label">Weight</label>
<div class="col-lg-1">
<input type="text" name="weight" class="form-control" value="20">
</div>
<div class="help-block"> grams</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">Full part name</label>
<div class="col-lg-6">
<input type="text" name="name" class="form-control" placeholder="Don't use numeric characters..">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">Inline radios</label>
<div class="col-lg-10">
<label class="radio-inline">
<input type="radio" name="radio"> Hello
</label>
<label class="radio-inline">
<input type="radio" name="radio"> Other
</label>
<label class="radio-inline">
<input type="radio" name="radio"> Another
</label>
<label class="radio-inline">
<input type="radio" name="radio" checked="checked"> Foobar
</label>
</div>
</div>
</form>
</div>
EDIT:
Also this markup on a small screen produces a "dropped help-block element". I think my markup is problematic but i have no idea what is wrong.
Your markup seems to be valid on first sight. About your question 1.
You have set your input with:
<div class="col-lg-1">
<input type="text" name="weight" class="form-control" value="20">
</div>
So to width is set with the col-lg-1 prefix, see also: https://stackoverflow.com/a/17920693/1596547. "col-lg-1" stack below 992 pixels. When you're screen width is > 992 px. The div got a width of 8.333% (100/12). The
form-control class set the width of the input tag to 100%. Below the 992px there is no definition for "col-lg-1" cause the 100% width of the input, the input is displayed with 100% width.
Try to use the col-* prefixes which never stacks (or use other CSS to set the width)
I did not found different behavior for Chrome at all. Above the 992px i will find this on both FF and Chrome:
I did not found a solution for your second question yet.
Question 2:
Your labels got a padding-top of 9px from:
.form-horizontal .control-label {
padding-top: 9px;
}
the .radio-inline have no padding, so add the code below to your css:
.radio-inline, .checkbox-inline {
padding-top: 9px;
}
See: https://github.com/twbs/bootstrap/pull/8967
I want to design a form something like this:
I went through the documentation of Twitter Bootstrap and found that there is no proper way of doing it unless you do some CSS hacks over to achieve that. I don't want to do any CSS hacks because they make the page unresponsive.
Is there any proper way for achieving this ?
I have come up with the following code for my form:
<form class="form-horizontal">
<fieldset>
<div class="control-group">
<label class="input-mini" for="first">Start</label>
<label class="input-mini" for="first">End</label>
<label class="input-mini" for="first">Share</label>
</div>
<div class="control-group form-inline">
<input type="text" class="input-mini">
<input type="text" class="input-mini">
<input type="text" class="input-mini">
</div>
</fieldset>
I have also created a jsfiddle. There are two problems with the above form being rendered:
Labels are not horizontal.
The space between text input is not proper.
Yes you can achieve that layout with the help of the grid.
Something like this should do the work:
<div class="container">
<div class="row">
<div class="span1">
One
</div>
<div class="span1">
Two
</div>
<div class="span1">
Three
</div>
</div>
<div class="row">
<div class="span1">
<input type="text" class="input-mini">
</div>
<div class="span1">
<input type="text" class="input-mini">
</div>
<div class="span1">
<input type="text" class="input-mini">
</div>
</div>
<div class="row">
<!-- Same as above -->
</div>
<div class="row">
<!-- Same as above -->
</div>
</div>
See the demo here: http://bootply.com/60908