asked on
Bootstrap form field issues
I want to use bootstrap to make form fields (i.e., input type="text") responsive.
When I use class="form-control" it makes the text field cover the whole width of the div. Obviously, I don;t want that. Look at rkassoc.org/Houston/form.h
How can I limit the width of these fields & retain responsiveness?
When I use class="form-control" it makes the text field cover the whole width of the div. Obviously, I don;t want that. Look at rkassoc.org/Houston/form.h
How can I limit the width of these fields & retain responsiveness?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<title>City of Houston Backflow Assembly & Test Report Form</title>
<style>
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.wrapper{
max-width:1100px;
min-width:600px;
margin:0 auto;
}
</style>
<script type="text/javascript">
</script>
<script>
$(function() {
$( "#datepickerid" ).datepicker();
});
$(function() {
$( "#datepickerdc" ).datepicker();
});
$(function() {
$( "#datepickertd" ).datepicker();
});
</script>
</head>
<body>
<div class="wrapper">
<form method="POST" name="st" action="post_form.php" onSubmit="return chk_vals();">
<div class="container-fluid" >
<div class="row">
<div class="col-sm-3 col-xs-3" style="padding-top:3px;"><img src="images/logo.png" class="img-responsive"></div>
<div class="col-sm-9 col-xs-9 text-center" style="padding-top:50px; font-size:22px;"><b>City of Houston - Backflow Assembly & Test Report Form</b></div>
</div>
<div class="row">
<div class="col-sm-6 col-xs-6 text-right" style="padding-top:3px;">Name of Property: </div>
<div class="col-sm-6 col-xs-6 text-left" style="padding-top:3px;"><input type="text" name="pn" style="width:300px;"></div>
</div>
<div class="row">
<div class="col-sm-6 col-xs-6 text-right" style="padding-top:3px;">Property Address: </div>
<div class="col-sm-6 col-xs-6 text-left" style="padding-top:3px;"><input type="text" name="padr" style="width:300px;"></div>
</div>
<div class="row">
<div class="col-sm-6 col-xs-6 text-right" style="padding-top:3px;">City, State, Zip: </div>
<div class="col-sm-6 col-xs-6 text-left" style="padding-top:3px;"><input type="text" name="city" value="Houston">, <input type="text" size="2" name="state" value="TX"> <input type="text" style="width:50px;" name="zip"></div>
</div>
<div class="row">
<div class="col-sm-6 col-xs-6 text-right" style="padding-top:3px;">Key Map#: </div>
<div class="col-sm-6 col-xs-6 text-left" style="padding-top:3px;"><input type="text" name="keymap1" style="width:40px;">-<input type="text" name="keymap2" style="width:30px;"><span style="padding-left:20px;">Phone#: </span><input type="text" name="phac" style="width:40px;">-<input type="text" name="phex" style="width:40px;"> <input type="text" name="phl4" style="width:45px;"></div>
</div>
<div class="row">
<div class="col-sm-6 col-xs-6 text-right" style="padding-top:3px;">Same as above: <input type="checkbox" name="ckmasa"> Mailing Address: </div>
<div class="col-sm-6 col-xs-6 text-left" style="padding-top:3px;"><input type="text" name="madr" style="width:300px;"></div>
</div>
<div class="row">
<div class="col-sm-6 col-xs-6 text-right" style="padding-top:3px;">Contact Name: </div>
<div class="col-sm-6 col-xs-6 text-left" style="padding-top:3px;"><input type="text" name="conname" style="width:200px;"></div>
</div>
<div class="row">
<div class="col-sm-6 col-xs-6 text-right" style="padding-top:3px;"><b>Type of Assembly</b></div>
<div class="col-sm-6 col-xs-6 text-left" style="padding-top:3px;"> </div>
</div>
<div class="row">
<div class="col-sm-1 col-xs-1"> </div>
<div class="col-sm-10 col-xs-10 text-center" style="padding-top:3px;"><span style="padding-right:50px;">New <input type="radio" name="anr"></span><span style="padding-right:50px;">Existing <input type="radio" name="anr"></span>Replaced: <input type="text" name="rsn" style="width:150px;"> (Old serial number replaced)</div>
<div class="col-sm-1 col-xs-1"> </div>
</div>
<div class="row">
<div class="col-sm-1 col-xs-1"> </div>
<div class="col-sm-10 col-xs-10 text-center" style="padding-top:3px;"><span style="padding-right:50px;"><input type="radio" name="asstyp"> Reduced Pressure Principle (RP)</span><span style="padding-right:50px;"><input type="radio" name="asstyp"> Reduced Pressure Principle Detector (RPD)</span><span><input type="radio" name="asstyp"> Pressure Vacuum Breaker (PVB)</span></div>
<div class="col-sm-1 col-xs-1"> </div>
</div>
<div class="row">
<div class="col-sm-1 col-xs-1"> </div>
<div class="col-sm-10 col-xs-10 text-center" style="padding-top:3px;"><span style="padding-right:50px;"><input type="radio" name="asstyp"> Double Check Valve (DCV)</span><span style="padding-right:50px;"><input type="radio" name="asstyp"> Double Check Valve - Detector (DCD)</span><span><input type="radio" name="asstyp"> Spill Resistant Pressure Vacuum Breaker (SVB)</span></div>
<div class="col-sm-1 col-xs-1"> </div>
</div>
<div class="row">
<div class="col-sm-1 col-xs-1"> </div>
<div class="col-sm-10 col-xs-10 text-center" style="padding-top:3px;"><span style="padding-right:30px;">Manufacturer: <input type="text" name="mfg" style="width:150px;"></span><span style="padding-right:30px;">Model #: <input type="text" name="model" style="width:100px;"></span><span style="padding-right:30px;">Size: <input type="text" name="size" style="width:100px;"></span><span>Serial Number: <input type="text" name="serno" style="width:150px;"></span></div>
<div class="col-sm-1 col-xs-1"> </div>
</div>
<div class="row">
<div class="col-sm-1 col-xs-1"> </div>
<div class="col-sm-10 col-xs-10 text-center" style="padding-top:3px;"><span style="padding-right:30px;">Serving/Location: <input type="text" class="form-control" name="sloc" ></span><span>Date Installed: <input type="text" name="instdate" id="datepickerid" ></span></div>
<div class="col-sm-1 col-xs-1"> </div>
</div>
<div class="row">
<div class="col-sm-12 col xs-12"> </div>
</div>
<div class="row">
<div class="col-sm-2 col-xs-2" style="padding-top:3px;"> </div>
<div class="col-sm-6 col-xs-6 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:30px;">REDUCED PRESSURE PRINCIPLE ASSEMBLY</div>
<div class="col-sm-4 col-xs-4 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:30px;">PRESSURE VACUUM BREAKER & SVB</div>
</div>
<div class="row">
<div class="col-sm-2 col-xs-2" style="padding-top:3px;"> </div>
<div class="col-sm-4 col-xs-4 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:30px;">Double Check Valve Assembly</div>
<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;height:30px;border-right-style: solid;border-width:2px;">RELIEF VALVE</div>
<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;height:30px;">AIR INLET</div>
<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;height:30px;">CHECK VALVE</div>
</div>
<div class="row">
<div class="col-sm-2 col-xs-2" style="padding-top:3px;"> </div>
<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;">CHECK VALVE #1</div>
<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;">CHECK VALVE #2</div>
<div class="col-sm-6 col-xs-6 text-center" style="padding-top:3px;vertical-align:middle;"> </div>
</div>
<div class="row">
<div class="col-sm-2 col-xs-2 text-center" style="display:table-cell;padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:90px;"><br>INITAL<br>TEST</div>
<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:90px;">D. C. Closed Tight <input type="checkbox" name="itcv1ct"><br>RP <input type="text" name="itcv1psi" style="width:75px;"> PSI<br>Leaked <input type="checkbox" name="itdcv1l"></div>
<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:90px;">Closed Tight <input type="checkbox" name="itcv2ct"><br><input type="text" name="itrvpsi" style="width:75px;"> PSI<br>Leaked <input type="checkbox" name="itdno"></div>
<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:90px;">Opened At<br><input type="text" name="itrvpsi" style="width:75px;"> PSI<br>Did Not Open <input type="checkbox" name="itrvdno"></div>
<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:90px;">Opened At<br><input type="text" name="itaipsi" style="width:75px;"> PSI<br>Did Not Open <input type="checkbox" name="itaidno"></div>
<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:90px;">Held At<br><input type="text" name="itcvpsi" style="width:75px;"> PSI<br>Leaked <input type="checkbox" name="itcvl"></div>
</div>
<div class="row">
<div class="col-sm-2 col-xs-2 text-center" style="display:table-cell;padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:100px;">REPAIRS<br>MATERIALS<br>USED</div>
<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:100px;"><textarea class="form-control" rows="3" cols="18" name="rmucv1"></textarea></div>
<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:100px;"><textarea class="form-control" rows="3" cols="18" name="rmucv2"></textarea></div>
<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:100px;"><textarea class="form-control" rows="3" cols="18" name="rmurv"></textarea></div>
<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:100px;"><textarea class="form-control" rows="3" cols="18" name="rmuai"></textarea></div>
<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:100px;"><textarea class="form-control" rows="3" cols="18" name="rmucv"></textarea></div>
</div>
<div class="row">
<div class="col-sm-2 col-xs-2 text-center" style="display:table-cell;padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:90px;"><br>FINAL<br>TEST</div>
<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:90px;">D. C. Closed Tight <input type="checkbox" name="ftcv1ct"><br>RP <input type="text" name="ftcv1psi" style="width:75px;"> PSI</div>
<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:90px;">Closed Tight <input type="checkbox" name="ftcv2ct"><br><input type="text" name="ftrvpsi" style="width:75px;"> PSI</div>
<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:90px;">Opened At<br><input type="text" name="ftrvpsi" style="width:75px;"> PSI</div>
<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:90px;">Opened At<br><input type="text" name="ftaipsi" style="width:75px;"> PSI</div>
<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:90px;">Held At<br><input type="text" name="ftcvpsi" style="width:75px;"> PSI</div>
</div>
<div class="row">
<div class="col-sm-6 col-xs-6" style="padding-top:3px;height:20px;">Test Gauge Used: Make/Model <input type="text" name="tgmm" style="width:150px;" value="WATTS TK-99E"></div>
<div class="col-sm-2 col-xs-2" style="padding-top:3px;height:20px;">S/N: <input type="text" name="tgsn" style="width:100px;" value="0061821"></div>
<div class="col-sm-4 col-xs-4" style="padding-top:3px;height:20px;">Calibration Date: <input type="text" name="caldate" id="datepickerdc" value="05/03/2016" style="width:100px;" > {Tested Annually}</div>
</div>
<div class="row">
<div class="col-sm-12 col-xs-12" style="padding-top:14px;">Remarks: <input type="text" name="tgmm" class="form-control" style="width:350px></div>
</div>
<div class="row">
<div class="col-sm-9 col-xs-9" style="padding-top:5px;height:20px;">The above is certified to be true at the time of Testing</div>
</div>
<div class="row">
<div class="col-sm-6 col-xs-6" style="padding-top:5px;height:20px;">Backflow Test Status <input type="radio" name="passfail" value="p"> Pass <input type="radio" name="passfail" value="f"> Fail</div>
</div>
<div class="row">
<div class="col-sm-6 col-xs-6" style="padding-top:10px;">CT's Firm Name: <input type="text" name="bffirm" value="Backflowinspector.com" style="width:300px;"></div>
<div class="col-sm-6 col-xs-6" style="padding-top:10px;">Tester Name: <input type="text" name="bfname" value="Daniel Todd" style="width:300px;"></div>
</div>
<div class="row">
<div class="col-sm-6 col-xs-6" style="padding-top:10px;">Firm Address: <input type="text" name="bfaddr1" value="5306 Riverview Way" style="width:300px;"></div>
<div class="col-sm-6 col-xs-6" style="padding-top:10px;">City Tester No.: <input type="text" name="bftno" value="#005, BPAT 11021" style="width:300px;"></div>
</div>
<div class="row">
<div class="col-sm-6 col-xs-6" style="padding-top:10px;"><input type="text" name="bfaddr2" style="width:300px;" value="Houston, TX 77057"></div>
<div class="col-sm-6 col-xs-6" style="padding-top:10px;">Test Date: <input type="text" name="testdate" id="datepickertd" value="07/18/2016" style="width:100px;" ></div>
</div>
<div class="row">
<div class="col-sm-6 col-xs-6" style="padding-top:10px;">Firm Phone #:<input type="text" name="phone" style="width:150px;" value="713-518-9660"></div>
<div class="col-sm-6 col-xs-6" style="padding-top:10px;">C.O.H C.C.C Witness: <input type="text" name="witness" style="width:300px;" ></div>
</div>
<div class="row">
<div class="col-sm-12 col-xs-12 text-center" style="padding-top:10px;"><input type="submit" value="Submit Form"></div>
</div>
</div>
</form>
</div>
</body>
</html>
BootstrapResponsive Web
Last Comment
Russ Suter