I try to change the tab height in Ext JS 4, to display more information inside it (with a carriage return).
This is what I tried to release:
This is what I tried to release:
To do this I have modified my CSS page as below:
app.css
.MainPanel .x-tab-bar-strip {
top: 40px !important; /* Default value is 20, we add 20 = 40 */
}
.MainPanel .x-tab-bar .x-tab-bar-body {
height: 43px !important; /* Default value is 23, we add 20 = 43 */
border: 0 !important; /* Overides the border that appears on resizing the grid */
}
.MainPanel .x-tab-bar .x-tab-bar-body .x-box-inner {
height: 41px !important; /* Default value is 21, we add 20 = 41 */
}
.MainPanel .x-tab-bar .x-tab-bar-body .x-box-inner .x-tab {
height: 41px !important; /* Default value is 21, we add 20 = 41 */
}
.MainPanel .x-tab-bar .x-tab-bar-body .x-box-inner .x-tab button {
height: 43px !important;
line-height: 43px !important;
}
.MainPanel .x-tab-center{
margin-top: -10px;
}
|
app.js
Ext.onReady(function(){
var t = {title: 'line1 <br /> line2'};
Ext.create("Ext.tab.Panel", {
renderTo: Ext.getBody(),
cls: "MainPanel",
items: [t, t, t, t, t]
});
});
|
No comments:
Post a Comment