同じ高さのuiブロックを持つjquery mobile ui-grid

Question

私は、3列のレイアウトのためにjquery mobileで組み込みのui-gridを使用しようとしています。

問題は、異なる高さのui-block内のui-barです。私は、3つの列のすべてが最高の列と同じ高さになるようにしたいと思います。

誰もがこの問題の簡単な解決法を知っていますか？ CSSだけで解決したいのですが、私はそれを管理しませんでした。 JSは本当にこの問題の唯一の解決策ですか？

JsFiddle： http://jsfiddle.net/zHbuC/466/

コード：

<div data-role="page" id="station" class="type-home"> 
    <div data-role="header"><h1>Header Page 1</h1></div> 

    <div data-role="content" data-theme="b"> 
     <div class="ui-grid-b" style="text-align:center"> 
      <div class="ui-block-a"> 
       <div class="ui-bar ui-bar-c">A</div> 
      </div> 
      <div class="ui-block-b"> 
       <div class="ui-bar ui-bar-c">B</div> 
      </div> 
      <div class="ui-block-c"> 
       <div class="ui-bar ui-bar-c"> 
        <p>B with alot of text</p> 
        <p>with lots of lines</p> 
        <p>another line</p> 
       </div> 
      </div> 
     </div> 
    </div> 

    <div data-role="footer"><h4>Footer</h4></div> 
</div> 

Answer 1

私の経験では唯一、 "信頼できる" soloutionは、簡単なjqueryの高さの比較を使用しています。それは数行しかかかりません。

var tallest = 0; 
$('.ui-grid-b > div').each(function() { 
    var thisHeight = $(this).height(); 
    if(thisHeight > tallest) { 
     tallest = thisHeight; 
    } 
}); 
$('.ui-grid-b .ui-bar').height(tallest); 

または関数としてそれを行う、あなたは一方でCSSをwan't場合は、ボックスモデルを使用してバギー/ unrelaible方法があるhttp://www.cssnewbie.com/equal-height-columns-with-jquery/

を参照してください。 参照：http://www.css3.info/introducing-the-flexible-box-layout-module/

その他のHTML/CSSハックがありますが、動作しますが「醜い」コードが生成されます。 参照：http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/

---

jQueryの例： http://jsfiddle.net/zHbuC/468/

と縮小さ例（内容は.ui-barに常にある場合にのみ動作します）

var tallest = 0; 
$('.ui-grid-b .ui-bar').each(function() { 
    if($(this).height() > tallest) {tallest = $(this).height();} 
}).height(tallest); 

Answer 2

私は同じissue--に走りました私のソリューションは、上記のものよりも少し一般的かもしれません - グリッドのいずれかで動作するはずです。

http://jsfiddle.net/zHbuC/816/

私はここにあなたがグリッドの内容を変更することができ、高さがサイズが変更されます私のjsFiddle

http://jsfiddle.net/48uce/

あるgrids--内のグリッドに問題がありました。ここで

は、それはやり過ぎのビットであるかもしれないthis--実現私のユーティリティクラスです：

var ekJqm = {}; 

ekJqm.utilities = { 
    fixGrids: function (container) { 
     $("[class^=ui-block-]").each(function() { 
      $(this).removeAttr("style"); 
      $(">div", this).removeAttr("style"); 
     }); 
     var fixBlocks = function (blocks) { 
      blocks = $(blocks); 
      var heights = []; 
      blocks.each(function() { 
       if ($.inArray($(this).height(), heights) == -1) 
        heights.push($(this).height()); 
      }); 
      if (heights.length == 1) 
       return; 
      var maxHeight = 0; 
      blocks.each(function() { 
       if ($(this).height() > maxHeight) 
        maxHeight = $(this).height(); 
      }); 
      blocks.each(function() { 
       $(this).height(maxHeight); 
       var adjust = $(">div", this).outerHeight() - $(">div", this).height(); 
       $(">div", this).height(maxHeight - adjust); 
      }); 
     }; 

     $("[class^=ui-grid-]", container).each(function() { 
      var maxHeight = 0; 
      var blocks = $(">[class^=ui-block-]", this); 
      var set = []; 
      var tempSet = []; 
      blocks.each(function (index) { 
       var _class = $(this).attr("class"); 
       if ($.inArray(_class, tempSet) >= 0) { 
        fixBlocks(set); 
        tempSet = []; 
        set = []; 
       } 
       set.push(this); 
       tempSet.push(_class); 
       if (index == blocks.length - 1) 
        fixBlocks(set); 
      }); 
     }); 
    } 
};