...

View Full Version : Div positioning issues with dynamic content



tripwater
05-25-2010, 12:00 AM
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
http://farm4.static.flickr.com/3336/4636499489_35d7ccebdc_o.png

Here is the behavior that I need to fix
http://farm5.static.flickr.com/4013/4637108540_dd2124dd34_o.png

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

here is my php 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

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

<?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

mbaker
05-25-2010, 12:04 PM
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.

ahayzen
05-25-2010, 12:38 PM
I think it could be an overflow problem.


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



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


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

tripwater
05-26-2010, 05:57 PM
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.

tripwater
05-26-2010, 06:22 PM
ok here is what I have


.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
http://farm4.static.flickr.com/3348/4641762609_d669d4ea3c_o.png

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.

mbaker
05-26-2010, 08:08 PM
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.

tripwater
05-26-2010, 08:12 PM
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.

tripwater
07-09-2010, 05:50 PM
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

mbaker
07-10-2010, 01:29 AM
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.

bespy
07-10-2010, 08:06 AM
Hi I am new Here . I am facing same Problem in Div .

tripwater
07-12-2010, 03:11 PM
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.


/*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>

bazz
07-12-2010, 03:28 PM
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



<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

tripwater
07-12-2010, 03:42 PM
good point bazz. I will give that a try next!

mbaker
07-13-2010, 03:35 PM
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.


<!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>

tripwater
07-13-2010, 05:20 PM
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.

tripwater
07-27-2010, 06:32 PM
ok, I read over what you guys posted and made the suggested changes and it works perfect thank you all ( especially bazz and mbaker ) so much for your time.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum