Having some nasty issues with IE6 and reading my div form layout, the html:
<form id="brochureForm" name="brochureForm" action="/how-it-works/request-a-brochure/" method="post">
<div class="row">
<div class="label">
<label for="szName">Name</label>
</div>
<div class="field">
<input type="text" name="szName" id="szName" value="#form.szName#" />
</div>
<div class="clear"></div>
</div>
<div class="row">
<div class="label">
<label for="szCompanyName">Company Name</label>
</div>
<div class="field">
<input type="text" name="szCompanyName" id="szCompanyName" value="#form.szCompanyName#" />
</div>
<div class="clear"></div>
</div>
<div class="row">
<div class="label">
<label for="szAddress">Address</label>
</div>
<div class="field">
<input type="text" name="szAddress" id="szAddress" value="#form.szAddress#" />
</div>
<div class="clear"></div>
</div>
<div class="row">
<div class="label">
<label for="szTown">Town/City</label>
</div>
<div class="field">
<input type="text" name="szTown" id="szTown" value="#form.szTown#" />
</div>
<div class="clear"></div>
</div>
<div class="row">
<div class="label">
<label for="szPostcode">Postcode</label>
</div>
<div class="field">
<input type="text" name="szPostcode" id="szPostcode" value="#form.szPostcode#" />
</div>
<div class="clear"></div>
</div>
<div class="row">
<div class="label">
<label for="szTelephone">Tel</label>
</div>
<div class="field">
<input type="text" name="szTelephone" id="szTelephone" value="#form.szTelephone#" />
</div>
<div class="clear"></div>
</div>
<div class="row">
<div class="label">
<label for="szEmail">E-mail</label>
</div>
<div class="field">
<input type="text" name="szEmail" id="szEmail" value="#form.szEmail#" />
</div>
<div class="clear"></div>
</div>
<div class="submitrow">
<input type="image" name="szSubmit" id="szSubmit" src="/images/form/submit.gif" class="submitRO" />
</div>
</form>
And then the CSS:
.row {width:314px;margin:0 0 8px 0;}
.row .label {width:103px;padding:3px 16px 0 0;float:left;text-align:right;}
.row .field {width:195px;float:left;}
.submitrow {width:314px;text-align:right;padding:3px 0 0 0;}
Working fine in IE8/7, Firefox, etc.
Also, as a rule of thumb when dealing with IE6, try adding display:inline to your floating divs
IE6 sometimes doesnt get margins and paddings right. Try to reduce them a few pixels.
Related
I have a problem with setting the Bootstrap form control padding to 0. I tried adding the .form-control class in styles but without success. I believe it should be possible to override some properties of CSS classes in the style block.
How do I set the .form-control padding to 0?
<wicket:head xmlns:wicket="http://wicket.apache.org/">
<styles>
.form-control {
padding: 0px;
}
</styles>
</wicket:head>
<wicket:panel xmlns="http://www.w3.org/1999/xhtml" xmlns:wicket="http://wicket.apache.org/">
<div class="col-xs-12">
<div class="col-xs-12">
<div class="form-group">
<div class="col-sm-3">
<input type="submit" value="Request" class="btn btn-danger"/>
</div>
<div class="col-sm-3">
<label for="quotationId" wicket:id="quotationIdLabel"></label>
<div>
<input wicket:id="quotationId" type="text" size="20"/>
</div>
</div>
<div class="col-sm-3">
<label for="product" wicket:id="productLabel"></label>
<div>
<select class="form-control" wicket:id="product"/>
</div>
</div>
<div class="col-sm-3">
<label for="contract" wicket:id="contractLabel"></label>
<div>
<input type="hidden" wicket:id="contract"/>
</div>
</div>
<div class="col-sm-3" style="padding: 0">
<label for="customer" wicket:id="customerLabel"></label>
<div>
<input class="form-control" type="hidden" wicket:id="customer"/>
</div>
</div>
<div class="col-sm-3">
<label for="serviceLevel" wicket:id="serviceLevelLabel"></label>
<div>
<select class="form-control" wicket:id="serviceLevel"/>
</div>
</div>
<div class="col-sm-3">
<label for="equipmentType" wicket:id="equipmentTypeLabel"></label>
<div>
<input class="form-control" type="hidden" wicket:id="equipmentType"/>
</div>
</div>
<div class="col-sm-3">
<label for="commodity" wicket:id="commodityLabel"></label>
<div>
<select class="form-control" wicket:id="commodity"/>
</div>
</div>
<span class="col-sm-3">
<label for="originCountry" wicket:id="originCountryLabel"></label>
<div>
<input type="hidden" style="display: inline-block;" wicket:id="originCountry"/>
</div>
</span>
<div class="col-sm-3">
<label for="originDgfStation" wicket:id="originDgfStationLabel"></label>
<div>
<input type="hidden" wicket:id="originDgfStation"/>
</div>
</div>
<div class="col-sm-3">
<label for="destinationCountry" wicket:id="destinationCountryLabel"></label>
<div>
<input type="hidden" wicket:id="destinationCountry"/>
</div>
</div>
<div class="col-sm-3">
<label for="destinationDgfStation" wicket:id="destinationDgfStationLabel"></label>
<div>
<input type="hidden" wicket:id="destinationDgfStation"/>
</div>
</div>
<div class="col-sm-3">
<label for="shippingTerms" wicket:id="shippingTermsLabel"></label>
<div>
<select class="form-control" wicket:id="shippingTerms"/>
</div>
</div>
</div>
<br/>
</div>
</div>
<div class="clearfix"></div>
</wicket:panel>
Add class "p-0" for 0 padding to the div you want,
class="other-class p-0"
Try more specific selector like this:
.form-group .form-control {
padding: 0;
}
I have a big form and the problem with alignment. I cut some fields, but the demo will show the problem.
I have two columns in the begining of the form, some rows use half of the width, some rows use full witdh. And, the problem with the last one. As you can see textareas is not aligned with the others inputs:
How can I fix it?
DEMO
PS. I use Bootstrap 4, but, I think this question is related to Bootsrap 3 too.
.full-width {
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://npmcdn.com/tether#1.2.4/dist/js/tether.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<form novalidate>
<div class="row">
<div class="col-md-8">
<div class="form-group row">
<label for="field1" class="col-md-2 col-form-label">Text Area</label>
<div class="col-md-10">
<textarea id="field1" class="form-control"
cols="30" rows="4"></textarea>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group row">
<div class="col-md-12">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Checkbox 1
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Checkbox 2
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Checkbox 3
</label>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div class="form-group row">
<label for="field2" class="col-md-2 col-form-label">Input</label>
<div class="col-md-10">
<input id="field2" class="form-control"/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group row">
<label class="col-md-1 col-form-label">Options</label>
<div class="col-md-11">
<div class="row">
<div class="col-md-6">
<span>Label 1</span>
<input type="radio" name="group1" value="Value 1"> Value 1
<input type="radio" name="group1" value="Value 1"> Value 2
</div>
<div class="col-md-6">
<span>Label 2</span>
<input type="radio" name="group2" value="Value 1"> Value 1
<input type="radio" name="group2" value="Value 2"> Value 2
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-11">
<textarea class="full-width"></textarea>
</div>
<div class="col-md-1">
<span">Icon</span>
</div>
</div>
<div class="row">
<div class="col-md-11">
<textarea class="full-width"></textarea>
</div>
<div class="col-md-1">
<span">Icon</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
</form>
The problem is the first 2 rows are nested in col-md-8, and the misaligned "options" row is nested in col-md-12.
Also, clean up the various malformed HTML in the code.
http://www.codeply.com/go/sCYzgdFXxa
I use form-groups in a well element, but
the bottom visible margin is more than the top, and this is not looking good. I want it to be centrelised vertically.
<div class="well">
<div class="form-horizontal">
<div class="form-group">
....
<div class="form-group">
....
</div>
</div>
Snippet
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="well">
<div id="date_formatter_widget">
<!-- Widget -->
<div class="form-horizontal">
<div class="form-group">
<div class="col-sm-9 text-right">
<input type="text" class="form-control conversionPattern" id="pattern" placeholder="pattern here...">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="text" class="form-control conversionPattern" id="conversionPattern" placeholder="" readonly value="2015-05-21">
</div>
</div>
</div>
<!-- /Widget -->
</div>
</div>
The .form-group's last child has a margin-bottom, which can be removed by setting this:
.form-horizontal .form-group:last-child {margin-bottom: 0;}
.form-horizontal .form-group:last-child {
margin-bottom: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="well">
<div id="date_formatter_widget">
<!-- Widget -->
<div class="form-horizontal">
<div class="form-group">
<div class="col-sm-9 text-right">
<input type="text" class="form-control conversionPattern" id="pattern" placeholder="pattern here...">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="text" class="form-control conversionPattern" id="conversionPattern" placeholder="" readonly value="2015-05-21">
</div>
</div>
</div>
<!-- /Widget -->
</div>
</div>
Preview
Just started learning Bootstrap and for example have designed this form like this, I want to know if those column numbers even make sense according to each other?
<form class="form-horizontal">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Website Active
</label>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<label>Display this message when the website is not active</label>
<textarea class="form-control" rows="3" id="comment"></textarea>
</div>
</div>
</div>
</div>
</form>
See here the difference of what I explained in comments :
In your case, a more proper structure could be :
<div class="container">
<div class="row">
<form class="form-horizontal">
<div class="col-sm-6">
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox"> Website Active
</label>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Display this message when the website is not active</label>
<textarea class="form-control" rows="3" id="comment"></textarea>
</div>
</div>
</form>
</div>
</div>
And you have to add a .container or .container-fluid class around your .row
You can have .row as much as you wants in a single .container class.
See your code on a bootply fiddle
I have the following code:
<form class="form-inline">
<div class="row">
<div class="col-md-6">
<fieldset>
<legend>Form one</legend>
<div class="col-md-3">
<div class="form-group">
<label for="input1">Input1</label>
<div class="checkbox">
<input type="checkbox" id="input1">
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="input2">Input2</label>
<div class="checkbox">
<input type="checkbox" id="input2">
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="input3">Input3</label>
<div class="checkbox">
<input type="checkbox" id="input3">
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="input4">Input4</label>
<div class="checkbox">
<input type="checkbox" id="input4">
</div>
</div>
</div>
</fieldset>
</div>
<div class="col-md-6">
<fieldset>
<legend>Form 2</legend>
<div class="col-md-3">
<div class="form-group">
<label for="input5">Input5</label>
<div class="checkbox">
<input type="checkbox" id="input5">
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="input6">Input6</label>
<div class="checkbox">
<input type="checkbox" id="input6">
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="input7">Input7</label>
<div class="checkbox">
<input type="checkbox" id="input7">
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="input8">Input8</label>
<div class="checkbox">
<input type="checkbox" id="input9">
</div>
</div>
</div>
</fieldset>
</div>
</div>
</form>
( I am sorry for the poor identation, but i posted a link to bootply also). I want the inputs of the first form to appear two at each row, so it must look like this for form 1
Input1 input2
input3 input4
and
Input5 Input6
Input7 Input8
for form 2 in the second collumn. I set up two collumns both of them using col-md-6 class and in each collumn i am placing the fields. But even with setting two sub collumns of 3 I can't get the result I want. What am i doing wrong? I am using bootstrap 3
I think you want something like this
I changed col-md-3 to col-md-6.
If I didn't understand correctly, just tell me.
One solution is to clear the float at each point where you want to begin a new block. For example, like this:
<div style="clear:both;"><div></div></div>
Here is the modified code:
<form class="form-inline">
<div class="row">
<div class="col-md-6">
<fieldset>
<legend>Form one</legend>
<div class="col-md-3">
<div class="form-group">
<label for="input1">Input1</label>
<div class="checkbox">
<input id="input1" type="checkbox">
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="input2">Input2</label>
<div class="checkbox">
<input id="input2" type="checkbox">
</div>
</div>
</div>
<div style="clear:both;"><div></div></div>
<div class="col-md-3">
<div class="form-group">
<label for="input3">Input3</label>
<div class="checkbox">
<input id="input3" type="checkbox">
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="input4">Input4</label>
<div class="checkbox">
<input id="input4" type="checkbox">
</div>
</div>
</div>
</fieldset>
</div>
<div style="clear:both;"><div></div></div>
<div class="col-md-6">
<fieldset>
<legend>Form 2</legend>
<div class="col-md-3">
<div class="form-group">
<label for="input5">Input5</label>
<div class="checkbox">
<input id="input5" type="checkbox">
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="input6">Input6</label>
<div class="checkbox">
<input id="input6" type="checkbox">
</div>
</div>
</div>
<div style="clear:both;"><div></div></div>
<div class="col-md-3">
<div class="form-group">
<label for="input7">Input7</label>
<div class="checkbox">
<input id="input7" type="checkbox">
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="input8">Input8</label>
<div class="checkbox">
<input id="input9" type="checkbox">
</div>
</div>
</div>
</fieldset>
</div>
</div>
</form>