extjs - 在較小的按鈕上正確放置按鈕內的字體文本

在我的extjs項目中，我在網格標題內有一個菜單按鈕。我正在嘗試使字體適合按鈕的小區域。它看起來越大，我使文本越向下移動。我怎樣才能使它適合在按鈕內？extjs - 在較小的按鈕上正確放置按鈕內的字體文本

這裏是視圖

   xtype: 'grid', 
      itemId: 'detailsGridID', 
      bind: { 
       store: '{myDetailsStore}' 
      }, 
      header: { 
       items: [{ 
        xtype: 'button', 
        text: 'Trades', 
        width: 100, 
        height: 15, 
        cls: 'buttonTopdayCSS', 
        menu: [{ 
         text: 'Net', 
         handler: function() { 
          alert('click net'); 
         } 
        }, { 
         text: 'Topday', 
         handler: function() { 
          alert('click topday'); 
         } 
        }] 
       }]

這裏的CSS類

.buttonTopdayCSS { 
background-color: #a7cfdf; background-image: -webkit-gradient(linear, left top, left bottom, from(#a7cfdf), to(#23538a)); 
background-image: -webkit-linear-gradient(top, #a7cfdf, #23538a); 
background-image: -moz-linear-gradient(top, #a7cfdf, #23538a); 
background-image: -ms-linear-gradient(top, #a7cfdf, #23538a); 
background-image: -o-linear-gradient(top, #a7cfdf, #23538a); 
background-image: linear-gradient(to bottom, #a7cfdf, #23538a);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#a7cfdf, endColorstr=#23538a); 
} 

.buttonTopdayCSS .x-btn-inner { 
font-size: 10px !important; 
}

來源

2017-02-17 solarissf

你可以嘗試添加'padding：0; border：0;'to'.buttonTopdayCSS'。 – chrisuae

謝謝你...這工作！在CSS中添加填充和邊框 – solarissf

按鈕有scale configuration。我會試試這個。我會堅持重寫儘可能少的樣式。

scale: 'large'

如果這個特殊的風格是整個應用程序的要求而不是隻在這個地方，看看theming。

來源

2017-02-20 12:24:01

謝謝，我嘗試縮小規模，但仍然有點太大。出於好奇，爲什麼我應該有幾個覆蓋樣式？它會減慢速度嗎？ – solarissf

我不是不想重寫某些樣式。我的意思是，如果你想改變主題，你可以使用集成主題引擎。如果只是一個按鈕，這將不值得這樣麻煩。 Extjs主題是強大的，但很難實現你想要的。 –

好的，謝謝！ – solarissf

extjs - 在較小的按鈕上正確放置按鈕內的字體文本

回答

相關問題