Golden Layout: how to increase Header Tabs height

Question

I tried to implement GoldenLayout but it seems not possible to change height of Tabs placed inside heading of each window.

There is a CSS Class with a fixed height of 20px in original theme .lm_header but after this, height is set by JS directly as inline style .

I tried the following rule

.lm_header {
  height: 40px !important;
}

But it is a simple override of JS style and is not complete because of position of bottom pane (please see working example ).

Is there a standard method to change size of different elements?

Answer 1

For tab sizes, you need to set the dimensions.headerHeight property on the configuration object you pass to GoldenLayout, and adjust the stylesheet.

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;
 }

Bare Minimum: Updated Fiddle

Update

To make it all look nice, update the line-height for .lm_tab , change the height of .lm_close_tab , and change the top position for .lm_controls .

CSS:

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

.lm_close_tab {
  height: 35px !important;
}

.lm_controls {
  top:13px;
}

Updated Fiddle 2