2016-11-17 8 views
0

これはsemantic-ui cssのレンダリング動作に関するものです。 HTMLページ内のポストロードされたUIコントロールは、セマンティックUIでプリロードされたものとは異なるレンダリングされます

(index.htmlがそれを呼び出す)私はそうのようなpostloader持っている:このDOM要素のコンテンツを埋めるために起こっている

$(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); 
     } 
    }); 
}); 

を:

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

何が実際に生成されます:

<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> 

問題は、javascriptの読み込まれたコンテンツが全幅で表示されないことです行クラスから継承されます)。それは、意味のような言語では1列または2列だけです。 しかし、コンテンツを静的に(Javascript関数を使って生成されたのと同じDOM構造でハードコードされています)塗りつぶすと、完全に描画されます。 開発にはFFとChromeを使用します。

これまでのところ、純粋なCSSなので、動的に読み込まれる新しい要素は、静的要素とまったく同じように動作しませんか?

答えて

0

私の愚かな...

は、私はここでローダ機能のスクリプトを置く:私は代わりに、フッターにどこかにそれを置く場合

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

は、すべてがうまく動作するようです。 これは実際にはもう問題にはならないが、それはなぜですか?

関連する問題