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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    Regular Coder
    Join Date
    May 2005
    Posts
    262
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Div positioning issues with dynamic content

    Hello,

    I have a php loop that is building divs on the fly to hold email addresses and a delete icon. I am noticing that once I get a couple of long email addresses, the email addresses get pushed down off the BG of the main container div.

    What I want is as I am looping and building, if it is not going to fit, just take the email address and start a new line. Again this fails when they run out of room.

    Here how it should look all the time


    Here is the behavior that I need to fix


    Notice in the 2nd shot that the email addresses on the first line are pushed off the background.

    here is my php code
    Code:
     $i = 0;
     37          while( $row = $db->sql_fetchrow( $result ) )                                                                                    
     38             {     
     39             $EmailTo[ $i ]    = "<div class=\"emailto_container\">                                                                       
     40                                     <div class=\"emailto_delete\" onClick=\"get_cv_emailto( 'reg_emailto', 1, '".$row[ "EmailToFrom" ]."' );\">&nbsp;</div>
     41                                     <div class=\"emailto_emailaddress\">".$row[ "EmailToFrom" ]."</div>                                  
     42                                  </div>";                                                                                                
     43             $i++;                                                                                                                        
     44             }

    My CSS
    Code:
    351 /*styles for the email to addresses once added to compose message*/
    352 .emailto_container{
    353 background-color:#dee7f8;
    354 border:thin solid #a4bdec;
    355 height:20px;
    356 padding-right:3px;
    357 }
    358 
    359 
    360 .emailto_delete{
    361 float:left;
    362 background-image:url('images/emailto_delete.png');
    363 background-repeat:no-repeat;
    364 width:20px;
    365 cursor:pointer;
    366 }
    367 
    368 .emailto_emailaddress{
    369 padding-top:2px;
    370 font-size: 0.7em;
    371 float:right;
    372 padding-left:3px;
    373 padding-right:3px;
    374 }
    375 
    376 .emailto_tbl{
    377 border:thin solid #999;
    378 background-color:#EEE;
    379 width:600px;
    380 }
    in my template file where the html table I have this code
    Code:
    <?if( count( $EmailTo ) > 0 )
      2    {?>
      3    <table class="emailto_tbl">
      4       <tr>
      5          <td>
      6 
      7             <table cellspacing="0">
      8                <tr>
      9                   <td colspan=4>
     10                      <b><span class="lbl_black"><?=$lang[ "SendingTo" ];?></span></b>
     11                   </td>
     12                </tr>
     13                <tr>
     14                      <?
     15                      $j = 1;
     16                      for ( $i = 0; $i < count( $EmailTo ); $i++ )
     17                         {
     18                      ?>
     19                         <td>
     20                            <?=$EmailTo[ $i ];?>
     21                         </td>
     22 
     23                         <?
     24                         if ( $j % 4 == 0 )
     25                            {
     26                         ?>
     27                            </tr>
     28                            <tr valign="top">
     29                         <?
     30                            }
     31                         $j++;
     32                         }
     33                      ?>
     34 
     35                   
     36                </tr>
     37             </table>
     38 
     39          </td>
     40       </tr>
     41    </table>
     42 <?}?>
    ~
    We keep our template, language and php files separate FYI. Above should be enough so you can see what I am dealing with. Any help with this 'wrapping' issue would be greatly appreciated. This email list can be 1 address or a hundred so the solution need to be able to just dynamically grow.

    Thanks

  • #2
    Regular Coder mbaker's Avatar
    Join Date
    Jan 2010
    Location
    Burford, Oxfordshire, United Kingdom
    Posts
    249
    Thanks
    1
    Thanked 39 Times in 39 Posts
    My suggestion on how to deal with issues like this is to split the problem into parts.

    First: create an html file that exhibits the problems you are having.

    Second: fix the HTML and CSS so that your test html page displays in the way that you want.

    Third: if necessary, modify the PHP so that it produces your modified HTML.
    - Michael Baker - HTML Tags Guide - Reference and Tutorials
    - Like voting, validate early, validate often - W3C HTML Validator - W3C CSS Validator
    - Wot? me cynical? no, its just if you vote, er, validate early, you have more chance of validating often.

  • #3
    Regular Coder ahayzen's Avatar
    Join Date
    Jun 2009
    Posts
    110
    Thanks
    8
    Thanked 11 Times in 11 Posts
    I think it could be an overflow problem.
    Code:
    368 .emailto_emailaddress{
    369 padding-top:2px;
    370 font-size: 0.7em;
    371 float:right;
    372 padding-left:3px;
    373 padding-right:3px;
    374 }
    You need to set a max-width for this so

    Code:
    368 .emailto_emailaddress{
    369 padding-top:2px;
    370 font-size: 0.7em;
    371 float:right;
    372 padding-left:3px;
    373 padding-right:3px;
    374 max-width:xxxpx;
    375 }
    You could also put the overflow attribute in there as well.

    just try the different settings until you are happy:
    auto - display scroll bar
    visible - shows content without scroll bar
    hidden - doesn't show any content out side of the box
    Code:
    368 .emailto_emailaddress{
    369 padding-top:2px;
    370 font-size: 0.7em;
    371 float:right;
    372 padding-left:3px;
    373 padding-right:3px;
    374 max-width:xxxpx;
    375 overflow:hidden;
    376 }
    Andy

  • #4
    Regular Coder
    Join Date
    May 2005
    Posts
    262
    Thanks
    4
    Thanked 0 Times in 0 Posts
    thank you Andy I will give your suggestions a go! And thank you mbaker for your suggestion. Right now I think the issue is more or less my lack of CSS to know what to add or change to make this work, even in a test page.
    Last edited by tripwater; 05-26-2010 at 06:48 PM.

  • #5
    Regular Coder
    Join Date
    May 2005
    Posts
    262
    Thanks
    4
    Thanked 0 Times in 0 Posts
    ok here is what I have

    Code:
    .emailto_emailaddress{
    369 padding-top:2px;                                                                                                                 
    370 font-size: 0.7em;                                                                                                                
    371 float:right;   
    372 padding-left:3px;
    373 padding-right:3px;                                                                                                               
    374 max-width:100px;
    375 overflow:visible;
    376 }
    When I set max-width to 100px I get overlapping of email addresses and some email addresses that are longer in length go beyond their background see image


    Now if I take max-width up to say 150px then it goes back to my original problem of line wrapping. I need a solution that can handle many email addresses no matter what the length of the address. This is an email app inside a business project and they could be sending out to 100 people from an address book and the email addresses ( as you know ) can be any range of length. I want to keep the style behind containing the addresses but limit to 3-4 addresses in a row. I was hoping that the container div having a size on it would cause the email addresses to automatically line wrap once they got to the edge if not enough room and just keep going.

    Any more suggestions would rock! Thanks for the posts so far.

  • #6
    Regular Coder mbaker's Avatar
    Join Date
    Jan 2010
    Location
    Burford, Oxfordshire, United Kingdom
    Posts
    249
    Thanks
    1
    Thanked 39 Times in 39 Posts
    Have you tried setting overflow:hidden; ?

    This will effectively truncate any email addresses that are "too long".

    You could overcome this by also setting the title attribute to be equal to the email address. Then the user could hover over the email address to see the complete address.
    - Michael Baker - HTML Tags Guide - Reference and Tutorials
    - Like voting, validate early, validate often - W3C HTML Validator - W3C CSS Validator
    - Wot? me cynical? no, its just if you vote, er, validate early, you have more chance of validating often.

  • #7
    Regular Coder
    Join Date
    May 2005
    Posts
    262
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by mbaker View Post
    Have you tried setting overflow:hidden; ?

    This will effectively truncate any email addresses that are "too long".

    You could overcome this by also setting the title attribute to be equal to the email address. Then the user could hover over the email address to see the complete address.
    Thanks for the reply. That is definitely an option. I would however like to pull this off with the full visible email address much like you would see in gmail or your client. As a last resort I could do the above but still hoping for the solution that will show the entire addresses.

  • #8
    Regular Coder
    Join Date
    May 2005
    Posts
    262
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Hello, I hate to bump this but I still don't have a solution. I moved on to other things for the past month but now I am back to needing a solution for this. Again I hope to find a CSS guru that can give me a solution without truncating the email addresses.

    Thanks

  • #9
    Regular Coder mbaker's Avatar
    Join Date
    Jan 2010
    Location
    Burford, Oxfordshire, United Kingdom
    Posts
    249
    Thanks
    1
    Thanked 39 Times in 39 Posts
    While I often look at posted html and CSS to try to figure out problems people are having, I'm not prepared to look at PHP to interpret what html it will produce, so I can then figure out what the problem is.

    I strongly suggest that you post the generated html as well as the CSS that is exhibiting the problem you display in the second image of your original post. It should be simple to get the generated html using your browsers view source functionality.
    - Michael Baker - HTML Tags Guide - Reference and Tutorials
    - Like voting, validate early, validate often - W3C HTML Validator - W3C CSS Validator
    - Wot? me cynical? no, its just if you vote, er, validate early, you have more chance of validating often.

  • #10
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi I am new Here . I am facing same Problem in Div .

  • #11
    Regular Coder
    Join Date
    May 2005
    Posts
    262
    Thanks
    4
    Thanked 0 Times in 0 Posts
    ok while I fully understand the request for generated code, I am still simplifying to only what is relevant because our generated source goes for miles in this app.

    SO I replicated the issue, viewed source and grabbed the CSS code as well as the master table of the email TOs and all containing divs so you can see them.

    Here is the code without html, body head tags etc...again I just grabbed the relevant code, Thanks again for you replies.

    Code:
    /*styles for the email to addresses once added to compose message*/
    .emailto_container{
    background-color:#dee7f8;
    border:thin solid #a4bdec;
    height:20px;
    padding-right:3px;
    }
    
    
    .emailto_delete{
    float:left;
    background-image:url('images/emailto_delete.png');
    background-repeat:no-repeat;
    width:20px;
    cursor:pointer;
    }
    
    .emailto_emailaddress{
    padding-top:2px;
    font-size: 0.7em;
    float:right;
    padding-left:3px;
    padding-right:3px;
    /*max-width:100px;
    overflow:visible;*/
    }
    
    .emailto_tbl{
    border:thin solid #999;
    background-color:#EEE;
    width:600px;
    }
    /*******************************/
    /*styles for the email attachments*/
    .emailattach_container{
    background-color:#dee7f8;
    border:thin solid #a4bdec;
    height:20px;
    padding-right:3px;
    }
    
    
    
    
    
    
    
    
    
    			<!--region we load the existing email tos-->
    			<span id="reg_emailto">	<table class="emailto_tbl">
    		<tbody><tr>
    			<td>
    
    				<table cellspacing="0">
    					<tbody><tr>
    						<td colspan="4">
    							<b><span class="lbl_black">Sending To</span></b>
    						</td>
    					</tr>
    					<tr>
    															<td>
    									<div class="emailto_container">
    												<div onclick="get_cv_emailto( 'reg_emailto', 1, 'ghancock@nizex.com' );" class="emailto_delete">&nbsp;</div>
    												<div class="emailto_emailaddress">ghancock@nizex.com</div>
    											</div>								</td>
    
    																<td>
    									<div class="emailto_container">
    												<div onclick="get_cv_emailto( 'reg_emailto', 1, 'harryhenderson@gmail.com' );" class="emailto_delete">&nbsp;</div>
    												<div class="emailto_emailaddress">harryhenderson@gmail.com</div>
    											</div>								</td>
    
    																<td>
    									<div class="emailto_container">
    												<div onclick="get_cv_emailto( 'reg_emailto', 1, 'njacques@nizex.com' );" class="emailto_delete">&nbsp;</div>
    												<div class="emailto_emailaddress">njacques@nizex.com</div>
    											</div>								</td>
    
    																<td>
    									<div class="emailto_container">
    												<div onclick="get_cv_emailto( 'reg_emailto', 1, 'test12345@yahoo.com' );" class="emailto_delete">&nbsp;</div>
    												<div class="emailto_emailaddress">test12345@yahoo.com</div>
    											</div>								</td>
    
    																	</tr>
    									<tr valign="top">
    																<td>
    									<div class="emailto_container">
    												<div onclick="get_cv_emailto( 'reg_emailto', 1, 'test123@yahoo.com' );" class="emailto_delete">&nbsp;</div>
    												<div class="emailto_emailaddress">test123@yahoo.com</div>
    											</div>								</td>
    
    																<td>
    									<div class="emailto_container">
    												<div onclick="get_cv_emailto( 'reg_emailto', 1, 'thisisatest5476@yahoo.com' );" class="emailto_delete">&nbsp;</div>
    												<div class="emailto_emailaddress">thisisatest5476@yahoo.com</div>
    											</div>								</td>
    
    																<td>
    									<div class="emailto_container">
    												<div onclick="get_cv_emailto( 'reg_emailto', 1, 'timsmitherton@yahoo.com' );" class="emailto_delete">&nbsp;</div>
    												<div class="emailto_emailaddress">timsmitherton@yahoo.com</div>
    											</div>								</td>
    
    								
    						
    					</tr>
    				</tbody></table>
    
    			</td>
    		</tr>
    	</tbody></table>
    </span>
    			<!--region locate popup-->
    			<div class="reg_email_locateto" id="reg_to"></div>
    		</td>
    	</tr>
    </tbody></table>

  • #12
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    looks to me like you are putting each email address into its own <td>. Yes??

    why??

    I would try having one td for all email addresses and putting the output for each into a <li>. then, when each li is given the attribute, display:block the background will extend to the size required. And when the (horizontal), list becomes too long for the containg <td> they will move to the next line giving, I think, the display style that you want.

    Remember about semantic coding. a div is a container - I liken it to a lunch-box. What you are outputting is a list so it should be in <ul><li></li></ul> tags.

    now, knowing nothing about JS really, I would imagine it's something like this

    Code:
    <td>
    <ul class='email_to_container'>
    <li class="emailto_delete" onclick="get_cv_emailto( 'reg_emailto', 1, 'test12345@yahoo.com' );">test12345@yahoo.com</li>
    <li> another one here</li>
    <li>another one here</li>
    </ul>
    hth

    bazz
    Last edited by bazz; 07-12-2010 at 03:33 PM.
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #13
    Regular Coder
    Join Date
    May 2005
    Posts
    262
    Thanks
    4
    Thanked 0 Times in 0 Posts
    good point bazz. I will give that a try next!

  • #14
    Regular Coder mbaker's Avatar
    Join Date
    Jan 2010
    Location
    Burford, Oxfordshire, United Kingdom
    Posts
    249
    Thanks
    1
    Thanked 39 Times in 39 Posts
    Here is a modified version of your code that will produce the sort of effect that I think you are looking for. It uses bazz's suggestion of an unordered list instead of individual td's.

    In the following each list item has a minimum and maximum width. Perchance the address exceeds the maximum, overflow is set to hidden, but the full address is visible by hovering over the address.

    BTW 1: it would be better to do all of your layout using CSS instead of tables (unless you are displaying tabular data).

    BTW 2: your code has a table inside of a span. While both span and div are generalised containers, only div may contain block level elements such as tables.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
    <html lang='en'>
    <head>
    <meta http-equiv='Content-type' content='text/html;charset=UTF-8'>
    <title>Email Addresses</title>
    <style type="text/css">
    /*styles for the email to addresses once added to compose message*/
    ul.emailto_container{
    list-style-type:none;
    }
    li.emailto_container{
    background-color:#dee7f8;
    border:thin solid #a4bdec;
    height:20px;
    float:left;
    margin:0 3em 0.5em -2em;
    }
    
    
    .emailto_delete{
    float:left;
    background-image:url('images/emailto_delete.png');
    background-repeat:no-repeat;
    width:20px;
    cursor:pointer;
    border-right:thin solid #a4bdec;
    }
    
    .emailto_emailaddress{
    padding-top:2px;
    font-size: 0.7em;
    float:right;
    margin-top:2px;
    margin-bottom:2px;
    margin-left:2px;
    min-width:140px;
    max-width:500px;
    overflow:hidden;
    /*max-width:100px;
    overflow:visible;*/
    }
    
    .emailto_tbl{
    border:thin solid #999;
    background-color:#EEE;
    width:600px;
    }
    /*******************************/
    /*styles for the email attachments*/
    .emailattach_container{
    background-color:#dee7f8;
    border:thin solid #a4bdec;
    height:20px;
    padding-right:3px;
    }
    </style>
    </head>
    <body>
    <h1>Email Addresses</h1>
    <!--region we load the existing email tos-->
    <div id="reg_emailto">	<table class="emailto_tbl">
      <tbody><tr>
        <td>
    
          <table cellspacing="0">
            <tbody><tr>
              <td>
                <b><span class="lbl_black">Sending To</span></b>
              </td>
            </tr>
            <tr>
              <td>
                <ul class="emailto_container">
                <li class="emailto_container">
                  <div onclick="get_cv_emailto( 'reg_emailto', 1, 'ghancock@nizex.com' );" class="emailto_delete" title="delete ghancock@nizex.com">&nbsp;</div>
                  <div class="emailto_emailaddress" title="ghancock@nizex.com">ghancock@nizex.com</div>
                </li>
                <li class="emailto_container">
                  <div onclick="get_cv_emailto( 'reg_emailto', 1, 'harryhenderson@gmail.com' );" class="emailto_delete" title="delete harryhenderson@gmail.com">&nbsp;</div>
                  <div class="emailto_emailaddress" title="harryhenderson@gmail.com">harryhenderson@gmail.com</div>
                </li>
                <li class="emailto_container">
                  <div onclick="get_cv_emailto( 'reg_emailto', 1, 'njacques@nizex.com' );" class="emailto_delete" title="delete njacques@nizex.com">&nbsp;</div>
                  <div class="emailto_emailaddress" title="njacques@nizex.com">njacques@nizex.com</div>
                </li>
                <li class="emailto_container">
                  <div onclick="get_cv_emailto( 'reg_emailto', 1, 'test12345@yahoo.com' );" class="emailto_delete" title="delete test12345@yahoo.com">&nbsp;</div>
                  <div class="emailto_emailaddress" title="test12345@yahoo.com">test12345@yahoo.com</div>
                </li>
                <li class="emailto_container">
                  <div onclick="get_cv_emailto( 'reg_emailto', 1, 'test123@yahoo.com' );" class="emailto_delete" title="delete test123@yahoo.com">&nbsp;</div>
                  <div class="emailto_emailaddress" title="test123@yahoo.com">test123@yahoo.com</div>
                </li>
                <li class="emailto_container">
                  <div onclick="get_cv_emailto( 'reg_emailto', 1, 'thisisatest5476@yahoo.com' );" class="emailto_delete" title="delete thisisatest5476@yahoo.com">&nbsp;</div>
                  <div class="emailto_emailaddress" title="thisisatest5476@yahoo.com">thisisatest5476@yahoo.com</div>
                </li>
                <li class="emailto_container">
                  <div onclick="get_cv_emailto( 'reg_emailto', 1, 'timsmitherton@yahoo.com' );" class="emailto_delete" title="delete timsmitherton@yahoo.com">&nbsp;</div>
                  <div class="emailto_emailaddress" title="timsmitherton@yahoo.com">timsmitherton@yahoo.com</div>
                </li>
                <li class="emailto_container">
                  <div onclick="get_cv_emailto( 'reg_emailto', 1, ' ' );" class="emailto_delete" title="delete userwithnamethatisextreemleylongandboringandsooverthetopthatitisnotrealybeleivablebuthereitisanyway@ispwithareallyrealylongnamethatisalsounbeleivablebuthereitisanyway.info">&nbsp;</div>
                  <div class="emailto_emailaddress" title="userwithnamethatisextreemleylongandboringandsooverthetopthatitisnotrealybeleivablebuthereitisanyway@ispwithareallyrealylongnamethatisalsounbeleivablebuthereitisanyway.info">userwithnamethatisextreemleylongandboringandsooverthetopthatitisnotrealybeleivablebuthereitisanyway@ispwithareallyrealylongnamethatisalsounbeleivablebuthereitisanyway.info</div>
                </li>
                </ul>
              </td>
    
    
    
            </tr></tbody>
          </table>
    
        </td>
      </tr></tbody>
    </table></div>
    <!--region locate popup-->
    <div class="reg_email_locateto" id="reg_to"></div>
    </body>
    </html>
    - Michael Baker - HTML Tags Guide - Reference and Tutorials
    - Like voting, validate early, validate often - W3C HTML Validator - W3C CSS Validator
    - Wot? me cynical? no, its just if you vote, er, validate early, you have more chance of validating often.

  • Users who have thanked mbaker for this post:

    tripwater (07-27-2010)

  • #15
    Regular Coder
    Join Date
    May 2005
    Posts
    262
    Thanks
    4
    Thanked 0 Times in 0 Posts
    thank you for the replies. I got pulled off onto another project for a couple of days so it will be a couple of days before I can test this out and let you know.

    Thanks again for your time.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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