I am using Bootstrap 3.0
Why is it in chrome the width of textinput is shorter compare to the firefox.
Here's the screenshot.
This is for Chrome
This is for Firefox
As you can see the Firefox has a longer textinput. Basically, I am not sure if what's the problem with this one, is it Firefox or Chrome? but overall, I wanted to follow Firefox's style(longer textinput).
This is the HTML:
<div class="search-wrapper">
<form class="form-inline" role="form">
<div class="input-group date col-sm-12 col-md-10 col-lg-8 col-xs-12">
<span class="input-group-addon add-on getStarted hidden-sm hidden-xs"><img src="images/get-started.png"/></span>
<input id="searchJobInput" type="text" class="form-control" placeholder="Search for Jobs... Nurse, Pharmacist" style="height:55px;">
<span class="input-group-addon add-on searchIcon"><img src="images/search-button.jpg"/></span>
</div>
</form>
</div>
Any help will be greatly appreciated! Thank You!
Simply define the width for your input box in your css and it will override and browser defaults.
Also, ask yourself, do websites need to look exactly the same in every browser?.
You shouldn't use input-group and col-* classes on the same element; you should use nesting instead. This is mentioned in the docs.
Instead of:
<div class="input-group date col-sm-12 col-md-10 col-lg-8 col-xs-12">
You should use:
<div class="col-xs-12 col-md-10 col-lg-8">
<div class="input-group date">
Related
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.
I am using Bootstraps grid system to make my input box smaller. However, it seems to conflict with form-control.
HTML:
<form class="col-md-8">
<div class="form-group">
<input type="text" name="input_box" class="form-control col-md-3"/>
</div>
</form>
In Chrome's developer tools, the 25% (for .col-md-3 is automatically crossed out). If I take out .form-control then it works but looks ugly.
How do I use them both? Note that I do not want to change the width in .formcontrol because I have other forms that also use this and will get messed up
How about this
<form>
<div class="col-md-8">
<div class="form-group col-md-3">
<input type="text" name="input_box" class="form-control"/>
</div>
</div>
</form>
I'm trying to figure out how I can get labels in my form to be maintained all on one line. That is if a label for a specific input happens to be longer than the rest, I would like the other labels to have additional white space underneath such that my input fields are in alignment. See picture for alignment issue.
<div class="row">
<div class="form-group col-xs-12 col-sm-3 col-md-3 col-lg-3">
<label>Window Utilization Total:<span class="input-required" ng-show="logbook.util.$error.required">*</span></label>
<input name="util" ng-model="sortie.total_window_time" empty-to-null required type="text" title="Time: e.g. 01:00, 12:30, 23:59, etc" maxlength="5"
placeholder="00:00" pattern="^([0-9]|0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$"/>
<p class="input-error" ng-show="logbook.util.$invalid && logbook.util.$touched">
Invalid time (e.g. 12:00, 23:59, 1:30, etc).
</p>
</div>
<div class="form-group col-xs-12 col-sm-3 col-md-3 col-lg-3">
<label>Flight Plan:</label>
<input ng-model="sortie.flight_plans" empty-to-null type="text" placeholder="e.g. NMZSAN_FP509"/>
</div>
<div class="form-group col-xs-12 col-sm-3 col-md-3 col-lg-3">
<label>Partial Flight Plans (Lines Completed):</label>
<input ng-model="sortie.partial_flight_plan" empty-to-null type="text" placeholder="e.g. NMZSAN_FP509, Lines 1-5"/>
</div>
<div class="form-group col-xs-12 col-sm-3 col-md-3 col-lg-3">
<label>Date of Last Control:</label>
<input ng-model="sortie.last_control_date" empty-to-null type="text" placeholder="YYYY-MM-DD"/>
</div>
</div>
If you want an all-css approach, it's going to be tricky. Someday, grid layout will make this sort of thing easy, but it has terrible support right now.
However, you could use flex-box to help you.
I think it will work if you have two rows, one for labels and one for the inputs.
<style>
div { display: flex }
label, input { flex: 1 }
</style>
<div>
<label for="1">Short</label>
<label for="2">Also Short</label>
<label for="3">So long ohmygoodness so much to say</label>
</div>
<div>
<input id="1"/>
<input id="2"/>
<input id="3"/>
</div>
Here's a jsfiddle to demonstrate it.
Note that flexbox support is not yet perfect, and you should add some browser-specific prefixes and be aware of its limitations. Read more at caniuse.com. If you need support for older versions of IE, it looks like you'll have to use a javascript fallback as indicated in the other answer here.
Just add this js code in your file, what this will do, it will equalize all the label height based on the height of biggest label as per its content/text.
Add class label_big to all the label elements
This works for me very well, hope it will resolve your issue.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
var highestBox = 0;
$('.form_group .label_big').each(function(){
if($(this).height() > highestBox){
highestBox = $(this).height();
}
});
$('.form_group .label_big').height(highestBox);
});
</script>
i'm trying to build a 2 column form layout in bootstrap with an fixed height textarea on the right. I got it working well on desktop screen with an .pull-right-md (own class) on the textarea box. But in "responsive" mode (on smaller screens) I have the problem with the order of the boxes. I want the textarea to be on the last position when displayed on small screens.. I already tried to solve this problem by ordering the col's with .col-*-pull and .col-*-push classes but it was not working.
Here you can see what I have done so far: http://www.bootply.com/BBFB4Tt97j
Do you have any ideas how I could solve this problem?
Plz don't ever do duplication of html elements for sake of styling, it's not worth it! You breaking semantics, and produce illogical code that is tricky to maintain.
You can easily achieve desired effect without duplicating anything:
http://output.jsbin.com/debenudiqi/2/
You can grab code here
http://jsbin.com/debenudiqi/2/edit
This is what I suggest, tried to work my way around with pull and push but i haven't found a solution with that. You can use the hidden-xs, visible-xs to create two different text-area, one visible only on small screen and the other on large screens only. But you make sure when you handle the form, you handle the two different text areas.
<form class="">
<div class="col-md-6 col-sm-12 form-group pull-right-md hidden-sm hidden-xs">
<textarea class="form-control textarea-fixed-height" id="textarea" name="textarea">default text</textarea>
</div>
<div class="col-md-6 col-sm-12 form-group">
<input class="form-control" id="inputEmail3" placeholder="Name" type="text">
</div>
<div class="col-md-6 col-sm-12 form-group">
<input class="form-control" id="inputPassword3" placeholder="Email" type="email">
</div>
<div class="col-md-6 col-sm-12 form-group">
<input class="form-control" id="inputPassword3" placeholder="Telefon" type="text">
</div>
<div class="col-md-6 col-sm-12 form-group">
<input class="form-control" id="inputPassword3" placeholder="Betreff" type="text">
</div>
<div class="col-md-6 col-sm-12 form-group pull-right-md hidden-lg hidden-md">
<textarea class="form-control textarea-fixed-height" id="textarea1" name="textarea1">default text</textarea>
</div>
</form>
Bootply link
So for everyone with the same kind of problem thats the solution of my problem: http://www.bootply.com/BBFB4Tt97j#
I have put two textareas in the form-tag. One as first box and the second on the last position but before the submit button. With .hidden-xs and .hidden-sm on the first textarea it's not visible for smaller devices and with .hidden-md and .hidden-lg I prevent the textarea-tag for showing up on big screens.
this is working fine now.. thx
I've succeeded to pin down an error in my code. Really weird I must say. Of course, before anyone says google it, I have hehehe. I simply want to know if this is a bug, and or if there is some solution to this.
I have a form in which I want to edit some content and send it to the server. The thing is, when I try to focus a field (click on it), I can't. It is disabled for some reason. Not only inputs, but select boxes and checkboxes as well. However, if I change the class of the div with the textarea as its child from col-sm-12 to col-sm-11 everithing works as it should. Now I don't want to use a column of size 11 when everything else can be 12. Looks just weird.
Here is my code:
<form>
<div class="form-group col-xs-12 col-sm-6 col-md-6 col-lg-6">
<label for="title" >Title</label>
<input type="input" name="title" class="form-control" value="<?php echo $article['title'] ?>">
</div>
...
...
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<label for="content" >content</label>
<textarea name="content" class="form-control" rows="3"><?php echo $article['content'] ?></textarea>
</div>
<div class="form-group col-xs-12 col-sm-6 col-md-6 col-lg-2">
<input type="submit" name="submit" class="btn btn-success form-control" value="Save!"/>
</div>
...
</form>
Does anyone know anything about this?
I experienced this issue today. The text inputs would not focus on click, and the clearfix div did not work.
The solution was to wrap each col-xx-x in a div with a .row class. Ex:
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<label for="content" >content</label>
<textarea name="content" class="form-control" rows="3"></textarea>
</div>
</div>
I experienced the same problem. Neither .clearfix or wrapping each col-xx-x in a div with a row class worked. Wrapping the form tags within a div containing a row class did however solve the issue.
<div class="row">
<form>
.
.
.
</form>
</div>
i have same problem, still not work after add div row. i add this code to style css to solve the problem :
.col-md-12{
width: 100% !important;
}
add to all col-xx-12
The problem is that there is a div or some other element that is overlapping the input controls. You should be able to tab through to the input element, even through you can't click on it. Try visiting this stackoverflow post: Bootstrap 3 form not working on mobile devices.