Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jun 2009
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Popup Formatting

    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!
    Attached Thumbnails Attached Thumbnails Popup Formatting-popup.png  

  • #2
    New Coder
    Join Date
    Jun 2009
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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>

  • #3
    New Coder
    Join Date
    Jun 2009
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •