View Single Post
Old 22nd January 17, 07:56 PM   #1
bbsemail
WLC Member
 
Join Date: May 2012
Posts: 17
Default Adding content with innerHTML breaks css

I'm building a document "library" of sorts for my antique car club. In the admin page, I want the admin to be able to reorder docs with drag & Drop. This works fine. However, when I load new / replace content in the <ol> I loose the ability to drag and drop and I also loose all formatting unless I embed the css directly in the returned html snippet.

I also want to display the numbers in the ol, but this code isn't working:
<ol id='sortList' style='list-style-type: decimal-leading-zero; margin: 0; padding: 0; float:left;'>

Yes, I have list-style-type turned off in an embedded style, but shouldn't declaring it inline turn it back on?

I loose all formatting/layout for the divs in each <li> unless I put the style declarations in the php back-end and right in the <ol>. Here's the php I'm using; why can't I just use the styles declared in <head> for this <ol>. And, even with this I don't get the <ol> decimal style for the marker
$tbl = "<style type='text/css'>
#sortList ol{ list-style-type: decimal-leading-zero; margin: 0;
padding: 0; width: 25%; float:left;}
#sortList li
{
margin: 0 3px 3px 3px; padding: 0.4em;
padding-left: 1.5em; font-size: 17px; height: 16px;
width:6500px;
white-space: nowrap;
clear:both;
}
.IdCol {width:50px;float:left;padding-right:15px}
.CatCol{width:95px;float:left;padding-right:15px}
.AxsCol{width:130px;float:left;padding-right:15px}
.StatCol{width:75px;float:left;padding-right:15px}
.TitleCol{width:460px;float:left;padding-right:15px}
.DescripCol{width:700px;float:left;padding-right:15px}
.FileCol{width:225px;float:left;padding-right:15px}
.DelCol{width:50px;float:left}
</style>
";

$tbl .= "<ol id='sortList' style='list-style-type: decimal-leading-zero; margin: 0; padding: 0; float:left;'>";
while($row = $docs->fetch(PDO::FETCH_ASSOC))
{
$tbl .= "<li id='".$row['id']."'>\n";
$tbl .= "<div class='IdCol'><input type='text' name='id[]' readonly value='".$row['id']."' size='3' style='text-align:right;' /></div>\n";
...
...

Here's my test page: http://hcca.org/MemberArea/docadmin3.php

Appreciate any help, I'm at a loss on this one. (Most JS like add, delete, save are disabled)
bbsemail is offline   Reply With Quote