Cell's CSS Property Not Applied After Layout Initialization

Suite and Optimus Suite 8
#1

Hello. Using the following resources:

I am attempting to instantiate a layout object with the following code:

    const layout = new dhx.Layout(document.body, {
        type: "space",
        rows: [
            { id: 'searchbar', height: 'content', css: 'dhx_layout-cell--bg_gray dhx_layout-cell--no-border_top dhx_layout-cell--no-border_bottom dhx_layout-cell--no-border_left dhx_layout-cell--no-border_right' },
            { id: "toolbar", height: "content" },
            {
                cols: [
                    { id: "sidebar", width: "240px", css: "dhx_widget--bg_gray" }, // Folders
                    { id: "list", width: "350px" }, // Email List
                    { id: "preview", width: "100%" } // Reading Pane
                ]
            }
        ]
    });

I am attempting to create a cell with id “searchbar” that has no borders by using css property “dhx_layout-cell–no-border_top” and the other associated properties. However, the borders remain on that cell. Any help would be great. Thanks in advance.

#2

Hello @xdjohnson,

Thank you for the detailed description of the issue.
dhx_layout-cell--no-border_top (and related no-border_* classes) are not built-in utility classes in Suite 9.3, so they won’t affect the cell.

Also, Layout borders are usually applied on inner elements (like .dhx_layout-cell-content), not only on the outer wrapper.
So the best approach would be to assign your own class and override borders yourself.

The CSS may look like follows:

<style>
    .searchbar-no-border,
    .searchbar-no-border .dhx_layout-cell-content,
    .searchbar-no-border .dhx_layout-cell-header {
    border: none !important;
    box-shadow: none !important;
    }
</style>

Here is an example:
https://snippet.dhtmlx.com/i9s786dt

Warm regards,