的jQuery UI元素太大

這裏是有問題的網頁：http://bit.ly/m5cyjx 的jQuery UI元素太大

幾乎沒有存在的代碼或造型。看來，jQuery UI元素（在這種情況下 - 選擇菜單&按鈕）太大了。默認情況下，它們應該很小，並不比這句話的最大高度高很多。

我已經從他們的網站直接採用了jQuery UI CSS，並且我也從該項目創建者的網站上採用了jQuery選擇菜單CSS。即使使用默認代碼，問題也沒有改變。

任何幫助？

編輯此外，選擇菜單右側沒有箭頭，因爲應該默認設置。看看該項目網頁：http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/

來源

2011-06-13 AKor

是什麼瀏覽器您使用？在Firefox 4中，我看起來很好。 – 2011-06-13 17:02:46

您應該添加一個CSS重置，以便大小不依賴於瀏覽器默認值（尤其是因爲jQuery UI樣式表使用「em」） – kei 2011-06-13 17:10:07

您可以通過分析輕鬆解決大部分問題顯示Firebug（在Mozilla Firefox中）或開發者工具（在Google Chrome中）。這是你當前的樣式+自定義jQuery UI樣式+缺少所需圖像等的組合。 – Tadeck 2011-06-13 17:44:49

這是因爲以下樣式（style.css中，線＃10）：

#main { 
    margin-top: 25px; 
    text-align: center; 
    font-size: 25px; 
}

你必須在字體非常大大小#main，並且因爲jQuery UI正確地繼承了其他樣式，所以按鈕也很大。

更改上面的代碼爲以下，它會更好看（至少按鈕）：

#main { 
    margin-top: 25px; 
    text-align: center; 
    font-size: 10px; 
}

來源

2011-06-13 17:06:49 Tadeck

我嘗試過這樣做，但它從來沒有接近這個樣子：http://jqueryui.com/demos/button/我甚至試着拿出我的所有樣式表，它仍然看起來不像這個例子。 – AKor 2011-06-13 17:15:49

@Sennheiser使用Firebug（在Firefox中）或開發者工具（在Google Chrome中）來檢查哪些樣式應用於按鈕並以這種方式調查問題。按鈕大小的問題可以通過我上面提供的修復方法輕鬆解決。如果您還有其他問題，請告訴我。 – Tadeck 2011-06-13 17:26:45

Tadeck - 我的問題是，即使沒有任何自定義樣式，按鈕的顯示方式與jQuery UI網站上的按鈕顯示的方式大不相同。 – AKor 2011-06-13 17:28:26

兩個CSS規則控制大小jQuery的ui.css的

線424

input.ui-button { 
    padding: .4em 1em; 
}

和jQuery-ui.css

的59號線

.ui-widget { 
    font-family: Segoe UI, Arial, sans-serif; 
    font-size: 1.1em; 
}

調整填充和字體大小，直到它看起來看起來如何。

來源

2011-06-13 17:06:14

刪除ui-widget類。

我認爲模式是

<div class="ui-widget"> 
    <div class="ui-widget-header"> 
    </div> 

    <div class="ui-widget-content"> 
    //your button could go here 
     <div class="ui-button">click me</div> 
    </div> 
</div>

來源

2011-06-13 17:06:46 orolo

我發現在那裏UI頁面，他們有這樣的CSS代碼：

體{ 字體大小：62.5％; }

因此它們會嚴重縮小它們的字體大小。把它放在你的頁面上可以解決這個問題，它爲我工作。

來源

2011-07-01 02:34:29 steve

大多數ThemeRoller主題都這樣做，可以進行轉換：'1em = 10px' https ：//forum.jquery.com/topic/adjust-button-size#14737000000744502 – m33lky 2012-04-25 03:36:11

是的。我不明白爲什麼這是JQuery UI中的默認值。我不認爲任何人想要大的按鈕。

下面是我如何解決它。將此添加到html文件的<頭部>。

<style type="text/css"> 
    /* make default button size sane */ 
    .ui-button-text { 
     font-size: .6em; 
    } 
</style>

來源

2011-09-30 00:47:11 TrophyGeek

絕對是最簡單的解決方案。完美的作品！ – olofom 2012-04-26 11:58:31

太謝謝了！ – MirlvsMaximvs 2015-12-04 13:18:49

我剛好碰到這個絆倒，但試試你打開HTML標記之前添加DOCTYPE HTML到您的文檔

<!DOCTYPE html> 
<html> 
    <body> 
    </body> 
</html>

。

來源

2012-10-03 13:44:07 Michael

@Tadeck我有一個類似的問題，並改變字體大小做了伎倆:)謝謝！

此外，在我閱讀本文之前，我試圖查看是否更改內部內容的字體大小的工作，但由於我下面描述的原因沒有。（所以不要做什麼我做！= P）

腳本調用jQuery的標籤功能，使標籤

$(function() { 
    $("#tabs").tabs(); 
});

標記腳本需要建立標籤

<div id="content-wrapper"> 
    <div id="tabs"> 
    <ul> 
     <li><a href="#tabs-main">Dashboard</a></li> 
     <li><a href="#tabs-stuff"> Other Stuff </a></li> 
    </ul> 
    <div id="tabs-main"> 
     <!-- where i put unformatted content, like headers and description paragraphs --> 
     <div> formatted inner content here (for graphs/visual content/tables/etc) </div> 
    </div> 
    <div id="tabs-stuff"> 
     <!-- where i put unformatted content, like headers and description paragraphs --> 
     <div> formatted inner content here (for graphs/visual content/tables/etc) </div> 
    </div> 
</div> 
</div>

事實證明，設置每個標籤div內的div的樣式內聯不會改變標籤的大小。我不得不改變從我滾動的jQuery UI主題生成的css文件中的.ui-widget類的字體大小。並且更改用戶界面的樣式表並不是必需的，因爲您可以在下載自定義主題之前爲jQuery主題滾輪在網站上設置字體大小。我只是忘了這麼做。我會把它記錄下來，直到我的一個更淒涼的時刻。

[編輯]這顯然不是一個UI按鈕，但類似的概念和問題適用

來源

2013-11-07 18:15:49

我是有這個問題..我的微調控件是醜陋的，巨大的，並在一個水平，而不是佈局垂直堆疊...

我得看我的主HTML文件（實際上是一個剃鬚刀MVC佈局文件），發現我需要包括/themes/base/jquery.ui.spinner.css

現在我的紡紗師看起來很棒！

來源

2014-03-14 16:40:22 bkwdesign

我嘗試了所有其他答案，但沒有一個似乎正常工作。有些人沒有改變任何東西，有些人有不良的副作用（比如縮小一切）。

這最後的伎倆：

.ui-widget 
 
{ 
 
\t font-size: 75%; 
 
}

來源

2015-11-28 20:42:22

的jQuery UI元素太大

回答

相關問題