WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > Adding content with innerHTML breaks css

 
  Thread Tools Display Modes
Prev Previous Post   Next Post Next
Old 22nd January 17, 06: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
 


Thread Tools
Display Modes
Threaded Mode Threaded Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 08:39 PM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.