We help IT Professionals succeed at work.

Bootstrap Overlap

Richard Korts
on
135 Views
Last Modified: 2017-03-16
See attached image. This is produced from this html:
<!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">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.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>

    <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>Backflow Assembly & Tester Information </title>
    <style>
        .nopadding {
            padding: 0 !important;
            margin: 0 !important;
        }
        
        .wrapper {
            max-width: 767px;
            min-width: 480px;
            margin: 0 auto;
        }
    </style>
	<script>
	tstr = new Array();
	lic = new Array();
	nu = ;
		
	tp = "u";
	function chk_vals() {
		if (document.st.tname1.value == "" || document.st.tsl1.value == "" || document.st.tlexd1.value == "" || document.st.tgmm1.value == "" || document.st.tsn1.value == "" || document.st.tgcd1.value == "") {
			alert("Data for at least one tester is required.");
			return false;
		}	

		return true;
	}
	</script>
	<script>
  $(function() {
    $( "#datepickercd" ).datepicker();
  });
  $(function() {
    $( "#datepickerle" ).datepicker();
  });
</script>
</head>	
<body>
<div class="wrapper">
<form method="POST" name="st" action="proc_registern.php?tp=u" onSubmit="return chk_vals();">
<input type="hidden" id="resp">
<input type="hidden" name="pname" value="Richard Korts">
<input type="hidden" name="email" value="richardkorts@gmail.com">
<input type="hidden" name="pwd" value="Janetko1">
<input type="hidden" name="firm" value="RK Associates">
<input type="hidden" name="faddr" value="2248 Houson St">
<input type="hidden" name="fcity" value="Denver">
<input type="hidden" name="fst" value="CO">
<input type="hidden" name="fzip" value="81007">
<input type="hidden" name="fphone" value="619-855-9192">
<div class="container-fluid" style="background-color: #F3D9AF;">
<div class="row" style="background-color: #F3D9AF;">
    <div class="col-xs-8 text-center col-xs-offset-2"><img src="images/bfp_logo_sm.jpg"></div>
</div>
<div class="row" style="background-color: #F3D9AF;">
       <div class="col-xs-8 text-center col-xs-offset-2" style="font-size:18px;"><b>Backflow Assembly & Test Report Testers - Update Information</b></div>
 </div>

<div class="row">
		<div class="col-xs-4" style="padding-top:10px;">Tester #1</div>
		<input type="hidden" name="tno1" value = "1">
	</div>
		
	<div class="row">
		<div class="col-xs-2 text-right" style="padding-top:10px;">Name:</div>
		<div class="col-xs-2" style="padding-top:10px;"><input type="text" name="tname1" value="Richard Korts"></div>
		<div class="col-xs-2 text-right" style="padding-top:10px;">State License:</div>
		<div class="col-xs-2" style="padding-top:10px;"><input type="text" name="tsl1" value="BPAT12345"></div>
		<div class="col-xs-2 text-right" style="padding-top:10px;">License Expire:</div>
		<div class="col-xs-2" style="padding-top:10px;"><input type="text" name="tlexd1" id="datepickerle" value="11/302016"></div>
	</div>
	<div class="row">
		<div class="col-xs-2 text-right" style="padding-top:10px;">Test Guage Make / Model:</div>
		<div class="col-xs-2" style="padding-top:10px;"><input type="text" name="tgmm1" value="Watts TK-99E"></div>
		<div class="col-xs-2 text-right" style="padding-top:10px;">Serial No:</div>
		<div class="col-xs-2" style="padding-top:10px;"><input type="text" name="tsn1" value="061843"></div>
		<div class="col-xs-2 text-right" style="padding-top:10px;">Calibration Date:</div>
		<div class="col-xs-2" style="padding-top:10px;"><input type="text" name="tgcd1" id="datepickercd" value="07/132016"></div>
	</div>
	<div class="row">
		<div class="col-xs-8 col-xs-offset-2">City License Numbers (if applicable)</div>
	</div>
			<div class="row">
		<div class= "col-xs-2">&nbsp;</div>
		<div class="col-xs-2 text-right" style="padding-top:10px;">City 1:</div>	
		<div class="col-xs-2" style="padding-top:10px;"><select name="clc11">
		<option value="">--- Select City ---</option>
				
			<option value="Alvin" >Alvin</option>
				
			<option value="Baytown" >Baytown</option>
				
			<option value="College Station" >College Station</option>
				
			<option value="Conroe" >Conroe</option>
				
			<option value="Fort Bend County" >Fort Bend County</option>
				
			<option value="Friendswood" >Friendswood</option>
				
			<option value="Fulshear" >Fulshear</option>
				
			<option value="Georgetown " >Georgetown </option>
				
			<option value="Houston" selected>Houston</option>
				
			<option value="Katy" >Katy</option>
				
			<option value="Municipal District Services" >Municipal District Services</option>
				
			<option value="Pasadena" >Pasadena</option>
				
			<option value="Pearland" >Pearland</option>
				
			<option value="Richmond" >Richmond</option>
				
			<option value="Sugar Land" >Sugar Land</option>
				
			<option value="The Woodlands" >The Woodlands</option>
				
			<option value="Tomball" >Tomball</option>
			
			</select></div>
		<div class="col-xs-2 text-right" style="padding-top:10px;">City Lic #:</div>
		<div class="col-xs-2" style="padding-top:10px;"><input type="text" name="cln11" value=""></div>
	</div>	
	<div class="row">
		<div class= "col-xs-2">&nbsp;</div>
		<div class="col-xs-2 text-right" style="padding-top:10px;">City 2:</div>	
		<div class="col-xs-2" style="padding-top:10px;"><select name="clc12">
		<option value="">--- Select City ---</option>
				
			<option value="Alvin" >Alvin</option>
				
			<option value="Baytown" >Baytown</option>
				
			<option value="College Station" >College Station</option>
				
			<option value="Conroe" >Conroe</option>
				
			<option value="Fort Bend County" >Fort Bend County</option>
				
			<option value="Friendswood" >Friendswood</option>
				
			<option value="Fulshear" >Fulshear</option>
				
			<option value="Georgetown " >Georgetown </option>
				
			<option value="Houston" selected>Houston</option>
				
			<option value="Katy" >Katy</option>
				
			<option value="Municipal District Services" >Municipal District Services</option>
				
			<option value="Pasadena" >Pasadena</option>
				
			<option value="Pearland" >Pearland</option>
				
			<option value="Richmond" >Richmond</option>
				
			<option value="Sugar Land" >Sugar Land</option>
				
			<option value="The Woodlands" >The Woodlands</option>
				
			<option value="Tomball" >Tomball</option>
			
			</select></div>
		<div class="col-xs-2 text-right" style="padding-top:10px;">City Lic #:</div>
		<div class="col-xs-2" style="padding-top:10px;"><input type="text" name="cln12" value=""></div>
	</div>
	<div class="row">
		<div class= "col-xs-2">&nbsp;</div>
		<div class="col-xs-2 text-right" style="padding-top:10px;">City 3:</div>	
		<div class="col-xs-2" style="padding-top:10px;"><select name="clc13">
		<option value="">--- Select City ---</option>
				
			<option value="Alvin" >Alvin</option>
				
			<option value="Baytown" >Baytown</option>
				
			<option value="College Station" >College Station</option>
				
			<option value="Conroe" >Conroe</option>
				
			<option value="Fort Bend County" >Fort Bend County</option>
				
			<option value="Friendswood" >Friendswood</option>
				
			<option value="Fulshear" >Fulshear</option>
				
			<option value="Georgetown " >Georgetown </option>
				
			<option value="Houston" selected>Houston</option>
				
			<option value="Katy" >Katy</option>
				
			<option value="Municipal District Services" >Municipal District Services</option>
				
			<option value="Pasadena" >Pasadena</option>
				
			<option value="Pearland" >Pearland</option>
				
			<option value="Richmond" >Richmond</option>
				
			<option value="Sugar Land" >Sugar Land</option>
				
			<option value="The Woodlands" >The Woodlands</option>
				
			<option value="Tomball" >Tomball</option>
			
			</select></div>
		<div class="col-xs-2 text-right" style="padding-top:10px;">City Lic #:</div>
		<div class="col-xs-2" style="padding-top:10px;"><input type="text" name="cln13" value=""></div>
	</div>	 
	<div class="row">
		<div class="col-xs-4" style="padding-top:10px;">Tester #2</div>
		<input type="hidden" name="tno1" value = "1">
	</div>
		
	<div class="row">
		<div class="col-xs-2 text-right" style="padding-top:10px;">Name:</div>
		<div class="col-xs-2" style="padding-top:10px;"><input type="text" name="tname2" value=""></div>
		<div class="col-xs-2 text-right" style="padding-top:10px;">State License:</div>
		<div class="col-xs-2" style="padding-top:10px;"><input type="text" name="tsl2" value=""></div>
		<div class="col-xs-2 text-right" style="padding-top:10px;">License Expire:</div>
		<div class="col-xs-2" style="padding-top:10px;"><input type="text" name="tlexd2" id="datepickerle" value="/"></div>
	</div>
	<div class="row">
		<div class="col-xs-2 text-right" style="padding-top:10px;">Test Guage Make / Model:</div>
		<div class="col-xs-2" style="padding-top:10px;"><input type="text" name="tgmm2" value=""></div>
		<div class="col-xs-2 text-right" style="padding-top:10px;">Serial No:</div>
		<div class="col-xs-2" style="padding-top:10px;"><input type="text" name="tsn2" value=""></div>
		<div class="col-xs-2 text-right" style="padding-top:10px;">Calibration Date:</div>
		<div class="col-xs-2" style="padding-top:10px;"><input type="text" name="tgcd2" id="datepickercd" value="/"></div>
	</div>
	<div class="row">
		<div class="col-xs-8 col-xs-offset-2">City License Numbers (if applicable)</div>
	</div>
			<div class="row">
		<div class= "col-xs-2">&nbsp;</div>
		<div class="col-xs-2 text-right" style="padding-top:10px;">City 1:</div>	
		<div class="col-xs-2" style="padding-top:10px;"><select name="clc21">
		<option value="">--- Select City ---</option>
				
			<option value="Alvin" >Alvin</option>
				
			<option value="Baytown" >Baytown</option>
				
			<option value="College Station" >College Station</option>
				
			<option value="Conroe" >Conroe</option>
				
			<option value="Fort Bend County" >Fort Bend County</option>
				
			<option value="Friendswood" >Friendswood</option>
				
			<option value="Fulshear" >Fulshear</option>
				
			<option value="Georgetown " >Georgetown </option>
				
			<option value="Houston" >Houston</option>
				
			<option value="Katy" >Katy</option>
				
			<option value="Municipal District Services" >Municipal District Services</option>
				
			<option value="Pasadena" >Pasadena</option>
				
			<option value="Pearland" >Pearland</option>
				
			<option value="Richmond" >Richmond</option>
				
			<option value="Sugar Land" >Sugar Land</option>
				
			<option value="The Woodlands" >The Woodlands</option>
				
			<option value="Tomball" >Tomball</option>
			
			</select></div>
		<div class="col-xs-2 text-right" style="padding-top:10px;">City Lic #:</div>
		<div class="col-xs-2" style="padding-top:10px;"><input type="text" name="cln21" value=""></div>
	</div>	
	<div class="row">
		<div class= "col-xs-2">&nbsp;</div>
		<div class="col-xs-2 text-right" style="padding-top:10px;">City 2:</div>	
		<div class="col-xs-2" style="padding-top:10px;"><select name="clc22">
		<option value="">--- Select City ---</option>
				
			<option value="Alvin" >Alvin</option>
				
			<option value="Baytown" >Baytown</option>
				
			<option value="College Station" >College Station</option>
				
			<option value="Conroe" >Conroe</option>
				
			<option value="Fort Bend County" >Fort Bend County</option>
				
			<option value="Friendswood" >Friendswood</option>
				
			<option value="Fulshear" >Fulshear</option>
				
			<option value="Georgetown " >Georgetown </option>
				
			<option value="Houston" >Houston</option>
				
			<option value="Katy" >Katy</option>
				
			<option value="Municipal District Services" >Municipal District Services</option>
				
			<option value="Pasadena" >Pasadena</option>
				
			<option value="Pearland" >Pearland</option>
				
			<option value="Richmond" >Richmond</option>
				
			<option value="Sugar Land" >Sugar Land</option>
				
			<option value="The Woodlands" >The Woodlands</option>
				
			<option value="Tomball" >Tomball</option>
			
			</select></div>
		<div class="col-xs-2 text-right" style="padding-top:10px;">City Lic #:</div>
		<div class="col-xs-2" style="padding-top:10px;"><input type="text" name="cln22" value=""></div>
	</div>
	<div class="row">
		<div class= "col-xs-2">&nbsp;</div>
		<div class="col-xs-2 text-right" style="padding-top:10px;">City 3:</div>	
		<div class="col-xs-2" style="padding-top:10px;"><select name="clc23">
		<option value="">--- Select City ---</option>
				
			<option value="Alvin" >Alvin</option>
				
			<option value="Baytown" >Baytown</option>
				
			<option value="College Station" >College Station</option>
				
			<option value="Conroe" >Conroe</option>
				
			<option value="Fort Bend County" >Fort Bend County</option>
				
			<option value="Friendswood" >Friendswood</option>
				
			<option value="Fulshear" >Fulshear</option>
				
			<option value="Georgetown " >Georgetown </option>
				
			<option value="Houston" >Houston</option>
				
			<option value="Katy" >Katy</option>
				
			<option value="Municipal District Services" >Municipal District Services</option>
				
			<option value="Pasadena" >Pasadena</option>
				
			<option value="Pearland" >Pearland</option>
				
			<option value="Richmond" >Richmond</option>
				
			<option value="Sugar Land" >Sugar Land</option>
				
			<option value="The Woodlands" >The Woodlands</option>
				
			<option value="Tomball" >Tomball</option>
			
			</select></div>
		<div class="col-xs-2 text-right" style="padding-top:10px;">City Lic #:</div>
		<div class="col-xs-2" style="padding-top:10px;"><input type="text" name="cln23" value=""></div>
	</div>	 
	<div class="row">
		<div class="col-xs-4" style="padding-top:10px;">Tester #3</div>
		<input type="hidden" name="tno1" value = "1">
	</div>
		
	<div class="row">
		<div class="col-xs-2 text-right" style="padding-top:10px;">Name:</div>
		<div class="col-xs-2" style="padding-top:10px;"><input type="text" name="tname3" value=""></div>
		<div class="col-xs-2 text-right" style="padding-top:10px;">State License:</div>
		<div class="col-xs-2" style="padding-top:10px;"><input type="text" name="tsl3" value=""></div>
		<div class="col-xs-2 text-right" style="padding-top:10px;">License Expire:</div>
		<div class="col-xs-2" style="padding-top:10px;"><input type="text" name="tlexd3" id="datepickerle" value="/"></div>
	</div>
	<div class="row">
		<div class="col-xs-2 text-right" style="padding-top:10px;">Test Guage Make / Model:</div>
		<div class="col-xs-2" style="padding-top:10px;"><input type="text" name="tgmm3" value=""></div>
		<div class="col-xs-2 text-right" style="padding-top:10px;">Serial No:</div>
		<div class="col-xs-2" style="padding-top:10px;"><input type="text" name="tsn3" value=""></div>
		<div class="col-xs-2 text-right" style="padding-top:10px;">Calibration Date:</div>
		<div class="col-xs-2" style="padding-top:10px;"><input type="text" name="tgcd3" id="datepickercd" value="/"></div>
	</div>
	<div class="row">
		<div class="col-xs-8 col-xs-offset-2">City License Numbers (if applicable)</div>
	</div>
			<div class="row">
		<div class= "col-xs-2">&nbsp;</div>
		<div class="col-xs-2 text-right" style="padding-top:10px;">City 1:</div>	
		<div class="col-xs-2" style="padding-top:10px;"><select name="clc31">
		<option value="">--- Select City ---</option>
				
			<option value="Alvin" >Alvin</option>
				
			<option value="Baytown" >Baytown</option>
				
			<option value="College Station" >College Station</option>
				
			<option value="Conroe" >Conroe</option>
				
			<option value="Fort Bend County" >Fort Bend County</option>
				
			<option value="Friendswood" >Friendswood</option>
				
			<option value="Fulshear" >Fulshear</option>
				
			<option value="Georgetown " >Georgetown </option>
				
			<option value="Houston" >Houston</option>
				
			<option value="Katy" >Katy</option>
				
			<option value="Municipal District Services" >Municipal District Services</option>
				
			<option value="Pasadena" >Pasadena</option>
				
			<option value="Pearland" >Pearland</option>
				
			<option value="Richmond" >Richmond</option>
				
			<option value="Sugar Land" >Sugar Land</option>
				
			<option value="The Woodlands" >The Woodlands</option>
				
			<option value="Tomball" >Tomball</option>
			
			</select></div>
		<div class="col-xs-2 text-right" style="padding-top:10px;">City Lic #:</div>
		<div class="col-xs-2" style="padding-top:10px;"><input type="text" name="cln31" value=""></div>
	</div>	
	<div class="row">
		<div class= "col-xs-2">&nbsp;</div>
		<div class="col-xs-2 text-right" style="padding-top:10px;">City 2:</div>	
		<div class="col-xs-2" style="padding-top:10px;"><select name="clc32">
		<option value="">--- Select City ---</option>
				
			<option value="Alvin" >Alvin</option>
				
			<option value="Baytown" >Baytown</option>
				
			<option value="College Station" >College Station</option>
				
			<option value="Conroe" >Conroe</option>
				
			<option value="Fort Bend County" >Fort Bend County</option>
				
			<option value="Friendswood" >Friendswood</option>
				
			<option value="Fulshear" >Fulshear</option>
				
			<option value="Georgetown " >Georgetown </option>
				
			<option value="Houston" >Houston</option>
				
			<option value="Katy" >Katy</option>
				
			<option value="Municipal District Services" >Municipal District Services</option>
				
			<option value="Pasadena" >Pasadena</option>
				
			<option value="Pearland" >Pearland</option>
				
			<option value="Richmond" >Richmond</option>
				
			<option value="Sugar Land" >Sugar Land</option>
				
			<option value="The Woodlands" >The Woodlands</option>
				
			<option value="Tomball" >Tomball</option>
			
			</select></div>
		<div class="col-xs-2 text-right" style="padding-top:10px;">City Lic #:</div>
		<div class="col-xs-2" style="padding-top:10px;"><input type="text" name="cln32" value=""></div>
	</div>
	<div class="row">
		<div class= "col-xs-2">&nbsp;</div>
		<div class="col-xs-2 text-right" style="padding-top:10px;">City 3:</div>	
		<div class="col-xs-2" style="padding-top:10px;"><select name="clc33">
		<option value="">--- Select City ---</option>
				
			<option value="Alvin" >Alvin</option>
				
			<option value="Baytown" >Baytown</option>
				
			<option value="College Station" >College Station</option>
				
			<option value="Conroe" >Conroe</option>
				
			<option value="Fort Bend County" >Fort Bend County</option>
				
			<option value="Friendswood" >Friendswood</option>
				
			<option value="Fulshear" >Fulshear</option>
				
			<option value="Georgetown " >Georgetown </option>
				
			<option value="Houston" >Houston</option>
				
			<option value="Katy" >Katy</option>
				
			<option value="Municipal District Services" >Municipal District Services</option>
				
			<option value="Pasadena" >Pasadena</option>
				
			<option value="Pearland" >Pearland</option>
				
			<option value="Richmond" >Richmond</option>
				
			<option value="Sugar Land" >Sugar Land</option>
				
			<option value="The Woodlands" >The Woodlands</option>
				
			<option value="Tomball" >Tomball</option>
			
			</select></div>
		<div class="col-xs-2 text-right" style="padding-top:10px;">City Lic #:</div>
		<div class="col-xs-2" style="padding-top:10px;"><input type="text" name="cln33" value=""></div>
	</div>	 
	
	
	<div class="row">
		<div class="col-xs-8 text-center col-xs-offset-2" style="padding-top:10px;"><input type="submit" value="Update Information"></div>
	</div>
	<div class="row">
		<div class="col-xs-8 col-xs-offset-2" style="padding-top:10px;">&nbsp;</div>
	</div>
            </div>
        </form>
    </div>
</body>

</html>

Open in new window


Why the overlap of text & form elements?
testers-form.jpg
Comment
Watch Question

Marco GasiFreelancer
CERTIFIED EXPERT
Top Expert 2010

Commented:
Sorry, Richard, but it is really hard provide a solution to such a problem this way: I would need a link to a live page so I could inspect the page using Developer Tools and analyze which rule affects each element. There could be a min-width for input elements set somewhere in some stylesheet or just some conflict between 2 different rules or a missing '!important' clause... or something else :)
Richard KortsBusiness Owner / Chief Developer

Author

Commented:
OK, I will need to set up a password, etc., to get to this point. That is why I put in the html code, it is generated from php, etc.

I was trying to avoid those complexities.

Actually, if you have a private email (where I don't have to put it on EE for the world to see), I could give you the logon, etc.

Thanks,

Richard
Marco GasiFreelancer
CERTIFIED EXPERT
Top Expert 2010

Commented:
Hi. This is what I see:
formIt looks quite different from your image, don't understand why...
Richard KortsBusiness Owner / Chief Developer

Author

Commented:
Marco,

Maybe I didn't give you the right url in the email:

backflowtestreport.com/indexn.php

What you have is the current live version; I am testing a new, different version. The equivalent page should look like the attached. Then click "Update Tester Data" to get to the page with the issue.

Thanks
firm_form.jpg
Marco GasiFreelancer
CERTIFIED EXPERT
Top Expert 2010

Commented:
Ah ah ah! I thought "index.php" was a typo...
Richard KortsBusiness Owner / Chief Developer

Author

Commented:
it is indexn.php (n for new).

Richard
Freelancer
CERTIFIED EXPERT
Top Expert 2010
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
Richard KortsBusiness Owner / Chief Developer

Author

Commented:
I'd prefer the button (at the bottom) not be that wide, I probably need it in a single column. Or maybe include "submit" in the CSS?

Thanks
Marco GasiFreelancer
CERTIFIED EXPERT
Top Expert 2010

Commented:
Hi Richard, thanks for points.
Change above rule this way:
input:not([type="submit"]), select {
    width: 100%;
}

Open in new window

So every input except those of type submit and all select will have their width set to 100%.
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.