GoldenLayout hide/show component (again)

Question

I have an issue with showing/hiding a component similar to this question:

GoldenLayout, how to hide/show component?

My layout is as follows:

let config: Config = {
        settings: {
            showCloseIcon: false,
            showPopoutIcon: false
        },

        content: [
            {
                type: 'column',
                content: [
                    {
                        type: 'row',
                        height: 25,
                        content: [
                            {
                                title: 'A react component',
                                type: 'react-component',
                                component: 'searchContainer'
                            }
                        ],
                    },
                    {
                        type: 'row',
                        height: 75,
                        content: [
                            {
                                title: 'A react component',
                                type: 'react-component',
                                component: 'leftContainer'
                            },
                            {
                                title: 'Another react component',
                                type: 'react-component',
                                component: 'rightContainer'
                            }
                        ],
                    },
                ],
            }],
    };

I have a hideSearchBar and showSearchBar functions which look like this:

   function hideSearchBar() {
        let container: ContentItem = layout.root.contentItems[0];

        container.contentItems[1].config.height = 100;
        container.contentItems[1].contentItems[0].config.height = 100;
        container.contentItems[1].contentItems[1].config.height = 100;
        container.config.height = 0;
        container.contentItems[0].element.hide();
        layout.updateSize();
        //layout.updateSize($(window).width(), $(window).height());
    }

    function showSearchBar() {
        let container: ContentItem = layout.root.contentItems[0];

        container.contentItems[0].element.show();
        layout.updateSize();
    }

The showSearchBar works perfectly and shows both rows of the grid correctly.

The hideSearchBar hides the top row correctly but leaves the second row does not take up the whole screen. I have tried setting the config.height to 100 in various places but cannot get it to work - there is a gap the size of the top row at the bottom of the screen.

Any help much appreciated.

Answer 1

I solved this with a different layout config where search bar was initially set to 0:

let config: Config = {
            settings: {
                showCloseIcon: false,
                showPopoutIcon: false
            },

            content: [
                {
                    type: 'column',
                    content: [
                        {
                            type: 'row',
                            height: 0,
                            content: [
                                {
                                    title: 'A react component',
                                    type: 'react-component',
                                    component: LayoutComponent.SearchContainer
                                }
                            ],
                        },
                        {
                            type: 'row',
                            height: 100,
                            content: [
                                {
                                    title: 'A react component',
                                    type: 'react-component',
                                    component: LayoutComponent.WindowContainer
                                },
                                {
                                    title: 'Another react component',
                                    type: 'react-component',
                                    component: LayoutComponent.CollectionContainer
                                }
                            ],
                        },
                    ],
                }],
        };

showSearchBar looks like this:

function showSearchBar() {
        let container: ContentItem = layout.root.contentItems[0];

        if (searchRowHeight == 0) {
            container.contentItems[0].config.height = SEARCH_HEIGHT;
        }
        else {
            container.contentItems[0].config.height = searchRowHeight;
            container.contentItems[1].config.height = containerRowHeight;
        }
        container.contentItems[0].element.show();
        layout.updateSize();
    }

and hideSearchBar looks like this:

function hideSearchBar() {
        let container: ContentItem = layout.root.contentItems[0];

        container.contentItems[0].config.height = 0;
        container.contentItems[1].config.height = 100;
        container.contentItems[0].element.hide();
        layout.updateSize();
    }

In summary, the config made the searchBar hidden and when it was opened, heights were readjusted.

I use an event listener to check for height changes:

layout.on('stateChanged', () => {
        let updateConfig: Config = layout.toConfig();

        if (updateConfig.content[0].content[0].height != 0) {
            searchRowHeight = updateConfig.content[0].content[0].height;
            containerRowHeight = updateConfig.content[0].content[1].height;
        }

HTH

Answer 2

Extending @jmc42's answer. Pretty good work-around but once thing it doesn't do is hide the splitter when expanding on pane to 100% and the collapsing the other to 0%.

As a work-around, I thought of 2 choices:

1. When the pane gets hidden, get the adjacent element representing the splitter bar within the same div and hide it.

2. When the pane gets hidden, and you detect a resize, always re-apply the expand the top pane to 100% and the bottom pane to 0%.

I opted for option 2 as it was simpler to implement and what I have is:

if (updateConfig.content[0].content[0].height != 0) {
    searchRowHeight = updateConfig.content[0].content[0].height;
    containerRowHeight = updateConfig.content[0].content[1].height;
}
else {
    let container = gbl_Layout.root.contentItems[0].contentItems[0];
    container.contentItems[0].config.height = 100;
    container.contentItems[1].config.height = 0;
    layout.updateSize();
}

My 'if' statement condition is more complex that the one above as I'm performing other checks but that will give you the gist of it. Works pretty well for me.