Bootstrap v3.1 - Side by side input panels in IE8 - html

Hello I am familiar with Bootstrap, but not very experienced with it. I am using it to create a static form, but I can't seem to get these panels to sit side by side with the "col-md-6" class tag inside of the rows.
I've been trying to read the Bootstrap documentation as well as look at other examples, but so far no luck. I've been spinning my wheels modifying classes, changing divs, adding divs, and just having no luck what so ever.
Below is the code I have extracted from my form which is the probelmatic area.
<div class="container">
<div class="form-group col-md-6">
<div class="panel panel-default">
<div class="row col-xs-3">
<label for="strategy" class="control-label">Strategy</label>
<input type="text" class="form-control" id="strategy" placeholder="Strategy" />
</div>
<br/>
<br/>
<br/>
<br/>
<div class="row col-md-6">
<label>Type of Service:</label>
<ul>
<li class="checkbox">
<input type="checkbox" value="" />
Transport
</li>
<li class="checkbox">
<input type="checkbox" value="" />
Storage
</li>
<li class="checkbox">
<input type="checkbox" value="" />
Balancing
</li>
<li class="checkbox">
<input type="checkbox" value="" />
Park/Lend
</li>
</ul>
</div>
</div>
<div class="panel panel-default">
<div class="row col-xs-3">
<label for="internalBusinessUnit" class="control-label">Internal Business Unit</label>
<input type="text" class="form-control" id="internalBusinessUnit" placeholder="Internal Business Unit" />
</div>
<br/>
<br/>
<br/>
<div class="row col-md-6">
<ul>
<li class="checkbox">
<input type="checkbox" value="" />
Hub/Wheel
</li>
<li class="checkbox">
<input type="checkbox" value="" />
Exchange
</li>
<li class="checkbox">
<input type="checkbox" value="" />
Pooling
</li>
<li class="checkbox">
Other:
<input type="checkbox" value="" />
<div class="col-xs-2">
<input type="text" class="form-control" id="other" placeholder="" />
</div>
</li>
</ul>
</div>
</div>
</div>
Now I have had form tags in here and tried form-inline as well as form-horizontal, but I am basically trying to have each panel sit side by side with one another. I also seem to be having an issue with the "Other" label appearing after the input box.
Fiddle for good measure : Fiddle
*There is probably a better way for me to position the elements on the next line as opposed to the break lines that I used, but like I said, I am new to Bootstrap and will only learn by doing. I assumed using the "row" would stack them vertically.

I had a quick fiddle with it. I think you should be able to use this to work with.
JSFiddle here
Note: I used
form-group
and tidied up the col's to help layout the form elements.

Related

Moving checkbox label above checkbox

How do I got about moving the checkbox label above the checkbox?
At the moment the labels are appearing on the left hand side of checkbox and I would like them above the checkboxes.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="viewstats">
View Statistics
</label>
<input type="checkbox" value="">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="viewgraphs">
View Graphs
</label>
<input type="checkbox" value="">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="viewnotifications">
View Notifcations
</label>
<input type="checkbox" value="">
</div>
</div>
</div>
the answer to your issue is simple. All you have to do is use a "br" tag after each ending "label" tag. In other words, by using the "br" or break tag, you're telling the checkbox to "break" down to the next line that is available.
Your code would look like this...
HTML
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="viewstats">
View Statistics
</label>
<br>
<input type="checkbox" value="">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="viewgraphs">
View Graphs
</label>
<br>
<input type="checkbox" value="">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="viewnotifications">
View Notifcations
</label>
<br>
<input type="checkbox" value="">
</div>
</div>
</div>
Hope that helps!
You can change to structure as below because....
It gives flexibility to place the label and checkbox as per your need.
Not only that but also the Important Reason that why you should wrap <input> inside <label> tag is that the checkbox will function even when you click on label itself rather than only on checkbox as it was earlier.
In this example, with the structure you had, so when you click on "View Statistics" the checkbox will not be checked/unchecked. But, if you wrap <input> inside <label>, then even when you click on label itself, the checkbox functionality is achieved.
You can also refer to JSfiddle if you need https://jsfiddle.net/Dhruvil21_04/2m3asp3k/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="viewstats">
View Statistics<br>
<input id="viewstats" type="checkbox" value="">
</label>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="viewgraphs">
View Graphs<br>
<input id="viewgraphs" type="checkbox" value="">
</label>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="viewnotifications">
View Notifcations<br>
<input id="viewnotifications" type="checkbox" value="">
</label>
</div>
</div>
</div>

Bootstrap checkboxes acting weird on different browsers

I'm working on a simple website with pure HTML, CSS, PHP and Bootstrap. I want to use the checkboxes from Bootstrap, but they seem to be acting weird in different browsers... For example in Chrome, they are really big and out of place.
And on Safari, they appear normal, but when clicked on, they do a jumping motion..
I want them to appear normal size and all on the same line.
This is the code:
<div class="row">
<div class="row">
<div class="col-md-12">
<label>Products :</label>
</div>
</div>
<div class="row">
<div class="col-md-12">
<ul class="list-unstyled list-inline checkbox-list">
<li><label class="checkbox-inline">Food </label>
<input type="checkbox" id="inlineCheckbox1" name="products[]" value="food">
</li>
<li><label class="checkbox-inline">Books</label><br>
<input type="checkbox" id="inlineCheckbox1" name="products[]" value="books">
</li>
<li><label class="checkbox-inline">Phones</label><br>
<input type="checkbox" id="inlineCheckbox1" name="products[]" value="phones">
</li>
</ul>
</div>
</div>
</div>
Any idea?

I have too many div's what else can I use?

I've been doing dev on this online form submissions site and using HTML/CSS to align the fields and what not. I was doing fine until i needed to put little boxes around each section because I would have too many div's and would close each other when I don't want them to. So my question is, is there a way to explicitly tell each closing </div> to close certain div class' or should I just use another tag in general.
HTML:
<div class="print_content">
<div class="generalinfo">
<h4>User Information</h4>
<hr/>
</div>
<!--form starts-->
<form>
<div class="half">
<legend><b style="color:red",>*</b>
<label for="name">Name</label><legend>
<input type="text" id="name" name="name">
</div>
<!-- added div class clear to have a half class in 1 row -->
<div class="clear"></div>
<div class="half">
<label for="email">Email</label>
<input type="text" id="email" name="email">
</div>
<div class="half">
<label for="zip">Zip / Postal code</label>
<input type="text" id="zip" name="zip">
</div>
<div class="half">
<label for="abc" class="alignleft">abc</label>
<span class="left-text">abcabc</span>
</div>
<div class="half">
<label for="country">Country</label>
<select id="country" name="country"><option></option></select>
</div>
<div class="full">
<label for="message">Message</label>
<textarea id="message" name="message"></textarea>
</div>
<div class="full">
<label for="zip">Zip / Postal code</label>
<input type="text" id="zip" name="zip">
</div>
<div class="half">
<input type="checkbox" id="copy" name="copy">
<label for="copy">Send me a copy</label>
</div>
<div class="half">
<legend><b style="color:red",>*</b>
<label for="name">Name</label><legend>
<input type="text" id="name" name="name">
</div>
<div class="half">
<div class="nocolor">
google
</div>
</div>
</div>
</div>
I think "< ul >" with some "< li >" would be great here.
Just do it like this:
<ul>
<li class="half">
<input ...
<label ...
</li>
</ul>
Further information http://www.w3.org/TR/html401/struct/lists.html
HTML often gives you more than one (or 10) possibilities to achieve something. Generally I like your approach to use a very basic element (like a div) if you don't know a more specific one.
If you're feeling again like you're using too much divs and that there might be another solution, just search for sites which have a similar solution than your product implemented. With "F12" (most browsers) you can explore what they've used.

Align 3 elements inside a list-group-item in bootstrap

I'm trying to align a radio button, an input and some text inside one of my list-group-items, it looks good #desktop but #mobile it goes one on top of the other.
This is my code so far
<div class="panel panel-default">
<div class="panel-body">
<span style="color: #990000; font-size:17px;"><strong>8,55 €</strong></span> text
<ul class="list-group">
<li class="list-group-item"><input name="1" type="radio"> 1 text <strong>8,55 €</strong></li>
<li class="list-group-item"><input name="2" type="radio"> 3 text <strong>8,55 €</strong></li>
<li class="list-group-item"><input name="3" type="radio"> 6 text <strong>8,55 €</strong></li>
<li class="list-group-item">
<div class="container-fluid">
<div class="row">
<div class="col-md-1"><input name="n" type="radio" ></div><div class="col-md-3"><input type="text" name ="text" id="amount" class="form-control" placeholder="12"></div><div class="col-md-8" >text<strong>8,55 €</strong></div>
</div>
</div>
</li>
</ul>
</div>
</div>
Is there anything I can do to have it responsive and aligned in mobile as well as dekstop?
You can use col-xs-* in place of col-md-*: fiddle example
<div class="col-xs-1">
<input name="n" type="radio" >
</div>
<div class="col-xs-3">
<input type="text" name ="text" id="amount" class="form-control" placeholder="12">
</div>
<div class="col-xs-8" >
text<strong>8,55 €</strong>
</div>

arrange fields of the form using bootstrap 3?

I am using Bootstrap3 in my project. I have enclosed my form in a jumbotron.
Here is how my form looks (not good looking as of now):
I tried to make it better. but it is getting worse. I want all the fields to be in one-line and
the submit button centered below them. I have no idea how to do it. I am very new using Bootstrap3.
Here is my html code:
<form action="" id="id-exampleForm" class="form-inline" method="post" >
<input type='hidden' name='csrfmiddlewaretoken' value='1bfhNFINdeJVpSNBBQd0X7zLWLVwm1bB' />
<div id="div_id_price_order" class="form-group">
<label for="id_price_order_0" class="control-label col-lg-2 requiredField">
price order
<span class="asteriskField">*</span>
</label>
<div class="controls col-lg-12">
<label class="radio">
<input type="radio" checked="checked" name="price_order" id="id_price_order_1" value="lowest_price" >lowest</label>
<label class="radio">
<input type="radio" name="price_order" id="id_price_order_2" value="highest_price" >highest</label>
</div>
</div>
<div class="form-group">
<div id="div_id_newest_entry" class="checkbox">
<div class="controls col-lg-offset-2 col-lg-12">
<label for="id_newest_entry" class=" requiredField">
<input class="checkboxinput checkbox" id="id_newest_entry" name="newest_entry" type="checkbox" />
latest date
</label>
</div>
</div>
</div>
<div class="form-group">
<div id="div_id_latest_year" class="checkbox">
<div class="controls col-lg-offset-2 col-lg-12">
<label for="id_latest_year" class=" requiredField">
<input class="checkboxinput checkbox" id="id_latest_year" name="latest_year" type="checkbox" />
latest year
</label>
</div>
</div>
</div>
<input type="submit" name="submit" value="Submit" class="btn btn-primary button white" id="submit-id-submit" />
</form>
EDIT:
I want something like this: I have edited this on powerpoint. so it does not look very good.
EDIT AFTER COMMENT
Please see the fiddle for an inline form in a Jumbotron with the button in-line (not below centered), and fieldset.
Note : that I changed the vertical alignment of the checkbox and radio + add some right margin, and an extra small button. The form will go as block if the screen is extra-small as a bootstrap behavior.
JsFiddle
<div class="jumbotron">
<form class="form-inline">
<fieldset class="radiogroup">
<legend>Sorting Criteria</legend>
<label for="id_price_order_0">
price order
<span class="asteriskField">*</span>
</label>
<label class="radio" for="id_price_order_1">
lowest
<input type="radio" checked="checked" id="id_price_order_1" />
</label>
<label class="radio" for="id_price_order_2">
highest
<input type="radio" id="id_price_order_2" />
</label>
<label for="id_newest_entry" class="requiredField checkbox">
latest date
<input id="id_newest_entry" type="checkbox" />
</label>
<label for="id_latest_year" class="requiredField checkbox">
latest year
<input id="id_latest_year" type="checkbox" />
</label>
<input type="submit" name="submit" value="Submit" class="btn btn-primary btn-xs" />
</fieldset>
</form>
Add the class form-control to ALL of your input elements for a start:
<input type="radio" class='form-control' checked="checked" name="price_order" id="id_price_order_1" value="lowest_price" >
Also, what I do to make my life easier is to pre-wrap the elements in the correct sized divs instead of doing it in the labels and inputs like so:
<div class='row'>
<form ... >
<div class='col-lg-2>
<label ... ></label>
<input ... >
</div>
<div class='col-lg-2'>
...
</div>
...
</form>
</div>
Its a tiny bit slower to load but it makes the code so much more readable I think it is worth it. Also I feel that there is a lot of extra in your code that shouldn't be there and is confusing check out the code here: http://getbootstrap.com/css/#forms. They show you exactly how to format an in-line form.
Could being inside a .jumbotron be causing the issues? Why don't you try a panel or a well This should work for you:
<div class='panel panel-default'>
<div class="panel-heading">In-line Form</div>
<div class="panel-body">
<form action='anotherScript.php' method='post' class='form-inline'>
<div class='row'>
<div class='col-md-4'>
<strong>Price:</strong>
<div class="radio-inline">
<label>
<input type="radio" name="rad1" value="low" checked>
Lowest
</label>
</div>
<div class="radio-inline">
<label>
<input type="radio" name="rad1" value="high">
Highest
</label>
</div>
</div>
<div class='col-md-4'>
<div class="checkbox-inline">
<label>
<input type="checkbox" name='date' value='date'>
Latest Date
</label>
</div>
</div>
<div class='col-md-4'>
<div class="checkbox-inline">
<label>
<input type="checkbox" name='year' value='year'>
Latest Year
</label>
</div>
</div>
</div>
<div class='row'>
<div class='col-md-12'>
<center><button type='submit' class='btn btn-primary'>Submit</button></center></form>
</div>
</div>
</div>
Fiddle: http://jsfiddle.net/52VtD/5046/
Make sure you stretch the results panel to full width to see the form in-line.