0

Monaca/onsen UIを用いてアプリ開発をしております。
ajaxで動的にons-col/ons-rowをhtmlに追加し、その際、各ons-colにcss要素の追加もしておりますが、cssの適用がうまくいかずに立ち往生しております。
以下がコードになります。

html

<ons-navigator page="top.html" var="app.navi"></ons-navigator>
<ons-template id="top.html">
  <ons-page id="top-page">
    <ons-list-item modifier="chevron" class="item" id="list_up">
      <ons-row>
        <ons-col class="title">
          <header>
            <span class="item-title">リスト</span>
          </header>
        </ons-col>
      </ons-row>
    </ons-list-item>
   ・・・
  </ons-page>
</ons-template>

<ons-template id="list.html">
  <ons-page id="list-page">
    <ons-list>
      <ons-list-item>
        <div id="list"></div>
      </ons-list-item>
    </ons-list>
  </ons-page>
</ons-template>

script

(function(){
  'use strict';
  $(document).on('pageinit', '#top-page', function() {
    $('#list_up', this).on('click', function() {
      new_list();
      app.navi.pushPage('list.html');
    });
  });
})();

function new_list(){
  var data = {・・・}
  $.post("url", data).done(function(result){
   if (result.res == null){
     $('#list').text(該当ありません。);
   }
   else if (result.res == hit){
     var fd = document.createDocumentFragment();
     var list = document.getElementById('list');
     var onsrowNode = new Array();
     var onscolNode = new Array();
     var onscolNode2 = new Array();

     for (var i=0; i<result.count; i++){
       onsrowNode[i] = document.createElement('ons-row');
       onscolNode[i] = document.createElement('ons-col');
       onscolNode2[i] = document.createElement('ons-col');

       onscolNode[i].style.cssText = "width: 100px;";
       onscolNode2[i].style.cssText = "width: 100%;";

       onscolNode[i].innerText = "項目";
       onscolNode2[i].innerText = result.item;

       onsrowNode[i].appendChild(onscolNode[i]);
       onsrowNode[i].appendChild(onscolNode2[i]);
       df.appendChild(onsrowNode[i]);
     }
     list.appendChild(df);
     ons.compile(list);
   }
   else {
     ・・・
   }
 }).fail(function(){
  ・・・
 });
}

なお、こちらはうまくいきませんが、以下のように単純に下線を引くものであれば追加できました。
「onsrowNode[i].style.cssText = "border-bottom-style: dotted;";」
ons-colの幅の設定の仕方が誤っているのかと思いましたが、違うページではうまくcssが効いております。

修正すべき点をご教示頂ければ幸いです。
宜しくお願い申し上げます。

1 件の回答 1

0

.style.cssText='foo:bar'<hoge style="foo:bar"> というHTMLのような動きをするわけですが、 <ons-col> のstyle属性に書いたwidthプロパティは無視されてしまうようです。一方OnsenUIのマニュアルにも載っているwidth属性は動作します。

※質問通りの100px:100%ではページ幅を超えて折り返してしまったので、20%:80%に変えています

<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/css/onsenui.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/css/onsen-css-components.css" rel="stylesheet"/>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/js/onsenui.min.js"></script>
<script>ons.bootstrap();</script>

<ons-row>
  <ons-col style="width:20%;"> style="width:20%;" </ons-col>
  <ons-col style="width:80%"> style="width:80%" </ons-col>
</ons-row>
<ons-row>
  <ons-col width="20%"> width="20%;" </ons-col>
  <ons-col width="80%"> width="80%" </ons-col>
</ons-row>

もし上のサンプルの2段目のように <ons-col width="100%"> 相当のことをしたいのであれば、 .style.cssText="..." の代わりに .setAttribute('width', '100%') とします。

1
  • 早速ご回答いただきまして、ありがとうございます。 無事にcss適用できました。 大変助かりました。 また何かありましたらご教示頂ければ幸いです。 今後とも何卒宜しくお願い申し上げます。
    – orobianco
    Commented 2016年2月21日 7:47

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。