Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 100
  • Last Modified:

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.htm. Specifically Remarks and "Serving Location".

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:&nbsp;</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:&nbsp;</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:&nbsp;</div>
	<div class="col-sm-6 col-xs-6 text-left"  style="padding-top:3px;"><input type="text" name="city" value="Houston">,&nbsp;<input type="text" size="2" name="state" value="TX">&nbsp;<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#:&nbsp;</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#:&nbsp;</span><input type="text" name="phac" style="width:40px;">-<input type="text" name="phex" style="width:40px;">&nbsp;<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:&nbsp;<input type="checkbox" name="ckmasa">&nbsp;Mailing Address:&nbsp;</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:&nbsp;</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;">&nbsp;</div>
</div>	
<div class="row">
	<div class="col-sm-1 col-xs-1">&nbsp;</div>
	<div class="col-sm-10 col-xs-10 text-center" style="padding-top:3px;"><span style="padding-right:50px;">New&nbsp;<input type="radio" name="anr"></span><span style="padding-right:50px;">Existing&nbsp;<input type="radio" name="anr"></span>Replaced:&nbsp;<input type="text" name="rsn" style="width:150px;">&nbsp;(Old serial number replaced)</div>
	<div class="col-sm-1 col-xs-1">&nbsp;</div>
</div>	
<div class="row">
	<div class="col-sm-1 col-xs-1">&nbsp;</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">&nbsp;Reduced Pressure Principle (RP)</span><span style="padding-right:50px;"><input type="radio" name="asstyp">&nbsp;Reduced Pressure Principle Detector (RPD)</span><span><input type="radio" name="asstyp">&nbsp;Pressure Vacuum Breaker (PVB)</span></div>
	<div class="col-sm-1 col-xs-1">&nbsp;</div>
</div>	
<div class="row">
	<div class="col-sm-1 col-xs-1">&nbsp;</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">&nbsp;Double Check Valve (DCV)</span><span style="padding-right:50px;"><input type="radio" name="asstyp">&nbsp;Double Check Valve - Detector (DCD)</span><span><input type="radio" name="asstyp">&nbsp;Spill Resistant Pressure Vacuum Breaker (SVB)</span></div>
	<div class="col-sm-1 col-xs-1">&nbsp;</div>
</div>
<div class="row">
	<div class="col-sm-1 col-xs-1">&nbsp;</div>
	<div class="col-sm-10 col-xs-10 text-center" style="padding-top:3px;"><span style="padding-right:30px;">Manufacturer:&nbsp;<input type="text" name="mfg" style="width:150px;"></span><span style="padding-right:30px;">Model #:&nbsp;<input type="text" name="model" style="width:100px;"></span><span style="padding-right:30px;">Size:&nbsp;<input type="text" name="size" style="width:100px;"></span><span>Serial Number:&nbsp;<input type="text" name="serno" style="width:150px;"></span></div>
	<div class="col-sm-1 col-xs-1">&nbsp;</div>
</div>
<div class="row">
	<div class="col-sm-1 col-xs-1">&nbsp;</div>
	<div class="col-sm-10 col-xs-10 text-center" style="padding-top:3px;"><span style="padding-right:30px;">Serving/Location:&nbsp;<input type="text" class="form-control" name="sloc" ></span><span>Date Installed:&nbsp;<input type="text" name="instdate" id="datepickerid" ></span></div>
	<div class="col-sm-1 col-xs-1">&nbsp;</div>
</div>
<div class="row">
	<div class="col-sm-12 col xs-12">&nbsp;</div>
</div>	
<div class="row">
	<div class="col-sm-2 col-xs-2" style="padding-top:3px;">&nbsp;</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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</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&nbsp;<input type="checkbox" name="itcv1ct"><br>RP&nbsp;<input type="text" name="itcv1psi" style="width:75px;">&nbsp;PSI<br>Leaked&nbsp;<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&nbsp;<input type="checkbox" name="itcv2ct"><br><input type="text" name="itrvpsi" style="width:75px;">&nbsp;PSI<br>Leaked&nbsp;<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;">&nbsp;PSI<br>Did Not Open&nbsp;<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;">&nbsp;PSI<br>Did Not Open&nbsp;<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;">&nbsp;PSI<br>Leaked&nbsp;<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&nbsp;<input type="checkbox" name="ftcv1ct"><br>RP&nbsp;<input type="text" name="ftcv1psi" style="width:75px;">&nbsp;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&nbsp;<input type="checkbox" name="ftcv2ct"><br><input type="text" name="ftrvpsi" style="width:75px;">&nbsp;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;">&nbsp;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;">&nbsp;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;">&nbsp;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&nbsp;<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:&nbsp;<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:&nbsp;<input type="text" name="caldate" id="datepickerdc" value="05/03/2016" style="width:100px;" >&nbsp;{Tested Annually}</div>
</div>
<div class="row">
	<div class="col-sm-12 col-xs-12" style="padding-top:14px;">Remarks:&nbsp;<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&nbsp;<input type="radio" name="passfail" value="p">&nbsp;Pass&nbsp;<input type="radio" name="passfail" value="f">&nbsp;Fail</div>
</div>
<div class="row">
	<div class="col-sm-6 col-xs-6" style="padding-top:10px;">CT's Firm Name:&nbsp;<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:&nbsp;<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:&nbsp;<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.:&nbsp;<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:&nbsp;<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:&nbsp;<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>

Open in new window

0
Richard Korts
Asked:
Richard Korts
  • 2
1 Solution
 
Russ SuterCommented:
One option would be to simply apply a max-width style attribute to those elements. However this tends to go against the responsive design principles on which Bootstrap is based.

A second option would be to use grid options (http://getbootstrap.com/css/#grid-options) and limit your column widths. Rather than restricting the elements to a particular size you could artifically pad left or right with empty columns thus maintaining a proportional appearance regardless of screen dimension. Furthermore you could alter this behavior at different media query breakpoints giving you a full width appearance for smaller screen resolutions.
0
 
Richard KortsAuthor Commented:
Russ Suter,

First Option has no effect. max width does nothing.

Can you give me an example of "Furthermore you could alter this behavior at different media query breakpoints giving you a full width appearance for smaller screen resolutions. "?

Thanks
0
 
Russ SuterCommented:
The max-width attribute will have an effect but may depend on one or both of the following 2 factors:

1. The attribute will need to be applied after all other CSS elements are considered.
2. You may need to include the !important keyword to override previous attribute settings depending on what the existing CSS looks like.

That being said the second option is very viable and Bootstrap offers built-in means to handle this. Take this element for example:
<div class="row"><div class=" col-xs-12 col-sm-8 col-md-6"><input type="text" class="form-control input-sm" placeholder="Small"></div></div>

Open in new window

The Bootstrap documentation (link provided above) explains what the CSS classes mean.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now