 asked on
Wrapping dynamic text in a div
I'm working in DreamWeaver, I've created a dynamic database field - it woks just fine, except I can't get the text to wrap. Â I've tried giving it a width, no width, auto width - bascially every configuration within DreamWeaver. Â I need two columns. (Pulling from two different tables within the same database.) Â Here is the code: (CSS follows)
 <div class="divProc" id="OpSetup">
  <?php do { ?>
  <input <?php if (!(strcmp($row_rsOpSetup['
  Â
  <?php } while ($row_rsOpSetup = mysql_fetch_assoc($rsOpSet
 </div>
 <div class="divProc2" id="PostResin">
  <?php do { ?>
   <input <?php if (!(strcmp($row_rsPostResin
     Â
      <?php } while ($row_rsPostResin = mysql_fetch_assoc($rsPostR
 </div> Â
Â
Here is the CSS:
.divProc {
      width: auto;
      display: marker;
      white-space: pre;
      height: 1100px;
      float: left;
}
.divProc2 {
      width: auto;
      white-space: pre;
      display: list-item;
      height: 1100px;
}
Here is the page ; Â http://www.streamdent.com/PostResin.php
 <div class="divProc" id="OpSetup">
  <?php do { ?>
  <input <?php if (!(strcmp($row_rsOpSetup['
  Â
  <?php } while ($row_rsOpSetup = mysql_fetch_assoc($rsOpSet
 </div>
 <div class="divProc2" id="PostResin">
  <?php do { ?>
   <input <?php if (!(strcmp($row_rsPostResin
     Â
      <?php } while ($row_rsPostResin = mysql_fetch_assoc($rsPostR
 </div> Â
Â
Here is the CSS:
.divProc {
      width: auto;
      display: marker;
      white-space: pre;
      height: 1100px;
      float: left;
}
.divProc2 {
      width: auto;
      white-space: pre;
      display: list-item;
      height: 1100px;
}
Here is the page ; Â http://www.streamdent.com/PostResin.php
CSSAdobe Dreamweaver
Last Comment
Rouchie
ASKER
I don't understand what you mean by "like this?" Â Are you asking if that is the page? Â That is the source code of the page I'm referring to. Â Did you change anything?
copy and paste the code i posted into a html file and check the result.
For text to wrap then the container it is in MUST have a specific width set. Â The width of a DIV by default is to stretch to the maximum space available. Â You specify WIDTH:AUTO in your CSS, so the div's will stretch out to 100%.
If you can put a border on each DIV then post a screen grab of your result then we can assist further!
If you can put a border on each DIV then post a screen grab of your result then we can assist further!
Also, if the text you are showing is multi-line including line breaks, then you need to manually replace those line breaks with the HTML "<br/>" tag.
I'm not a PHP person but I think the logic is to replace \n  with <br/>
I'm not a PHP person but I think the logic is to replace \n  with <br/>
ASKER
Quincydude - didn't work. Â The test does not wrap, and the second column is shoved into the first.
Rouchie - when I give the DIV a width, I get a scroll bar at the bottom. Â I want the text to wrap to the next line. Â the info is being pulled from a database, so there are no breaks.
Rouchie - when I give the DIV a width, I get a scroll bar at the bottom. Â I want the text to wrap to the next line. Â the info is being pulled from a database, so there are no breaks.
Its hard to picture what's happening on your screen.
Try the following:
.divProc {
   width: auto;  <---  REMOVE THIS LINE
   display: marker;  <---  REMOVE THIS LINE
   white-space: pre;  <---  REMOVE THIS LINE
   height: 1100px;
   float: left;
   border:1px solid black;  <--- ADD THIS LINE
}
.divProc2 {
   width: auto;  <---  REMOVE THIS LINE
   white-space: pre;  <---  REMOVE THIS LINE
   display: list-item;  <---  REMOVE THIS LINE
   height: 1100px;
   border:1px solid black;  <--- ADD THIS LINE
}
Then post us a screen grab please.
Try the following:
.divProc {
   width: auto;  <---  REMOVE THIS LINE
   display: marker;  <---  REMOVE THIS LINE
   white-space: pre;  <---  REMOVE THIS LINE
   height: 1100px;
   float: left;
   border:1px solid black;  <--- ADD THIS LINE
}
.divProc2 {
   width: auto;  <---  REMOVE THIS LINE
   white-space: pre;  <---  REMOVE THIS LINE
   display: list-item;  <---  REMOVE THIS LINE
   height: 1100px;
   border:1px solid black;  <--- ADD THIS LINE
}
Then post us a screen grab please.
ASKER
Rouchie - thanks for your help. That doesn't work at all - everything comes in side-by-side. Â I've attached a screen shot.
If you'll go to http://www.streamdent.com/PostResin.php you'll see the original problem.  So far, "auto" has been the best solution.
tried.jpg
If you'll go to http://www.streamdent.com/PostResin.php you'll see the original problem.  So far, "auto" has been the best solution.
tried.jpg
The first immediate issue here is that Firefox displays this correctly as a vertical list, but IE shows a long list like your screen grab. Â Other sites have documented that IE struggles to render "pre" text. Â So, it may be that the browsers are struggling with your CSS. Â Firefox is excellent at correctly displaying, and given what I see on screen, I'm saying that you have serious problems with your CSS design overall.
We need to start from the beginning here, because you have dozens of CSS rules and it will take forever to find which one is causing the problem.
If you only need 2 columns of checkboxes then you just don't need all this CSS.
Please create a blank page with NO CSS. Â Add your page PHP code you write out the two lists, again with NO CSS, just line breaks please. Â Put each list inside its own DIV. Â Once we have then we can add some easy CSS to build it back up again.
We need to start from the beginning here, because you have dozens of CSS rules and it will take forever to find which one is causing the problem.
If you only need 2 columns of checkboxes then you just don't need all this CSS.
Please create a blank page with NO CSS. Â Add your page PHP code you write out the two lists, again with NO CSS, just line breaks please. Â Put each list inside its own DIV. Â Once we have then we can add some easy CSS to build it back up again.
ASKER
With this niche market, I can require users to install Firefox and had already planned to do so. Â I created a blank page, but cannot get it to pull the text from the database - I can figure that one out later.
So what I have is just two divs stacked on top of each other with the checkboxes one after the other. Â This is what I started with! Â (Only - the text did display.) Â
If you have a simpler CSS that works, I'm all ears. Â I thought mine was simple.
"Just line breaks please." - I don't know what you mean by this - I'm using a repeated region. Â (I don't have any line breaks.)
nocss.jpg
So what I have is just two divs stacked on top of each other with the checkboxes one after the other. Â This is what I started with! Â (Only - the text did display.) Â
If you have a simpler CSS that works, I'm all ears. Â I thought mine was simple.
"Just line breaks please." - I don't know what you mean by this - I'm using a repeated region. Â (I don't have any line breaks.)
nocss.jpg
Okay we'll need the text for each entry to be displayed please.
Then, can you please post the PHP code for the database loop (the one that displays the checkboxes and the text alongside it)?
Then, can you please post the PHP code for the database loop (the one that displays the checkboxes and the text alongside it)?
ASKER
<body> <div>
 <?php do { ?>
   <?php do { ?>
    <input <?php if (!(strcmp($row_rsOpSetup['
    <?php echo $row_rsOp['Description']; ?>
    <?php } while ($row_Recordset1 = mysql_fetch_assoc($Records
   <?php } while ($row_rsOp = mysql_fetch_assoc($rsOp));
 </div>
 <div>
<?php do { ?>
 <?php do { ?>
  <input <?php if (!(strcmp($row_rsPostResin
  <?php echo $row_rsPost['Description']
   <?php } while ($row_Recordset2 = mysql_fetch_assoc($Records
 <?php } while ($row_rsPost = mysql_fetch_assoc($rsPost)
 </div> Â
Â
</body>
again.jpg
 <?php do { ?>
   <?php do { ?>
    <input <?php if (!(strcmp($row_rsOpSetup['
    <?php echo $row_rsOp['Description']; ?>
    <?php } while ($row_Recordset1 = mysql_fetch_assoc($Records
   <?php } while ($row_rsOp = mysql_fetch_assoc($rsOp));
 </div>
 <div>
<?php do { ?>
 <?php do { ?>
  <input <?php if (!(strcmp($row_rsPostResin
  <?php echo $row_rsPost['Description']
   <?php } while ($row_Recordset2 = mysql_fetch_assoc($Records
 <?php } while ($row_rsPost = mysql_fetch_assoc($rsPost)
 </div> Â
Â
</body>
again.jpg
My example would work, just copy the whole thing (do not edit anything) and test.
Also, it's very simple for you to add a linebreak in your php code in every loop of fetching a row.
Also, it's very simple for you to add a linebreak in your php code in every loop of fetching a row.
>> it's very simple for you to add a linebreak in your php code in every loop of fetching a row.
Yes this is my next step. Â Again as I'm not a PHP person so if there's a better way then I'm all ears.
Anyway Debra11, where the following line occurs in your code (both times):
 <?php echo $row_rsOp['Description']; ?>
Can you add a line break directly after it:
 <?php echo $row_rsOp['Description']; ?><br/>
Hopefully you should then get two vertical lists, which I can provide some CSS for to make them appear side-by-side.
Yes this is my next step. Â Again as I'm not a PHP person so if there's a better way then I'm all ears.
Anyway Debra11, where the following line occurs in your code (both times):
 <?php echo $row_rsOp['Description']; ?>
Can you add a line break directly after it:
 <?php echo $row_rsOp['Description']; ?><br/>
Hopefully you should then get two vertical lists, which I can provide some CSS for to make them appear side-by-side.
ASKER
Rouchie - the break worked as you thought it would. Â I tried it in the other file - FYI - and it just added a line between entries, so I'm hoping your new CSS will work.
next.jpg
next.jpg
Okay put the div's inside an outer container div, then give them both unique class names that we can reference from CSS. Â Finally we need a div at the very end to terminate the columns. Â See code snippet.
Then add a stylesheet file containing this information:
div.container {border:1px solid red;}
div.leftcol {border:1px solid blue; float:left; width:45%;}
div.rightcol {border:1px solid green; float:right; width:45%;}
div.clear {clear:both; height:0; overflow:hidden;}
As I can't run PHP on my machine, it might need tinkering with, so please post another screen grab with your requirements if it doesn't work out just right at the moment. :-)
Then add a stylesheet file containing this information:
div.container {border:1px solid red;}
div.leftcol {border:1px solid blue; float:left; width:45%;}
div.rightcol {border:1px solid green; float:right; width:45%;}
div.clear {clear:both; height:0; overflow:hidden;}
As I can't run PHP on my machine, it might need tinkering with, so please post another screen grab with your requirements if it doesn't work out just right at the moment. :-)
<body>
<div class="container">
<div class="leftcol">
<?php do { ?>
<?php do { ?>
<input <?php if (!(strcmp($row_rsOpSetup['Complete'],"Yes"))) {echo "checked=\"checked\"";} ?> type="checkbox" name="checkbox" id="checkbox">
<?php echo $row_rsOp['Description']; ?><br/>
<?php } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?>
<?php } while ($row_rsOp = mysql_fetch_assoc($rsOp)); ?>
</div>
<div class="rightcol">
<?php do { ?>
<?php do { ?>
<input <?php if (!(strcmp($row_rsPostResin['Complete'],"Yes"))) {echo "checked=\"checked\"";} ?> name="CheckboxResin" type="checkbox" value="">
<?php echo $row_rsPost['Description']; ?><br/>
<?php } while ($row_Recordset2 = mysql_fetch_assoc($Recordset2)); ?>
<?php } while ($row_rsPost = mysql_fetch_assoc($rsPost)); ?>
</div>
<div class="clear"> </div>
</div>
</body>
ASKER
Rouchie - very, very, very, very close! Â Your idea DID work - is there any way to make the wrapped line indent (just line up with the line above it)? Â You'll see what I mean.
yay.jpg
yay.jpg
Ahh well, that is the really tricky part. Â By design things are working correctly, so, to make the text indent then we have to further break things down.
I'm quite sure it could be done, but it depends how complex you want to get. Â Let me have an experiment and let you know...!
I'm quite sure it could be done, but it depends how complex you want to get. Â Let me have an experiment and let you know...!
ASKER
Thanks, Rouchie! Â This is what I've come up with so far:
<div class="container">
 <div class="leftcol">
  <?php do { ?>
  <input <?php if (!(strcmp($row_rsOpSetup['
  <?php } while ($row_rsOpSetup = mysql_fetch_assoc($rsOpSet
</div>
<div class="rightcol">
  <?php do { ?>
   <input <?php if (!(strcmp($row_rsPostResin
      <?php } while ($row_rsPostResin = mysql_fetch_assoc($rsPostR
  </div>
 <div class="clear"> </div>
 </div> Â
Â
almost.jpg
<div class="container">
 <div class="leftcol">
  <?php do { ?>
  <input <?php if (!(strcmp($row_rsOpSetup['
  <?php } while ($row_rsOpSetup = mysql_fetch_assoc($rsOpSet
</div>
<div class="rightcol">
  <?php do { ?>
   <input <?php if (!(strcmp($row_rsPostResin
      <?php } while ($row_rsPostResin = mysql_fetch_assoc($rsPostR
  </div>
 <div class="clear"> </div>
 </div> Â
Â
almost.jpg
Okay I've got it to work using HTML only. Â Here's the code so you know it works.
div.container {border:1px solid red;}
div.leftcol {border:1px solid blue; float:left; width:45%;}
div.rightcol {border:1px solid green; float:right; width:45%;}
div.leftcol div.left, div.rightcol div.left {padding:0; width:5%; margin-right:1%; float:left; clear:left; border:1px dashed gray;}
div.leftcol div.right, div.rightcol div.right {padding:0; width:85%; float:left; border:1px dashed blue;}
div.clear {clear:both; height:0; overflow:hidden;}
div.container {border:1px solid red;}
div.leftcol {border:1px solid blue; float:left; width:45%;}
div.rightcol {border:1px solid green; float:right; width:45%;}
div.leftcol div.left, div.rightcol div.left {padding:0; width:5%; margin-right:1%; float:left; clear:left; border:1px dashed gray;}
div.leftcol div.right, div.rightcol div.right {padding:0; width:85%; float:left; border:1px dashed blue;}
div.clear {clear:both; height:0; overflow:hidden;}
<div class="container">
<div class="leftcol">
<div class="left">
<input type="checkbox" value="" />
</div>
<div class="right">
Description goes here
</div>
<div class="left">
<input type="checkbox" value="" />
</div>
<div class="right">
Description goes here Description goes here Description goes here Description goes here Description goes here Description goes here
</div>
</div>
<div class="rightcol">
<div class="left">
<input type="checkbox" value="" />
</div>
<div class="right">
Description goes here
</div>
<div class="left">
<input type="checkbox" value="" />
</div>
<div class="right">
Description goes here Description goes here Description goes here Description goes here Description goes here Description goes here
</div>
</div>
</div>
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
That did it, Rouchie! Â Thanks so much - I really appreciate your help. Â I can take it from here and I might be back, but for now I'm marking this issued "resolved." Thanks for working so hard on this. Â With the way you laid things out, both with posting the code and the CSS, I was able to see what you did and understand why you did it. Â Have an awesome weekend!
Got-it.jpg
Got-it.jpg
ASKER
This worked - and I can see why - thank you!
Thanks very much for your kind feedback. Â You're most welcome!
Have a nice weekend yourself :-)
Have a nice weekend yourself :-)
On a side note, if you want to push the text downwards slightly so that it lines up with the checkboxes (which have a margin to push them downwards by default), just add some padding to the top of the right (description) css:
div.leftcol div.right, div.rightcol div.right {padding:5px 0 0 0; width:85%; float:left; border:1px dashed blue;}
div.leftcol div.right, div.rightcol div.right {padding:5px 0 0 0; width:85%; float:left; border:1px dashed blue;}
Open in new window