CSS classes being lost from conditional rendering in Spring 14

Hi Glenn, It would probably be good to describe a little bit of how Conditional Rendering works here, to help analyze what’s going on. When a component stops meeting the conditions for it to be rendered, it is “un-rendered”. This means that the component’s DOM element is emptied out, and its style and class attributes are “mostly” removed so that it will no longer show up in the DOM. However, it’s actual element (usually a DIV) is NOT removed, it is just left there as a container. Our idea here (there may be bugs in its implementation as this is such a new feature…) is that the shell container should remain in the DOM such that it can still be programmatically manipulated, e.g. if a Table component has a Unique Id “MyTable”, you’d be able to get at it via $(‘#MyTable’) or skuid.component.getById(‘MyTable’) even if it is currently not rendered as far as Conditional Rendering is concerned. This would allow you to call the following methods, arbitrarily: // Get a reference to our table component var myTable = skuid.component.getById(‘MyTable’); // Force conditional rendering logic to be run on our table myTable.conditionallyRender(); // FORCE our table to be rendered. myTable.render(); If the component actually gets rendered, then it will be freshly, completely rebuilt — not just “shown”. So this means that, after a component is rendered, all appropriate CSS classes, style elements, and child contents should be applied to it. But while a component is “un-rendered”, just a shell of it will remain in the DOM, and this shell is not guaranteed to have all of its style properties or class attributes. SO, to your question… What you are seeing above appears to be correct to me. Are your tabs not showing up the way you would expect, or are certain CSS classes / style attributes not being re-applied once the tab is rendered again?

Hey Zach … I hear you. The design makes perfect sense to me. You sum up my Friday experience in your last paragraph: “Are your tabs not showing up the way you would expect” – On initial page load, they displayed fine. When the condition field was then set to a value that returns false to the condition, they rightly disappeared (and I could see the stripped out “shell” in the console). Then when the field was set to a value that returns true, the tabs reappeared, but with styling lost, and I could see in the console that attributes were missing. “… or are certain CSS classes / style attributes not being re-applied once the tab is rendered again” – That’s exactly right. because the attributes were no longer there, the styling was lost. However … testing again just now, I can’t recreate it! I’ve changed the tabset in the meantime, so that may have affected things. But in today’s testing, on re-render, all the expected attributes are being reapplied and the styling works. I’ll keep monitoring it and let you know what else I can find. Thanks for confirming that