Popup Formatting

wcipolli · 12-20-2011, 01:25 PM

I have attached a mock up of the pop up box I am working with. The idea is that it takes input from the user and verifies it. If there are 'recommended changes' this popup comes up showing what they entered on the left and the recommended input to the right. The issue is that sometimes the text on the right is plus or minus one line. Since each box is a separate div there is a mismatch in the box size.

I thought it would be easy to just set the height to a static value and that works but sometimes there's a lot of white space. Also when the issue above used to occur the buttons are now mismatched. I'm not sure what the best approach is. Any help would be gratefully appreciated!

wcipolli · 12-20-2011, 03:51 PM

Shows the full layout:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<style type = "text/css">
.addy_inner{
	
	float:left;

	width:46%;

	height:auto;

	padding:5px;

	border:1px solid #ccc;

	margin-top:5px;

}

#addy_verif {
	
	float:left;

	padding-left: 15px;
	width:500px;

	height:auto;
	border:3px solid #ccc;

}
</style>
</head>

<body>
  <div  id="addy_verif" style="float:center">
  	<div class="addy_inner">
  		<div class="dialog-title">Original:</div>
  	  	<div class="dialog-text" style="word-wrap: break-word;"> company </div>
  	    	<div class="dialog-text" style="word-wrap: break-word;"> name </div>
   		<div class="dialog-text" style="word-wrap: break-word;"> address </div>
   		<div class="dialog-text" style="word-wrap: break-word;"> address2 </div>
    		<div class="dialog-text"> city, state zip</div>
    		<button style="float:right;" type="button">Edit this!</button>
	</div>
  	<div class="addy_inner">
  		<div class="dialog-title">Suggested:</div>
	  	<div class="dialog-text" style="word-wrap: break-word;"> company</div>
  		<div class="dialog-text" style="word-wrap: break-word;"> name</div>
	  	<div class="dialog-text" style="word-wrap: break-word;"> address</div>
  		<div class="dialog-text" style="word-wrap: break-word;"> address2</div>
    		<div class="dialog-text"> city, state zip </div>
    		<button style="float:right;"type="button">Use Recommended</button> 
	</div>
	<center><button type="button">Cancel!</button></center>     
  </div>
</body>
</html>

Shows a possible issue: user data contains no address2 and correction contains address2:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<style type = "text/css">
.addy_inner{
	
	float:left;

	width:46%;

	height:auto;

	padding:5px;

	border:1px solid #ccc;

	margin-top:5px;

}

#addy_verif {
	
	float:left;

	padding-left: 15px;
	width:500px;

	height:auto;
	border:3px solid #ccc;

}
</style>
</head>

<body>
  <div  id="addy_verif" style="float:center">
  	<div class="addy_inner">
  		<div class="dialog-title">Original:</div>
  	  	<div class="dialog-text" style="word-wrap: break-word;"> company </div>
  	    	<div class="dialog-text" style="word-wrap: break-word;"> name </div>
   		<div class="dialog-text" style="word-wrap: break-word;"> address </div>
    		<div class="dialog-text"> city, state zip</div>
    		<button style="float:right;" type="button">Edit this!</button>
	</div>
  	<div class="addy_inner">
  		<div class="dialog-title">Suggested:</div>
	  	<div class="dialog-text" style="word-wrap: break-word;"> company</div>
  		<div class="dialog-text" style="word-wrap: break-word;"> name</div>
	  	<div class="dialog-text" style="word-wrap: break-word;"> address</div>
  		<div class="dialog-text" style="word-wrap: break-word;"> address2</div>
    		<div class="dialog-text"> city, state zip </div>
    		<button style="float:right;"type="button">Use Recommended</button> 
	</div>
	<center><button type="button">Cancel!</button></center>     
  </div>
</body>
</html>

This code shows my first attempt to fix the issue which brings a new issue, button placement:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<style type = "text/css">
.addy_inner{
	
	float:left;

	width:46%;

	height:140px;

	padding:5px;

	border:1px solid #ccc;

	margin-top:5px;

}

#addy_verif {
	
	float:left;

	padding-left: 15px;
	width:500px;

	height:auto;
	border:3px solid #ccc;

}
</style>
</head>

<body>
  <div  id="addy_verif" style="float:center">
  	<div class="addy_inner">
  		<div class="dialog-title">Original:</div>
  	  	<div class="dialog-text" style="word-wrap: break-word;"> company </div>
  	    	<div class="dialog-text" style="word-wrap: break-word;"> name </div>
   		<div class="dialog-text" style="word-wrap: break-word;"> address </div>
    		<div class="dialog-text"> city, state zip</div>
    		<button style="float:right;" type="button">Edit this!</button>
	</div>
  	<div class="addy_inner">
  		<div class="dialog-title">Suggested:</div>
	  	<div class="dialog-text" style="word-wrap: break-word;"> company</div>
  		<div class="dialog-text" style="word-wrap: break-word;"> name</div>
	  	<div class="dialog-text" style="word-wrap: break-word;"> address</div>
  		<div class="dialog-text" style="word-wrap: break-word;"> address2</div>
    		<div class="dialog-text"> city, state zip </div>
    		<button style="float:right;"type="button">Use Recommended</button> 
	</div>
	<center><button type="button">Cancel!</button></center>     
  </div>
</body>
</html>

wcipolli · 12-20-2011, 04:41 PM

I got it since my last post! This looks much better! I only have one question now! How can I have the height of the inner address boxes based on the amount of rows. The range of number of rows goes from 3 to 5. If I have two addresses with 3 lines there is a lot of extra space. I would like to set the height of those boxes based on the number of lines in the address with the most lines.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<style type = "text/css">
.addy_inner{
	
	float:left;

	width:46%;

	height:140px;

	padding:5px;

	border:1px solid #ccc;

	margin-top:5px;

	position: relative;
}

#addy_verif {
	
	float:left;

	padding-left: 15px;
	width:500px;

	height:auto;
	border:3px solid #ccc;

}

.buttonDiv{
	height:auto;
	position:absolute;
	bottom:0px;
	right:0px;
}
</style>
</head>

<body>
  <div  id="addy_verif" style="float:center">
  	<div class="addy_inner">
  		<div class="dialog-title">Original:</div>
  	  	<div class="dialog-text" style="word-wrap: break-word;"> company </div>
  	    	<div class="dialog-text" style="word-wrap: break-word;"> name </div>
   		<div class="dialog-text" style="word-wrap: break-word;"> address </div>
    		<div class="dialog-text"> city, state zip</div>
		<div class="buttonDiv">
    			<button type="button">Use This</button> 
		</div>
	</div>
  	<div class="addy_inner">
  		<div class="dialog-title">Suggested:</div>
	  	<div class="dialog-text" style="word-wrap: break-word;"> company</div>
  		<div class="dialog-text" style="word-wrap: break-word;"> name</div>
	  	<div class="dialog-text" style="word-wrap: break-word;"> address</div>
  		<div class="dialog-text" style="word-wrap: break-word;"> address2</div>
    		<div class="dialog-text"> city, state zip </div>
		<div class="buttonDiv"> 
			<button type="button">Use Recommended</button>
		</div>
	</div>
	<center><button type="button">Cancel!</button></center>     
  </div>
</body>
</html>