Styles are not applied to dynamic elements? #197

Closed
emirotin opened this Issue Jan 26, 2012 · 5 comments

Comments

Projects
None yet
2 participants

I fealt from docs that when attached through HTC behavior, PIE should work with dynamically created elements. But I see it's not the case - I have the behavior defined, the CSS3 rules are not attached to the elements, but when I do it manually (through PIE.attach), they start working.

Owner

lojjic commented Jan 26, 2012

Please provide a test case. This does work for me and many other users so it's possible you are hitting an edge case.

OK, I will try to create a minimal test case, as currently it's quite loaded page

Well, got it, you can close the issue, but may be it would be interesting for you do know the reason of my problem.

I had the following setup:

  1. the page, HTML doesn't matter
  2. on load I do fetch some data and create multiple nodes of form
<div class="container"><button>xxx</button></div>
  1. when the user was doing some action I set data-x=1 attr on body
  2. in CSS i had
.container { display: none; }
body[data-x] .container { display: block; }
body[data-x] .container button { some CSS3 stuff here and PIE behavior }

So at the moment of creation the buttons didn't have neither CSS3 rules nor PIE attached
And when they really became visible PIE was ignoring them

So, I simply fixed by moving all buttons styling to the unconditional rule that's applied to them as soon as they're created, while container div remains invisible until data-x attribute is set.

Could you please check it with IE8?
Go to http://getoget.mirotin.net/club.html

There's a table in the middle
top 4 rows will look like the last cell is empty
What actually happens - there are buttons with white font color, gradient background and round corners.
They are invisible by default and shown for rows with specific classes

CSS attributes and PIE are applied with he common class. What is strange - if you go to http://getoget.mirotin.net/index.html there are buttons with the same class, and they work. Their visibility is also display:none by default, and changes when the attribute is set on the body element.

Owner

lojjic commented Mar 28, 2012

Looks like you're running into multiple possible issues:

  • The [data-x] change won't be picked up because PIE doesn't listen to changes on ancestor elements by default -- see the documentation for -pie-watch-ancestors if you want to force it to do that.
  • You've got a style "... td * {display:none;}" -- this is applying not only to your elements but also PIE's rendering elements.
  • Possibly a z-index issue, not sure

Anyway, none of these issues appear related to the original reason this ticket was opened, and should be handled as normal troubleshooting requests in the user forums: http://css3pie.com/forum rather than as a bug ticket. Closing.

lojjic closed this Mar 28, 2012

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment