黃金佈局：如何增加標題標籤高度

Question

我試圖實施GoldenLayout，但似乎無法更改放置在每個窗口標題內的標籤高度。

在原始主題.lm_header中有一個固定高度爲20px的CSS類，但在此之後，由JS直接設置高度爲內聯樣式。

我嘗試以下規則

.lm_header { 
    height: 40px !important; 
} 

但它的JS風格的簡單替代，是因爲底部窗格的位置不完全（請參閱working example）。

是否有標準方法更改不同元素的大小？

Answer 1

對於標籤的大小，你需要設置的configuration object傳遞給GoldenLayout，和調整樣式表dimensions.headerHeight財產。

JS：

var myLayout = new GoldenLayout({ 
    dimensions: { 
      headerHeight: 46 
     }, 
     content:[{ 
      type: 'row', 
      content:[{ 
       type: 'component', 
       componentName: 'test-component' 
      },{ 
       type: 'component', 
       componentName: 'test-component' 
      }] 
     }] 
    }); 

CSS：

.lm_tab { 
    height: 40px !important; 
} 

最低限度： Updated Fiddle

更新

，使這一切看起來不錯，更新line-height爲.lm_tab，更改height的.lm_close_tab，並更改top的位置.lm_controls。

CSS：

.lm_tab { 
    height: 40px !important; 
    line-height:40px; 
} 

.lm_close_tab { 
    height: 35px !important; 
} 

.lm_controls { 
    top:13px; 
} 

Updated Fiddle 2