when the CSS styles are applied to the DOM?

Question

I use knockout to render a dynamic list, that has as CSS property width auto ( "width: auto") and I need to know when this CSS is applied. Is there is an event to capture when the CSS styles are applied to the DOM, or an event for the time when the DOM is ready to be visible?

 <div style: "width= auto">
  <!-- ko foreach: items -->
        <div class="list-item" data-bind="css: { active: !$parent.isActive() }">
            <a data-bind="text: Label"></a>
        </div>
  <!-- /ko -->
 </div>

thanks

I found an answer here: http://stackoverflow.com/questions/15875128/how-to-tell-when-a-dynamically-created-element-has-rendered?answertab=active#tab-top — taia, Aug 01 '16 at 12:22

user3297291 · Answer 1 · 2016-08-01T11:27:12.403

2

The style attribute (in which you should swap out the = and the : symbols) is applied during the first render and will be visible right away.

The css binding is applied when you call ko.applyBindings.

If you want to hide stuff until you've applied bindings, you could use a trick like:

<div class="hideUntilBind" data-bind="css: { 'hideUntilBind': false }"></div>

With css:

.hideUntilBind { display: none; }

edited Aug 01 '16 at 11:27

answered Aug 01 '16 at 11:16

user3297291

22,592
4
29
45

Hi, thanks for your help, I will think about it. My intention is to display something with CSS, but on depinding of the auto-width size. – taia Aug 01 '16 at 11:31

score 2 · Answer 2 · edited May 23 '17 at 10:28

Let me summarize the two already mentioned options, and add two other options as well:

Cloaking: @user3297291's option using a cloak-like trick.
Vanilla JS: A vanilla js solution OP mentioned in a comment to the question.
Fork css binding: Create a custom binding based on the built in css binding that allows for a callback after applying changes. The css binding is not that big / difficult, so creating a fork/spinoff seems okay to me.
Foreach / AfterRender: Using afterRender on the foreach you can link some code to rendering of individual elements, and adjust the DOM / CSS accordingly.

when the CSS styles are applied to the DOM?

2 Answers2