WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



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

Reply
  Thread Tools Display Modes
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
Old 24th January 17, 08:23 PM   #2
bbsemail
WLC Member
 
Join Date: May 2012
Posts: 17
Default Re: Adding content with innerHTML breaks css

OK, if anybody is looking and hopefully they are, I got rearranging <li> to work:
http://hcca.org/MemberArea/sortable4a.php

Is there any way to make the <li> marker wider; when I add the 10th entry to an <ol> with only 9 entries before the add, the zero in 10 is truncated

I added back the Add a Document jQuery function I built. It appears to be adding <li>s and the nested divs therein, but when I submit the form the <input type "file" field named pic isn't getting passed. In other words, the array of form inputs named pic[] doesn't appear to get sent. Here's my add function: (A count() of other form fields is correct including the additions.)

function add() //--- add row/li to <ol> in #sortList / new doc entry line
{
tmp = "<li>\n";
tmp += "<div class='IdCol'><input type='text' name='id[]' readonly size='3' /></div>\n";
tmp += "<div class='CatCol'><input type='text' name='category[]' size='10' maxlength='15' /></div>\n";
tmp += "<div class='AxsCol'><select name='access[]' size='1'><option selected</option><option value='world'>World</option><option value='hcca'>Member</option><option value='board'>Board</option></select></div>\n";
tmp += "<div class='StatCol'><input type='text' name='stat[]' size='6' maxlength='6' /></div>\n";
tmp += "<div class='TitleCol'><textarea name='tit[]' cols='52' rows='2'></textarea></div>\n";
tmp += "<div class='DescripCol' style='float:left'><textarea name='txt[]' cols='75' rows='5'></textarea></div>\n";
tmp += "<div class='FileCol' style='float:left'><input type='file' name='pic[]' size='50' /><br />\n";
tmp += "</div>\n";
tmp += "</li>\n";
//alert(tmp)
$("#sortList").append(tmp);
}

Thanks for any help
bbsemail is offline   Reply With Quote
Old 5th November 17, 03:23 PM   #3
spikemeister
WLC Lover
 
spikemeister's Avatar
 
Join Date: Mar 2008
Location: Ireland
Posts: 54
Default Re: Adding content with innerHTML breaks css

If I understand correctly you want to align the numbers (bullets) so when the numbers change to two digit numbers the alignment doesn't change.

Example would be

Code:
li {list-style-position: outside;
    }
Try it with the list below
Code:
<ol>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
  <li>item 7</li>
  <li>item 8</li>
  <li>item 9</li>
  <li>item 10</li>
  <li>item 11</li>
  <li>item 12</li>
</ol>
Change the css to the following and you will see the difference

Code:
li {list-style-position: inside;
    }
spikemeister is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear 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 11:06 AM.



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.