html - jQueryMobile水平選択-最小幅

Question

各選択ボタンに最小幅または固定幅を与えるCSSを理解できません。デフォルトでは、幅はコンテンツに合わせて調整されますが、最小にしたいです。私はいくつかの行を持っており、選択が変更されてもそれらを整列させたままにしておきたいです。

jqm以外の選択ボックスについても同様の質問があり、解決策は単に幅属性を設定することですが、ここでは機能しません。

これがjsfiddleです：

http://jsfiddle.net/btppS/

Answer 1

ラベルの幅を変更する場合は、css内で次の行を変更する必要があります。

.ui-btn-text{
   width:300px; //example
}

代わりに、クリックしたときに選択を変更したい場合は、jqueryで次のコードを試すことができます。

$(document).ready(function() {
 $('#select-choice-month').css('width', '200px');//insert your width this is only for the month
});

Answer 2

$（document）.ready（..）がJQMobileの適切な場所ではない場合があります（Mark Dalgleishのこの優れたリンクを参照してください）。しかし、あなたの質問に答えるために、そして私が同様の問題を抱えているので、私は「pagebeforeshow」イベントを使用してそれを行いました。私の場合、「pagecreate」はイベントツリーで十分ではなかったからです。

だから私は次のように何かをしました：

$('div[data-role=page]').live('pagebeforeshow',function(){ 
    $('.ui-select .ui-btn-text').css({'width':'60px'});
});