CODEWITHSUNDEEP
javascriptjquerypolymergolden-layout
Raviraj reddy
Raviraj reddy

Reputation: 179

How to hide the particular tab header of goldenLayout

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.

Upvotes: 1

Views: 1128

Answers (2)

Nacho
Nacho

Reputation: 81

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'

Upvotes: 1

Mark
Mark

Reputation: 927

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.

Upvotes: 1

Related Questions