I have a text input with a label and beside it I'm placing a button to do something other than submit the form in which the input and button reside. I'm placing the input (with label) in a twelve wide field and the button is within a four wide field:
<div class="two fields">
<div class="twelve wide field">
<label for="postalCodeMain">Postcode</label>
<input type="text" id="postalCodeMain" value=""/>
</div>
<div class="four wide field">
<div class="ui fluid bottom button" onclick="getLocations('Main');">Search for Address</div>
</div>
</div>
The thing is that the button floats to the top of the four wide field as there is label above the input, what would be the best way to get the button to be inline with the input?
I've tried a number of methods but putting the label outside of the fields leads to an excessive gap between the label and the input and adding an empty label atop the button strikes me as being wasteful...?
Here are the methods I've tried on JSFiddle.
Am I missing a class for the button div?
Well colour me stupid, after reading the documentation some more I clocked that this is dead easy:
<div class="field">
<label for="postalCode05">Postcode</label>
<div class="ui action input">
<input type="text" id="postalCode05" placeholder=""/>
<button class="ui button">Search</button>
</div>
</div>
Example in my updated JSFiddle
Related
I have this card
<div class="card">
<div class="card-body">
<div class="ct">
Health & safety
</div>
<div class="facetHolder mt-3">
<div class="row">
<div class="col-md-9">
<input type="checkbox" /><span class="ml-3 dtext">Properties with additional health & safety measures</span>
</div>
<div class="col-md-3">
<span class="badge badge-primary float-right">10</span>
</div>
</div>
</div>
</div>
</div>
and this is the fiddle https://jsfiddle.net/dzfo41rk/5/
This is how it looks
The text on the right moves too much to the left and occupies the empty space not occupied by the checkbox.
I tried setting the whitespace
.dtext{
font-size:14px !important;
white-space:normal !important;
word-wrap: normal !important;
}
but that is not helping. How can i ensure the text do not overflow to the left to occupy space around the checkbox?
Use label instead of span
Wrap both label and the input with another element.
Use .form-check
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label ml-3 dtext" for="exampleCheck1">
Properties with additional health & safety measures
</label>
</div>
https://jsfiddle.net/odr04tsj/
For more info, read Checkboxes and radios
https://getbootstrap.com/docs/4.6/components/forms/#checkboxes-and-radios
I think you're looking for the property white-space: nowrap; on any text containers. This will prevent the line breaks & force the text to one line.
You need to put your text and checkbox in different columns of row. As now, checkbox with inline-block style looks like a part of text.
Other problem is big paddings of columns. Create them smaller with p-classes or change them with your stylesheets.
And the third thing, as epascarello said, you need labels for the checkboxes.
<div class="col-md-3 px-1">
<input type="checkbox" id="stackCheck"/>
</div>
<div class="col-md-9 px-1">
<label for="stackCheck" class="dtext">
Properties with additional health & safety measures
</label>
</div>
Look at the fiddle: https://jsfiddle.net/7Lfbmj6t/1/
And please, don't use !important without necessary.
we're using this lib : https://github.com/angular/flex-layout
so far, we have below code to achive the fxlayout, but it did not work in mobile device.
<div fxLayout="column" id="width">
<div class="table-cell" fxLayout="row">
<div fxLayout="column" class="columnlabel">
<label class="f_label margintop">width </label>
</div>
<div fxLayout="column leftpadding">
<input type="number" matInput
style="font-weight: bold;background: white;margin-top: 2px;" name="width">
</div>
</div>
</div>
what i am looking for is,
when it is mobile device want input control as underneath to label
when it is large device want textbox on right side
but in some case want input control on right side in mobile also, for example, tongle switch control.
please click on below link for sample representation, and can you please guide me what i am missing ?
sample
provided sample work on stack blitz as requested in comment. Thanks
https://flex-layout-angular-material-wqeqvc.stackblitz.io/
https://stackblitz.com/edit/flex-layout-angular-material-wqeqvc?file=app/app.component.html
What you want to achieve is probably something like that with their responsive API:
<div fxLayout="column" fxLayout.gt-xs="row">
<label class="f_label margintop">Sports </label>
<input type="number" matInput>
</div>
<div fxLayout="column" fxLayout.gt-xs="row">
<label class="f_label margintop">Country </label>
<input type="number" matInput>
</div>
By default with fxLayout, it will be in ROW and when the screen is bigger than xs, then it's in column with fxLayout.gt-xs
Hi I am using Bootstrap 3 and while I faced the problem of sizing up my user inputs I took help from this question shadowf answer helped me.
Now I am into another problem. The fix does size the inputs but is applies the same for the label and the control inside the form-group as the class is applied at that level.
I need to apply different sizing for the label and the input box. If I apply the sizing class at the label or the input level the form alignment goes for a toss.
I don't want to use a horizontal or inline form.
<div class="form-group col-xs-6">
<label for="exampleInputEmail1">Really long label which I want to have separate sizing</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
modified fiddle here
Seems like you need to split the lines between the text-label and the input box. Then you can make the text follow the whole 12 grid system while the input only uses 6 blocks in the system:
<div class="form-group">
<div class="row">
<div class="col-xs-12">
<label for="exampleInputEmail1">Really long label which I want to have separate sizing</label>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
</div>
</div>
JSFiddle. I haven't done anything to the password-field, but you get the point. Good luck!
I am designing a checkout form and really like how the Stripe checkout forms groups its inputs tightly together as seen here
I use bootstrap 3 and so far I have marked out the structure, but I havent been able to get the inputs and their borders to be aligned neatly like in the picture
My html
<div class="col-xs-12">
<div class="input-grouping">
<div class="top">
<input type="text" class="form-control" id="checkoutCardNumber" placeholder="Card Number">
</div>
<div class="bottom-left">
<input type="text" class="form-control" name="checkoutExpiration" id="checkoutExpiration" placeholder="MM/YY">
</div>
<div class="bottom-right">
<input type="text" class="form-control" id="checkoutCVC" placeholder="CVC">
</div>
</div>
</div>
Any advice?
If I was looking to replicate your example exactly, I would suggest suppressing the default presentation of the input fields (by removing the borders and background) and then wrapping them in divs which you can style as you choose.
I have some forms which mostly consist of input controls, but there are times when the horizontal form has a variant like the following:
<div class="form-group">
<span class="col-md-3 control-label">Features</span>
<div class="col-md-9">
<span>This is not available.</span>
</div>
</div>
Or sometimes I have multiple controls:
<span class="col-md-3 control-label">Payment</span>
<div class="col-md-9">
<input value="2" name="CustomerPaymentOption" type="radio">
<span>Credit Card</span>
</div>
The label content doesn't quite line up at the same level as the control-label. I've tried to mimic the css class for form-control to get span content to line up, but it never quite worked out so well in my scenarios. Any recommendations on getting the content to line up?
If you just want to print a static text you could use a static form control (http://getbootstrap.com/css/#forms-controls-static).
If you want to use multiple checkboxes and radio buttons, you can also use what bootstrap provoides. See http://getbootstrap.com/css/#forms-controls.
Would you like to have something like this? http://www.bootply.com/ztbj1dCJrP
Its Simple add class to the div (here my-label)
<span class="col-md-3 control-label">Payment</span>
<div class="col-md-9 my-label">
<input value="2" name="CustomerPaymentOption" type="radio">
<span>Credit Card</span>
</div>
and css
.my-label{
display:inline-block;
}
fiddle http://jsfiddle.net/harshdand/a4n4nc1r/
for multiple http://jsfiddle.net/harshdand/a4n4nc1r/2/