web-dev-qa-db-ja.com

jQueryUIテーマが大きすぎます

JQuery-uiテーマをダウンロードするとき、デフォルトをjQuery-uiデモページと同じように表示するには、何を追加する必要がありますか？

私が箱から出して見ているダイアログは巨大です（以下を参照）。デモページからすべてのcssを利用できることは知っていますが、私は実際にはCSSの専門家ではなく、何を取り、何を残すかがわかりません。

enter image description here

[〜＃〜]編集[〜＃〜]

これが jsFiddle link 同じことを示しています。

[〜＃〜]編集[〜＃〜]

jqueryjquery-uijquery-ui-dialog
25
Adam Rackis

問題が何であるかわかります：P

body{font-size:10px;}

サイズはページを基準にしています（より流動的なレイアウト）。したがって、（少なくともフィドルでは）本文のフォントサイズを変更すると修正されます。ページのフォントサイズを変更するだけで、ダイアログもそれに合わせて変更されます。

http://jsfiddle.net/hnBmC/

27
Joseph Marikle

最良の方法は：ベースjQuery-uiのフォントサイズを変更する：

.ui-widget{font-size:12px;}

例については、 このフィドル を参照してください。

41
undefined

このダイアログヘッダーの問題については、以下の属性をダイアログの親クラスに追加するだけです。

.ui-dialog { clear: both; }

参考までに、 jQuery UIダイアログのタイトルバーが高すぎます

1
Soundar

お気に入りのWebページインスペクターでthemeroller.cssを見ると、次のことがわかります。-

#themeroller {
    font-size: 10px;
}
#themeroller button,
#themeroller input,
#themeroller select,
#themeroller textarea {
    font-size: 12px;
}

HTMLを少し掘り下げると、<div id="themeroller">がページの「デモ」領域全体を網羅していることがわかります。したがって、すべてのjquery-uiウィジェットがその中にあり、したがってこれらの値に相対的なフォントサイズを取ります。

私の「大きすぎる」ページを見ると、通常のテキストのフォントサイズは18pxです。これは、themes/ui-darkness /jquery-ui.cssの.ui-widgetにfont-size: 1emがあり、ブラウザの基本フォントサイズである16pxから計算されます。簡単なドキュメントを調べて、この基本サイズを見つけました。

<html><body>
<span style="font-size: 100%">here is some plain body text</span
</body></html>

したがって、jquery-uiウィジェットのフォントサイズを設定する方法の質問に対する答えは、囲んでいる要素のフォントサイズを設定することです。 <body>（ Joseph Marikle が推奨）はすべてにヒットすることが保証されていますが、ニーズに対して広すぎる可能性があります。その場合は、代わりに内部の<div>を使用する必要があります。 <span>は、ブロックレベルのものを非ブロックでラップするべきではないため、おそらく悪ですが、CSSスタイルポリスでそのアサーションを確認してください。私は単なるハッカーです！

デザイナーが高さをemではなくwidthであるexに基づいて選択した理由について私は怒鳴りました] _、これはheightです。ただし、ほとんどの場合、「l」の高さは「m」の幅とほぼ同じであるため、emを使用すると、より広い範囲のフォントでより一貫した結果が得られると思います。逆に、基本的な尺度として2exを使用した場合、「x」の高さと比較すると、非常に短いまたは非常に長いアセンダーとディセンダーのフォントで奇妙な高さが得られます。

1
kbro

このcssルールを使用して、より小さなフォントサイズを適用できます。

.ui-dialog{font-size: 62.5%;}

0
ARIJIT

jquery uiは、新規または既存のテーマを作成することで変更できるフレームワークです。

/*css which made title too large, reduce padding as you need*/
.ui-dialog .ui-dialog-titlebar {
    padding: 0.5em 1em 0.3em;
    position: relative;
}
0
cetver