Win a copy of Mesos in Action this week in the Cloud/Virtualizaton forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Using DOM to create objects, but the styles aren't working?

 
Aaron Wilt
Ranch Hand
Posts: 49
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi all,

I'm having an odd problem. I'm using document.createElement() to create dynamic rows and columns and sticking them in a table I've created. The problem occurs when I try to set a style on the row...nothing happens? Ideas?



The odd part is I've tried changing be bolded line to use row.style.borderColor
row.style.borderWidth
row.style.borderStyle etc but it still doesn't work.

When I use the script debugger, I can reference these above lines in the immediate window and the values ARE being set correctly, but when the page is displayed the borders do not display. So weird.

Any ideas?

Thanks!

Aaron
 
Gregg Bolinger
GenRocket Founder
Ranch Hand
Posts: 15302
6
Chrome IntelliJ IDE Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Try putting the styles in a stylesheet and applying that stylesheet through the className function.

row.className = "someRowStyle";
 
Aaron Wilt
Ranch Hand
Posts: 49
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi Gregg,

Thanks so much for the reply. Unfortunately your suggestion didn't work. I'm very puzzled here.



Aaron
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
this is not valid,

row.style.border = "border-width: 1px; border-color: #8EB5AF;border-style: solid";

Lets look at it in a variable aspect and not with CSS

you are saying

in reality you want

so you have two options first, break it out like I did the variables: (words with dashes become camel case for setting the property with JavaScript)

Second option: Border does allow you to define all the properties in one line, you do not specify what it means, it is smart enough in the backend to figure it out.

Hopefully I shed some light on this matter

Eric
 
Aaron Wilt
Ranch Hand
Posts: 49
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Eric,

Thanks for the reply. You are correct, in my haste I combined the two syntax into one which made the code invalid. I've changed the code to break it out...



Unfortunately it's the same scoop... the row styles are still not being displayed?

Thanks again for everyone's time and thoughts on this one.

Aaron
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Looks like you have to apply it at the cell level...

Here is another way of doing it:



Eric
 
Aaron Wilt
Ranch Hand
Posts: 49
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Eric,

Thank you so much. Putting the styles on the <td> level worked! You're a life saver.

Seems odd that they decided to implement it that way...

Thanks again to everyone that replied,

Aaron
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic