2012-03-02 33 views
1

私は単純なGWTアプリケーションに取り組んでいます。ラベルと入力ウィジェットがあり、その中になぜ120px幅のリストボックスが120px幅のテキストボックスよりも短いのですか?

は、私は、FlexTable持っている(例えば、リストボックス、テキストボックス、日付ピッカー...)このパターンで、:
LABEL INPUTラベル入力
LABEL INPUTラベル入力
とそういうわけで、2つの列の入力フィールドとその説明があります。 私はこれらの入力ウィジェットのそれぞれにsetwidth("120px")を強制していましたので、それらが(縦に)並んでいると思います。彼らはそうではありません!リストボックス要素はテキストボックスよりも短く、明白な理由はありません。
誰かが私を説明できますか?

+0

間違ったスレッド要素:) – user888284

答えて

1

は明白な理由でなければなりませんがありますが、私はまた、あなたのケースを試してみたが、私は、このような問題に直面していない、それはあなたがそこから何かを見つけることができます放火犯を使用してみてくださいあなたの側からする必要があります。ここにあなたが記述したコードがあります。setWidth("120px")以外のCSSスタイルは追加しませんでした。 enter image description here

+0

を私はあなたの提案に続き、firebuxで生成されたHTMLコードを視察し、ここにあります:<選択したクラス=「GWT-リストボックス」スタイル= "幅:120ピクセル; ">と ...そしてリストボックスは小さいです... – user888284

1

このリンクを使用すると、より理解しやすくなります。 fiddle here

120pxの幅のテキストボックスは120幅になり、境界線が追加され(1pxの両側)、余白(1pxのいずれかの側)も追加され、幅が124pxのテキストボックスになります。 リストボックスでは、境界線と詰め物を含む総幅は120になります。 幅は120pxのテキストボックスを使用し、各辺に1pxの境界線があり、各辺に1pxの境界線がある場合のキーですあなたの幅を116pxに設定する必要があります。しかし、選択を120pxにしておきます。

+0

ここに何かがあります。テキストボックスにパディングと枠線があり、リストボックスにはないことを示唆していますか?私はあなたの説明がうまくいくのを見ましたが、リストボックスの幅を125pxに変更しても(リスト1のテキストはテキストボックスよりも短くなります)このようなことをやってくつろげる方法:) – user888284

0

あなたは2つの異なるボックスモデルとレスリングしています。両方をbox-sizing:border-box(ベンダープレフィックスが必要な場合があります)に設定すると、一貫したレンダリングが表示されます。

こちらをご覧ください:http://paulirish.com/2012/box-sizing-border-box-ftw/

関連する問題