How to hide the particular tab header of goldenLayout

Question

myLayout.config.settings.hasHeaders = false;  

I am using this one, but this is hiding all tab headers. I need to hide particular tab header only? Please help me.

Answer 1

Since I have been playing with this for over a month now and am very committed at this point, I thought I would start to contribute to the golden-layout community tag.

https://github.com/deepstreamIO/golden-layout/blob/master/src/js/LayoutManager.js#L816

if( config.settings.hasHeaders === false ) {
            config.dimensions.headerHeight = 0;
        }

If you look at the line of code I reference above, this is how GL uses the setting. So what you could do is just set the headerheight of the specific item.

Also since this only touches the headerheight if thats equal to false, you can have it at true and pick and chose which ones you want to show headers for.

Hopefully this helps.

Answer 2

Use css, like this but you must check if it works fine for you (example in Sass):

.layout-no-header {
  > .lm_item {
    height: 100% !important;
    > .lm_header {
      height: 0 !important;
      overflow: hidden;
    }
    > .lm_items {
      height: 100% !important;
      > .lm_item_container {
        height: 100% !important;
        > .lm_content {
          height: 100% !important;
        }
      }
    }
  }
}

also to add css to an item in golden-layout, add something like this:

this.layout.on('itemCreated', function (item) {
  if (item.config.cssClass) {
    const classes = _.isArray(item.config.cssClass) ? item.config.cssClass : item.config.cssClass.split(' ');
    classes.forEach(c => {
      item.element.addClass(c);
    });
  }
});

and in your layout configuration, add

cssClass: 'layout-no-header'