Style "display: none"

Question

Created Jan ’16

Replies 2

Boosts 0

Views 2.9k

Participants 2

I want to hide a tvml element by setting the element attribute or style property. Is it possible to set "display" property of the tvml elements to "none" like we do in html and css. I have tried everything possible and nothing seem to hide the element. The reason I want to hide the element is because I need to render few empty elements without any default tvml styling applied to it, which I fill up programmatically depending upon some user interactions (like user adding something to favorite list). The current problem that I am facing is that those empty elements (shelf inside collectionList) are occupying some default space on the screen and if I render even two or three such empty shelfs before other shelfs, the empty spaces are clearly noticeable.

Any pointer or help is much appreciated. Thanks!

Answered by eMAD in 104930022

Thanks for your suggestion. I did not try with any random element as the tvmlcontroller throws exception at times when it identifies an invalid element entry inside it's template. As you said, I think this hidden element is somehow not recognized and completely ignored.

However a better alternative would be using <placeholder></placeholder> element and replace it with actual element at runtime using the dom api, parentNode.replaceChild. As per the the TVML language reference, placeholder element is not evaluated by the template controller, so it will not apply any native styles of the template. I'm using the same technique and its working alright.

Boost

Answer 1

maxf OP

Jan ’16

I ended up wrapping the element I want to hide in a

<hidden></hidden>

element. This is just an element the tvmlcontroller doesn't recognize and thus hides, you could call it whatever you want.

An alternative approach would be to remove the element from the DOM and keep a reference of it and its position somewhere and then reinsert it later.

0

Answer 2

eMAD OP

Jan ’16

Accepted Answer

Thanks for your suggestion. I did not try with any random element as the tvmlcontroller throws exception at times when it identifies an invalid element entry inside it's template. As you said, I think this hidden element is somehow not recognized and completely ignored.

However a better alternative would be using <placeholder></placeholder> element and replace it with actual element at runtime using the dom api, parentNode.replaceChild. As per the the TVML language reference, placeholder element is not evaluated by the template controller, so it will not apply any native styles of the template. I'm using the same technique and its working alright.

0