When appending an input-group to a form-inline, the input-group appears below the form on a "new line" instead of inline with the other controls.
It seems that this is because the input-group wrapper class has display set to table whereas the other inputs, which work fine, have their display set to inline-block. Of course, it is not possible to give the input-group the inline-block display because its child add-on span, which has display: table-cell, needs the property of the parent to align correctly.
So my question is: is it possible to use input-group inside an inline form using Bootstrap classes exclusively? If not, what would be the best work-around allowing the use of custom classes.
Here is a demo illustrating my point. The code is the following:
<form action="" class="form-inline">
<input type="text" class="form-control" placeholder="Works with" style="width: 100px;"/>
<input type="text" class="form-control" placeholder="Text Inputs" style="width: 120px;"/>
<div class="checkbox">
<label>
<input type="checkbox" /> and Checkboxes
</label>
</div>
<select class="form-control" style="width: 150px;">
<option>and Selects</option>
</select>
<button type="submit" class="btn btn-default">and Buttons</button>
<div class="input-group" style="width: 220px;">
<span class="input-group-addon">BUT</span>
<input type="text" class="form-control" placeholder="not with input-groups" />
</div>
</form>
This was indeed a bug and was resolved (check the issue on github for more info).
From now on the inline forms in BootStrap require to wrap the child form controls with .form-group.
So my code would become:
<form action="" class="form-inline">
<div class="form-group">
<input type="text" class="form-control" placeholder="Works with" style="width: 100px;"/>
</div>
...
<div class="form-group">
<div class="input-group" style="width: 220px;">
<span class="input-group-addon">BUT</span>
<input type="text" class="form-control" placeholder="not with input-groups" />
</div>
</div>
</form>
I think you may need to separate your form into columns to get the inline layout you want. An example (I think of what you're after) is on the Bootstrap site here.
try putting
<div class="col-lg-1"></div>
around your controls to see what I mean. You of course need to work in columns of 12 so this will need to be adjusted accordingly.
Related
I'm trying to create the layout for a profile page.
When the user is editing his profile, I want to display a form such as this one from the Bootstrap library: https://getbootstrap.com/docs/4.4/components/forms/#form-row . When the user is done editing, I want to convert the form to a read-only layout, by replacing the input fields with the text that has been entered.
I found an example on bootsnipp: https://bootsnipp.com/snippets/QoM7g (tab "Education&Career", for example). But when looking at the code, I noticed that this layout was constructed using the form-group class, and by replacing the input field with a paragraph field.
Is there a cleaner solution? I can't imagine this is how this kind of layout is meant to be written?
I would do something like this.
Add a fieldset with disabled attribute, all form element will be disabled.
Now add style to default form-control elements so that it will look like text.
Example below
fieldset[disabled] .form-control {
color:red;
border: none;
background-color:inherit;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="p-3">
<form>
<fieldset disabled>
<input class="form-control" type='text' value='John' />
<input class="form-control" type='text' value='John' />
<input class="form-control" type='text' value='John' />
<input class="form-control" type='text' value='John' />
</fieldset>
</form>
</div>
If you want to have elements in your form styled as plain text, use the .form-control-plaintext class to remove the default form field styling and preserve the correct margin and padding.
for Example:
<form>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email#example.com">
</div>
</div>
<div class="form-group row">
<label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword">
</div>
</div>
</form>
Refer to this: https://getbootstrap.com/docs/4.4/components/forms/#readonly-plain-text
There is no need to replace the fields. You can just style them to look as text: hide the border and outline, make it read-only, make the background same as the outer background.
Example:
<input value="Regular input" />
<br>
<input class="like-text" value="I look like a text" readonly />
.like-text {
border: none;
outline: none;
}
https://jsfiddle.net/z879pbcn/
Why is one input box full width and the others so short? This is my html. I am using bootstrap:
<form action="https://www.example.net/auth/create_user" class="form-horizontal" id="login-attempts-form-admin method="post" accept-charset="utf-8">
<div class="container">
<div class="row">
<div class="col-sm-6 col-xs-6">
<!-- id -->
<div class="form-group">
<label for="id">
Reference Id
</label>
<div class="input-group">
<input type="text" name="id" value="" id="id" style="" class="form-control" placeholder="" disabled="disabled" />
<div class="input-group-addon"><i class="ti-info"></i>
</div>
</div> <!-- end input group -->
<span class="help-block">
The Reference Id is created automatically.
</span>
</div> <!-- end form-group Id -->
<!-- ip_address -->
<div class="form-group">
<label for="ip_address">
IP Address
</label>
<div class="input-group">
<input type="text" name="ip_address" value="" id="ip_address" style="max-width:none !important" class="form-control input-xlarge" placeholder="" />
</div> <!-- end input group -->
</div> <!-- end form-group ip_address -->
<!-- login -->
<div class="form-group">
<label for="login">
Login
</label>
<div class="input-group">
<input type="text" name="login" value="" id="login" style="" class="form-control" placeholder="" />
</div> <!-- end input group -->
</div> <!-- end form-group login -->
</div>
</div> <!-- end of row -->
</div> <!-- end of container. -->
</form>
I even tried to make the ip_address field wider by stating style="max-width:none !important" but no use. Is there any way to make the fields wider? Is there a preset width in bootstrap? I was of the belief the default was max width.
This is what my final output looks like:
Low rep to add as a comment, but trying your code end up with same length input fields. So don't see a problem from my end.
One thing maybe the version of bootstrap you are using, as I used the latest from the Bootstrap page (4.1.3), as older versions might have some changes within the CSS.
You could add your CSS which would give a better view if you are not changing something.
Another thing is to try:
input {
max-width: 100%;
}
When I tested the code I didn't see any different widths with the inputs.
On ip_address field, I am using style="max-width:none !important"... Any CSS you add will not work with the inline style max-width:none; !important.
It will override any changes you are making in the CSS file or any where else. Inline styles especially !important will override any attached style sheets or classes.
I think the problem may be you have this on your input style="max-width:none !important"It is overriding the default bootstrap setting and not setting your input to max width.
That's if you want them wider, shorter wrap in a <div> then manipulate the <div> with CSS or the "col-sm-6" etc.. classes.
Example from Bootstrap website version 4. Also, version 3 has the "form-control" class as well. It makes your form 100% width then you can manipulate it by wrapping in a <div> of your choice or another suitable element or CSS.
EXAMPLE:
<form>
<div class="form-group">
<label for="exampleFormControlInput1">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name#example.com">
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlSelect2">Example multiple select</label>
<select multiple class="form-control" id="exampleFormControlSelect2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
</form>
https://getbootstrap.com/docs/4.0/components/forms/
When I tested the input field lengths weren't different.
But if it happens try styling the input tag with
<input style="max-width: 100%">
or add this to css
I am trying to make a textarea with 5 rows and a width defaulted to the width of the container below it, but also allow it to become more narrow if a user is on a small mobile device (e.g. a smart phone). I've been researching and I see that there is debate on whether to use CSS or HTML to alter the size of a textarea. I'm fairly new to web development (started last week), so if you know how to fix my problem could you tell me why you chose the method you did?
<form class="form-inline">
<div class="form-group">
<textarea class="form-control" rows="5"></textarea>
</div>
</form>
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
</div>
</div>
<button type="submit" class="btn btn-primary">Send!</button>
</form>
using form-inline makes the form-group display inline-block.. if you want the form-group to stretch the entire width you can use form-horzontal
or you can just set the display style of the form-group to block
<form class="form-inline">
<div class="form-group" style="display:block">
<textarea class="form-control" rows="5"></textarea>
</div>
</form>
make sure you site.css doesn't have a max-width value for textareas. this is in the default style sheet I believe
input,
select,
textarea {
max-width: 280px;
}
Getting some odd behavior with a single input field on my login form that only happens in firefox...in chrome it's completely fine. The code is no different than any other input field in the forms on the page but this one is choosing to appear outside of the form div and will not allow you to type in it, also looks like it has a 0% length or atleast the smallest length possible. I'm using bootstrap for the field/form css.
An html snippet of the form (id: email_login is causing the issue):
<form action="process_login.php" name="login_form" method="post" id="login_form" class="form-horizontal" role="form">
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="email_login" type="text" class="form-control" name="email" placeholder="Email Address" />
</div>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="password_login" type="password" class="form-control" name="password" placeholder="Password" />
</div>
<div style="margin-top:10px" class="form-group">
<!-- Button -->
<div class="col-sm-12 controls">
<input onclick="formhash(this.form, this.form.password);" value="Login" id="btn-login" type="button" class="btn btn-primary" />
<i class="icon-hand-right"></i>
</div>
</div>
Heres an image of what's going on
Thanks in advance...will be happy to provide further info. I didn't include the css as it's just the standard bootstrap classes with no modifications.
EDIT:
I managed to fix this issue by modifying the .input-group class in bootstrap from display:table to display:inline-table.
This did not affect any other forms on my website, but managed to fix the display issue in firefox.
So consider it solved in my case.
I have a form and I want to keep 2 or 3 controls in line in the same row, for example:
label1
r1_ctrl1 r1_ctrl2 r1_ctrl3
label2
r2_ctrl1 r2_ctrl2 r2_ctrl3
I tried to do it this way:
<form class="form-horizontal" role="form">
<label...>
<div class="form-group">
<select .../>
<a ... />
</div>
</form>
and it does not work.
I also tried:
<form class="form-horizontal" role="form">
<label...>
<div class="form-group">
<div class="controls form-inline"
<select .../>
<a ... />
</div>
</div>
</form>
And also no result.
The only working method is Html table, but the result is really ugly. Please advise.
If you want controls on the same row you shouldn't use:
.form-horizontal
but
.form-inline
http://getbootstrap.com/css/#forms-inline
This is what .form-horizontal does:
Individual form controls automatically receive some global styling. All textual , , and elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.
And this is what .form-inline does:
Add .form-inline to your for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.
I would take advantage of Bootstrap's flexible grid layout:
<div class="row">
<form>
<div class="col-xs-12">
<h3>Heading 1</h3>
</div>
<div class="col-xs-4 form-group">
<label for="input1">
<input id="input1" class="form-control" value="Control 1"></input>
</label>
</div>
<div class="col-xs-4 form-group">
<label for="input2">
<input id="input2" class="form-control" value="Control 2"></input>
</label>
</div>
<div class="col-xs-4 form-group">
<label for="input3">
<input id="input3" class="form-control" value="Control 3"></input>
</label>
</div>
</form>
</div>
Demo
Notice that I've changed your label to a heading. Each input should have its own label (with an appropriate for attribute) for accessibility. In this demo, the for attributes aren't strictly necessary as the labels wrap the inputs.