I tried to use these data-equalizer on the foundation framework to be able to have the same height for each column and, from that, be able to center vertically a text in this column.
Here is the HTML:
<div class="row" data-equalizer>
<div class="small-2 columns" data-equalizer-watch style="background: #ff0000;">
<span>Monday:</span>
</div>
<div class="small-5 columns" data-equalizer-watch>
<label>Start Time
<input type="text" class="time start ui-timepicker-input" autocomplete="off" alt="{{timestampStart}}">
</label>
</div>
<div class="small-5 columns" data-equalizer-watch>
<label>End Time
<input type="text" class="time end ui-timepicker-input" autocomplete="off" alt="{{timestampEnd}}">
</label>
</div>
I also created a JSFiddle in order that you can see what I meant --> I want that the red background of the "Monday" goes until the end of the row.
Thanks for help.
Working version here: Fiddle
Make sure you include the Foundation equalizer script and initialise Foundation on page load.
$(document).foundation();
Related
I am designing my first program with flask/python and using Bootstrap 5 for the front end. I have a modal that has at least 6 form rows, what is the best practices way to line up the form entry boxes so it looks good? Do I put it into 2 columns then put each form line in a separate row? Is it correct to assume that the modal has its own column/row numbers that do not talk to the rest of the html, or is it somehow connected? Before I write/rewrite a bunch of tags and classes maybe someone could give me a brief guide/explanation. Thank you!
When you create a row with bootstrap, it take the original size of your div. Then all col-x will be a sub-division of this row (width)
what is the best practices way to line up the form entry boxes so it looks good?
It entirely depends on you. If you wish to have one label plus input per line(row) then you can do something like that:
<div class="row">
<div class="col-md-6">
<label for="input1">label1</label>
</div>
<div class="col-md-6">
<input type="text" id="input1">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label for="input2">label2</label>
</div>
<div class="col-md-6">
<input type="text" id="input2">
</div>
</div>
Or
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-12">
<label for="input1">label1</label>
</div>
</div>
<div class="row">
<div class="col-12">
<label for="input2">label2</label>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-12">
<input type="text" id="input1">
</div>
</div>
<div class="row">
<div class="col-12">
<input type="text" id="input2">
</div>
</div>
</div>
</div>
Does the same result, but you will prefer to use the first solution
Do I put it into 2 columns then put each form line in a separate row?
This is correct
Is it correct to assume that the modal has its own column/row numbers that do not talk to the rest of the html, or is it somehow connected?
This is also correct, the row in you modal is not connected to the rest of the HTML
I guess you have already seen this page, but in case, here is the documentation: https://getbootstrap.com/docs/5.0/layout/grid/
Using bootstrap 3.3 and angular here.
I am trying to create a search filter above my grid but having some alignment issues. In full page I can see them aligned correctly, but when I try to resize the page all my form controls get jumbled up and down. I believe these is some css class which is missing but cant seem to figure out what is that. Could anyone point me in right direction.
I also created a stackblitz demo here at:
https://angular-datrange-enhq8w.stackblitz.io/
If you resize the window you would see what I am talking about.
Here is the stackblitz editor for this:
https://stackblitz.com/edit/angular-datrange-enhq8w
Below is some relevant code:
<div id="filters">
<form [formGroup]="filtersForm" >
<div class="row padding-top-10">
<div class="col-xs-12 col-sm-12 col-md-1 col-lg-1 form-group" style="margin-right:65px">
<label for="name">Name</label>
<input formControlName="name" name="name" type="text" style="height:33px" autocomplete="off" class="hidden-xs hidden-sm" />
</div>
</div>
</form>
</div>
Also on side note if you see the demo somehow I feel my dropdown does has the right style, is there some extra bootstrap 3 style I can add for this.
Thanks for looking into.
Anyone for inputs?
The grid system for bootstrap states that every row must be wrapped by a container class.
<div id="filters">
<form [formGroup]="filtersForm">
<div class="container-fluid">
<div class="row padding-top-10">
<div class="col-xs-12 col-sm-12 col-md-1 col-lg-1 form-group" style="margin-right:65px">
<label for="name">Name</label>
<input formControlName="name" name="name" type="text" style="height:33px" autocomplete="off"
class="hidden-xs hidden-sm" />
</div>
</div>
</div>
</form>
</div>
This does not solve the issue of changing the size. The bootstrap grid system is setup like this: For every row, there are 12 columns. What you are saying is that for the div with the class col-xs-12, make the element in that class have a width of 100% when the screen size is extra small. You are also saying that when it hits the col-md-1 (medium screen size breakpoint), it should have a width of 8.3333%. You have 6 divs in that page you provided. Since you have 6 divs, 12 columns / 6 divs = 2 columns per div. Therefore your code should be refactored to something like this:
<div id="filters">
<form [formGroup]="filtersForm">
<div class="container-fluid">
<div class="row padding-top-10">
<div class="col-xs-12 col-md-2 form-group" style="margin-right:65px">
<label for="name">Name</label>
<input formControlName="name" name="name" type="text" style="height:33px" autocomplete="off"
class="hidden-xs hidden-sm" />
</div>
</div>
</div>
</form>
</div>
Notice how I removed col-sm-12.. this is because col-xs-12 will set the width for every screen size up to the next given class. In this case you have col-xs-12, therefore when the screen size is xs and sm, it'll have a width of 100%. When it hits the md breakpoint, it'll change the width to 2/12 and have the same width for lg and xl screen sizes.
Check out bootstrap grid system.
The base syntax is:
container | container-fluid
row
columns (the total of col must be 12)
Also, there is no need of aditional margins on your col divs.
<div id="filters">
<form class="container-fluid">
<div class="row padding-top-10">
<div class="col-xs-12 col-md-2">
<div class="form-group">
<label for="name">Name</label>
<input formControlName="name" name="name" type="text" autocomplete="off" class="form-control" />
</div>
</div>
<div class="col-xs-12 col-md-2">
<div class="form-group">
<label for="age">Age Range</label>
<select class="form-control" formControlName="age">
<option [selected] value="">All</option>
<option *ngFor="let age of ages" value='{{age}}'>
{{age}}
</option>
</select>
</div>
</div>
</div>
</form>
</div>
If you want to persist all columns in a single row even on small screens, remove col-xs-12 and change col-md-2 to col-xs-2.
The problem is probably related to bootstrap itself. When the input is wrapped into col-* class and is part of the .form-inline group, it goes out of the box.
Here is a quick test case:
<div class="form-inline row">
<div class="col-sm-8">
</div>
<div class="col-sm-2 text-center">
<input class="form-control" id="qty-0" max="100" maxlength="3" min="1" value="1" type="number">
</div>
<div class="col-sm-2">
<span>Some text</span>
</div>
</div>
I've also created a fiddle.
Please note: I am not looking for the fixes as it can be fixed by adding width: 100% as in this example.
Is this a bug in Firefox or expected behaviour?
EDIT: here is how the input appears
EDIT 2: to avoid confusion of wrongly used bootstrap classes here is another example
EDIT 3: none bootstrap example replicating the problem
Add this to your CSS:
input,
select {
max-width: 100%;
}
Hope it will help!
Try this
<div class="row">
<div class="col-sm-2"><input class="form-control" id="qty-0" max="100" maxlength="3" min="1" value="1" type="number"></div>
<div class="col-sm-2"><span>Some text</span></div>
</div>
Edited:
Looking at your code, you are using form-inline, you can remove that part does not go with row for bootstrap as it is not compatible when using firefox or IE
I'm currently switching my website over to Bootstrap 3.0. I'm having an issue with form input and text formatting. What worked in Bootstrap 2 does not work in Bootstrap 3.
How can I get text on the same line before and after a form input? I have narrowed it down to a problem with the 'form-control" class in the Bootstrap 3 version of the example.
How would I go about getting all the text and input on one line? I would like the bootstrap 3 example to look like the bootstrap 2 example in the jsfiddle.
JS fiddle example
<div class="container ">
<form>
<h3> Format used to look like this in Bootstrap 2 </h3>
<div class="row ">
<label for="return1"><b>Return:</b></label>
<input id="return1" name='return1' class=" input input-sm" style="width:150px"
type="text" value='8/28/2013'>
<span id='return1' style='color:blue'> +/- 14 Days</span>
</div>
<br>
<br>
<h3> BootStrap 3 Version </h3>
<div class="row">
<label for="return2"><b>Return:</b></label>
<input id="return2" name='return2' class="form-control input input-sm" style="width:150px"
type="text" value='8/28/2013'>
<span id='return2' style='color:blue'> +/- 14 Days</span>
</div>
</form>
Update:
I change the code to this which works but having trouble with alignment now. Any ideas?
<div class="form-group">
<div class="row">
<div class="col-xs-3">
<label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
</div>
<div class="col-xs-2">
<select name="class_type" id="class_type" class=" form-control input-lg" style="width:200px" autocomplete="off">
<option >Economy</option>
<option >Premium Economy</option>
<option >Club World</option>
<option >First Class</option>
</select>
</div>
</div>
Straight from documentation http://getbootstrap.com/css/#forms-horizontal.
Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form (which doesn't have to be a <form>). Doing so changes .form-groups to behave as grid rows, so no need for .row.
Sample:
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
I would put each element that you want inline inside a separate col-md-* div within your row. Or force your elements to display inline. The form-control class displays block because that's the way bootstrap thinks it should be done.
What you need is the .form-inline class. You need to be careful though, with the new .form.inline class you have to specify the width for each control.
Take a look at this
None of these worked for me, had to use .form-control-static class.
http://getbootstrap.com/css/#forms-controls-static
You can do it like this:
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputType" class="col-sm-2 control-label">Label</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="input" placeholder="Input text">
</div>
</div>
</form>
Fiddle
just give mother of div "class="col-lg-12""
<div class="form-group">
<div class="row">
<div class="col-xs-3">
<label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
</div>
<div class="col-xs-2">
<select name="class_type" id="class_type" class=" form-control input-lg" style="width:200px" autocomplete="off">
<option >Economy</option>
<option >Premium Economy</option>
<option >Club World</option>
<option >First Class</option>
</select>
</div>
</div>
it will be
<div class="form-group">
<div class="col-lg-12">
<div class="row">
<div class="col-xs-3">
<label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
</div>
<div class="col-xs-2">
<select name="class_type" id="class_type" class=" form-control input-lg" style="width:200px" autocomplete="off">
<option >Economy</option>
<option >Premium Economy</option>
<option >Club World</option>
<option >First Class</option>
</select>
</div>
</div>
</div>
The way I solved it was simply to add an override for all my textboxes on the main css of my site, as so:
.form-control {
display:initial !important;
}
In Bootstrap 4 for Horizontal element you can use .row with .col-*-* classes to specify the width of your labels and controls. see this link.
And if you want to display a series of labels, form controls, and buttons on a single horizontal row you can use .form-inline for more info this link
all please check the updated code as we have to use
form-control-static not only form-control
http://jsfiddle.net/tusharD/58LCQ/34/
thanks with regards
Or you can do this:
<table>
<tr>
<td><b>Return:</b></td>
<td><input id="return1" name='return1'
class=" input input-sm" style="width:150px"
type="text" value='8/28/2013'></td>
</tr>
</table>
I tried every one of the suggestions above and none of them worked. I don't want to pick a fixed number of columns in the 12 column grid. I want the prompt, and the input right after it, and I want the columns to stretch as needed.
Yes, I know, that is against what bootstrap is all about. And you should NEVER use a table. Because DIV is so much better than tables. But the problem is that tables, rows, and cells actually WORK.
YES - I REALLY DO know that there are CSS zealots, and the knee-jerk reaction is never never never use TABLE, TR, and TD. Yes, I do know that DIV class="table" with DIV class="row" and DIV class="cell" is much much better. Except when it doesn't work, and there are many cases. I don't believe that people should blindly ignore those situations. There are times that the TABLE/TR/TD will work just fine, and there is not reason to use a more complicated and more fragile approach just because it is considered more elegant. A developer should understand what the benefits of the various approaches are, and the tradeoffs, and there is no absolute rule that DIVs are better.
"Case in point - based on this discussion I converted a few existing tds and trs to divs. 45 minutes messing about with it trying to get everything to line up next to each other and I gave up. TDs back in 10 seconds later - works - straight away - on all browsers, nothing more to do. Please try to make me understand - what possible justification do you have for wanting me to do it any other way!" See [https://stackoverflow.com/a/4278073/1758051]
And this: "
Layout should be easy. The fact that there are articles written on how to achieve a dynamic three column layout with header and footer in CSS shows that it is a poor layout system. Of course you can get it to work, but there are literally hundreds of articles online about how to do it. There are pretty much no such articles for a similar layout with tables because it's patently obvious. No matter what you say against tables and in favor of CSS, this one fact undoes it all: a basic three column layout in CSS is often called "The Holy Grail"." [https://stackoverflow.com/a/4964107/1758051]
I have yet to see a way to force DIVs to always line up in a column in all situations. I keep getting shown trivial examples that don't really run into the problems. "Responsive" is about providing a way that they will not always line up in a column. However, if you really want a column, you can waste hours trying to get DIV to work. Sometimes, you need to use appropriate technology no matter what the zealots say.
I'm using Bootstrap v2.1.1. I'm finding problem with the width of inputs.
This is my simple form:
<form>
<div class="controls-row">
<div class="span3">
<label class="control-label">A:</label>
<div class="controls">
<input type="text" class="span3"/>
</div>
</div>
<div class="span4">
<label class="control-label">B:</label>
<div class="controls">
<input type="text" class="span4"/>
</div>
</div>
</div>
<div class="controls-row">
<div class="span3">
<label class="control-label">C:</label>
<div class="controls">
<select class="span3">
<option>1111111</option>
<option>2222222</option>
<option>3333333</option>
</select>
</div>
</div>
<div class="span4">
<label class="control-label">D:</label>
<div class="controls">
<input type="text" class="span4"/>
</div>
</div>
</div>
</form>
Using this code the select has a different width, it is NOT the same as <input> with span3 class.
It is very very strange because, if i put span3 in and (using the code above) the width is equal.
COuld someone explain me how can I set equal widths using bootstrap span*
According to the Bootstrap doumentation using the span* classes on your inputs etc should work.
http://twitter.github.com/bootstrap/base-css.html#forms
I'm wondering if it may not be working because you have your form layed out as if it's meant to be a form with the class of "form-horizontal" on it but you don't actually have that class in place.
I'm not sure if a horixontal form can use the span* classes to size it's input elements.
You could try using the "input-block-level" class on your elements instead and see if that does the job for you.
Try adding "inline-block-level"
http://twitter.github.com/bootstrap/base-css.html#forms