Postloaded ui controls are rendered different than preloaded ones in semantic-ui

Question

this is about rendering behaviour of semantic-ui css.

Within an HTML page (call it index.html) I have a postloader like so:

$(document).ready(function(){
    $("#content").load("/not-here.php", function (response, status, xhr) {
        if (status == "error") {
            var html = "<div class=\"ui large message\">" +
                       "<h1 class=\"ui huge header\">Error " + xhr.status  + " " + xhr.statusText + "</h1>" +
                       "<p>Unfortunately an error happened. We're sorry for that.</p>" +
                       "<a href=\"\" class=\"ui blue button\">View navbar docs &raquo;</a></div></div>";
            $("#content").html(html);
        }
    });
});

That is going to fill the content of this DOM element:

<div class="row">
   <div id="content" class="column padding-reset"></div>
</div>

What it actually produces is:

<div class="row">
   <div id="content" class="column padding-reset">
      <div class="ui large message">
         <h1 class="ui huge header">Error 404 Not Found</h1>
         <p>Unfortunately an error happened. We're sorry for that.</p>
         <a href="" class="ui blue button">View navbar docs »</a>
      </div>
   </div>
</div>

The problem is, that the javascript loaded content is not rendered with full width (inherited from row class). It is only one or two columns wide in semantic like language. But if I fill the content statically (hardcoded with the same DOM structure as it is produced via Javascript function) it is rendered with the full with. I use FF and Chrome for developement.

Because it is pure CSS so far, shouldn't new dynamically loaded elements behave exactly the same as static ones?

score 0 · Answer 1 · answered Nov 17 '16 at 11:17

stupid me...

I placed the script for the loader function here:

<div class="row">
   <div id="content" class="column padding-reset"></div>
   <script type="text/javascript">...</script> <!-- not a good choice -->
</div>

If I place it somewhere in the footer instead, everything seems to work just fine. Knowing this it is actually no problem anymore but why is it?

Postloaded ui controls are rendered different than preloaded ones in semantic-ui

1 Answers1