I have a grid of input fields on my form. Bootstrap is naturally adding a bit of horizontal space between the fields in Firefox, which is how I want the form to look, but the fields are getting jammed together in Chrome. In the Firefox image above, I have highlighted the col-md-2 div in Firebug which wraps the input field. The input field is highlighted in Chrome.
This seems to be the difference - Firefox seems to be constraining the input fields to fit inside the grid elements, but this is not the case in Chrome. In Firefox, the input fields in the grid are 144 px wide but in Chrome they are 170 px wide.
Here is the markup for a row of fields:
<div class="row signup">
<div class="col-md-1">
<span class="plus-icon">
<img width="18" height="18" src="/assets/plus.jpg" alt="Plus">
</span>
<span class="minus-icon">
<img width="18" height="18" src="/assets/minus.jpg" alt="Minus">
</span>
</div>
<div class="col-md-2">
<input id="sheet_slots_attributes_0_label" type="text" name="sheet[slots_attributes][0][label]" value="Food">
</div>
<div class="col-md-2">
<input id="sheet_slots_attributes_0_name" type="text" name="sheet[slots_attributes][0][name]" value="Foo">
</div>
<div class="col-md-2">
<input id="sheet_slots_attributes_0_email" type="text" name="sheet[slots_attributes][0][email]" value="foo#foo.com">
</div>
<div class="col-md-2">
<input id="sheet_slots_attributes_0_phone" type="text" name="sheet[slots_attributes][0][phone]" value="">
</div>
<div class="col-md-2">
<input id="sheet_slots_attributes_0_comments" type="text" name="sheet[slots_attributes][0][comments]" value="">
</div>
</div>
I have tried to build a fiddle to demonstrate this but I am not able to get it working. So sorry for no fiddle, but I thought someone may have seen this before.
FYI the row signup markup is just adding bottom margin to space out the rows a bit. Also, I've tried adding an extra col-md-1 to get to an even 12 both at the start and end of each row but it doesn't help. I don't have any extra markup for any of this - just using Bootstrap.
It would be great to also understand why the input boxes look relatively ugly (squarish and plain) on Chrome as well - perhaps this is related.
You need to set the width of the inputs to 100%. This makes them take up the width of their container. Otherwise, you are letting the browser determine the default width of the inputs. You can do this manually, or add the bootstrap class form-control to each input.
See it in action in this demo bootply
Related
I have the following part of the form:
<div class="d-grid mb-3">
<button class="btn btn-primary mb-3" type="submit" name="userlogin">Login</button>
<button class="btn btn-primary mb-3" onclick="window.location.href="/reset.php" name="rstpss">Reset</button>
</div>
Button rstpss is conditional and appears only in case user has entered wrong login or wrong password at the same time.
Both buttons currently use 100% of div's width and placed strictly one below another.
But I want the rstpss button to be placed below the userlogin one only in case there is no available predefined div's width to place them one next to another keeping in mind they both will take all available div's width, be the same width and contain the same space between them as their bottom margins (the same margin is used with the input above the buttons).
When only userlogin button is shown it must take 100% div's width.
I suppose it shouldn't be very difficult and must be clearly described at the Bootstripe's documentation, but I've started using Bootstrap just yesterday and just don't know what to look for. Any example I have found doesn't answer my question.
A clear example will help me greatly to understand how to deal with such cases in the future. And what to search at the Bootstrap's documentation, too.
Here is an example of what I am trying to achieve:
Try this:
<div class="d-flex mb-3">
<button class="btn btn-primary mb-3 flex-fill" type="submit" name="userlogin">Login</button>
<button class="btn btn-primary mb-3 flex-fill" onclick="window.location.href="/reset.php" name="rstpss">Reset</button>
</div>
This should expand the first button to a 100% if the second one doesn't exist, and keep both buttons on same line with equal width if both exist.
I have made the following pile of tags. It does the job while it seems to be not the most elegant one.
<div class="row" style="--bs-gutter-x: 1rem">
<div class="col">
<div class="d-flex mb-3">
<button class="btn btn-primary flex-fill" style="white-space: nowrap;" type="submit" name="userlogin">Click or tap here to login</button>
</div>
</div>
<div class="col">
<div class="d-flex mb-3">
<button class="btn btn-primary flex-fill" style="white-space: nowrap;" formaction="/reset.php" name="rstpss">Click or tap here to recover your password</button>
</div>
</div>
</div>
The default value of the row class is 1.5rem. I have not found how to set the row class' size through predefined classes so I've made it 1rem with inline style to make the horizontal space between two buttons equal to vertical space between the form's elements with mb-3 class applied.
There is also inline style white-space: nowrap for the button tag to prevent its height growing instead of putting the long texted button to the next line.
I've used the first example from the Bootstrap's Grid system except the outer div with the container class as it prevents achieving my goal.
My code still appear to me as an overproduced and incorrect one so I can't accept this answer as the answer.
The correct solution is still highly appreciated.
img of what is actually happening
Basically, there is a div which its text is exceeding its maximum width. Ive already tried to set max-width:100% (to see if it sets the maximum width to parent's full width) in more or less 10 parent divs but the problem is still happening. Also, ive already looked for some similar posts in here and most of them tell me to use white-space:normal but it actually breaks a new line for every word.
In the example below, you can find 3 fields, the first one is the "normal" one, and the others are with white-space:normal.
The source code doesn't seem to have any problems with it:
<fieldset data-type="horizontal" *ngIf="poll.type == 'Opção'">
<label translate>Escolher Opção:</label>
<div class="row">
<div class="btn-group form-vote" data-toggle="buttons">
<div class="btn btn-block" *ngFor="let option of poll.options" [ngClass]="{'active': isChosenOption(poll.pollId, option.optionId)}">
<div class="btn-circle btn-success" (click)="registerOptionVote(poll.pollId, option.optionId)">
<i class="fa" [ngClass]="{'fa-check': isChosenOption(poll.pollId, option.optionId)}"></i>
<div style="white-space: normal;"> {{option.description}} </div>
</div>
</div>
</div>
</div>
</fieldset>
JSFiddle: https://jsfiddle.net/cadorealves/9yhLxmz6/
Problem the second div get witdh of btn-cirlce.
You should move out the div
<div style="white-space: normal;"> {{option.description}} </div>
of <div class="btn-circle btn-success"
Set .btn-circle and .description as inline-block
Demo https://jsfiddle.net/viethien/z87ar50e/5/
I've been searching for a way to make my 'textarea' go to 100% inside it's column. I've seen a few different ways (none of which I've been able to work) to make a 'textarea' expand to 100% in Bootstrap. I've everything from custom in line CSS styles to using class="form-control col-lg-12" to overwriting Bootstrap's CSS.
Anyone have a working suggestion that would allow for fluid re-sizing?
Here is the code that I have. Right now the width goes to a little past the placeholder text.
<div class="row">
<div class="col-lg-7">
<h2>#Model.EmployeeName</h2>
<h3>Employee #: #Model.EmployeeNumber</h3>
<h5>(Optional): Exception Log comments related to this shift for your Supervisor/Time Keeper.</h5>
<textarea rows="2" placeholder="Exception Log comments."></textarea>
</div>
<div class="col-lg-5 text-right">
<div ng-controller='TimeCtrl'>
<h2>{{ clock | date:'fullDate'}}</h2>
<h1>{{ clock | date:'HH:mm:ss'}}</h1>
<input type="submit" class="btn btn-xxlarge btn-success" value="Punch In" />
</div>
</div>
</div>
I believe bootstrap's own form element class (form-control) is what will make form elements take up the full width of the column they are in.
<textarea class="form-control"></textarea>
class="form-control" must work. If it is not working, it means that somewhere in css file, max-width property is set for text-area which restricts the width. In this case check site.css file and remove max-width property.
Just add a 'form-control' class to textarea. If you are working on a small screen, col-lg-7 and col-lg-5 is cover all window.
And your columns text alings are different. You may see the col-sm-12 in your screen.
<textarea class="form-control" rows="2" placeholder="Exception Log comments."></textarea>
If you just add some custom CSS you can force it to use the entire container width
min-width: 100%
max-width: 100%
However, using the bootstrap class "form-control" also accomplishes this
Simply add form-control class to your textarea if you want 100% width on it, no need to add col-lg-12 because form-control class gives the 100% width of the parent to the element.
<textarea class="form-control" rows="4" placeholder="Exception Log comments."></textarea>
I've tried everything I can think of and I cannot reproduce this form in this way:
I want to make it to look exactly like in the picture but I have the following problems:
The buttons and the last text input are not staying inline.No ideea how to fix this and possibly resize the other ones so they look like in the picture.
I cannot use specific fonts already imported into html(I've tried adding them in css with the !important function, still doesen't work)
Problems with the button color.
I really have no more ideeas left.I am very new to all this.
Can someone help me make the modifications necessary to reproduce the form in the picture?
Here is what I have now:
http://www.bootply.com/x59KVak
Wrap the two elements in a div and float them left and right: BOOTPLY
<div>
<input style="float:left">
<button style="float:right"></button>
</div>
Just add div parent for input and button and make float left,right...here is fixed, if i understand good.
http://www.bootply.com/TGuWOd5ZET
User this for your last line button and text, tested it and found working
<div class="form-group row">
<div class="col-lg-12">
<label for="Camera2">Camera dorita</label>
</div>
<div class="col-lg-6">
<input class="form-control" id="camera" type="text">
</div>
<div class="col-lg-6">
<button type="submit" class="btn btn-warning">Cauta</button>
</div>
</div>
Bootstrap has a lot of examples for types of forms. I'm interested in using the "Horizontal form" which looks like this
This is what it looks like after outlining some elements with the web inspector toolbar:
I am working inside of a popup modal and space is already a bit tight. I tried adding bootstrap's grid system's .span1 and .span2 to the labels as a class, but it is not giving the desired behavior.
Is there a way to use some other aspect of bootstrap to get the desired behavior (i.e. tighten up the amount of space that labels on a horizontal form take up)? What is the proper way to do this? I'm using bootstrap version 2.1
i am not aware if bootstrap has got something defined for it..below is a workaround..
<div class="control-group">
<label class="control-label" style="width:auto" for="inputEmail">Email</label>
<div class="controls" style="margin-left:auto">
<input type="text" class="input-small" id="inputEmail" placeholder="Email">
</div>
</div>
i added style="width:auto" which was default 140px and style="margin-left:auto" which was default 160px. Also class="input-small" to reduce the input field width to squeeze out more space so that it fits in modal..
Now you tweak further to fit it as per your needs..
To reduce the vertical spacing, form-control-sm shrinks the font-size (using Bootstrap 4):
<form>
<div class="form-group form-row">
<label class="col-sm-2 col-form-label form-control-sm">Label</label>
<div class="col-sm-3">
<input class="form-control form-control-sm">
</div>
</div>
</form>