Change cell style

Suite and Optimus Suite 5
#1

I want to add shadow-box to each cell of layout. This is what im doing

table.dhtmlxLayoutPolyContainer_dhx_skyblue td.dhtmlxLayoutSinglePoly div.dhxcont_global_content_area {
	        border: #eee 1px solid;
	
	        -moz-box-shadow: 0px 0px 10px;
            -webkit-box-shadow: 0px 0px 10px ; 
	        box-shadow: 0px 0px 10px ;
        }

However, the effect is not applied unless i manually reduce the size of div element with classname dhxcont_global_content_area by 10px (size of shadow box).

$('div.dhxcont_global_content_area').each(function() {
                $(this).width($(this).width() -10);
                $(this).height($(this).height() -10);  
});

This effect is disappeared if i make any change to the layout such as: insert tree, grid, or click on splitter,toolbar button… The cell’s size is set back to original size.

So how do change the style of each cell?

#2

Could you provide us completed demo to test it?
docs.dhtmlx.com/doku.php?id=othe … leted_demo

#3

You can find my demo in attachment. The layout is loaded with shadow-box on each cell. If you click on the splitter, the shadow-box disappears and the size of the box return to normal.

Thanks
testing.zip (186 KB)

#4

Layout cells are displayed without margins. Therefore, box-shadow is not applied. Unfortunately, we can not provide a solution for this, as layout was not designed for such a case.

It is only possible to set box-shadow for the parent container of layout. In your sample it could be as in:

#dhtmlx_layout{
-moz-box-shadow: 0px 0px 10px;
-webkit-box-shadow: 0px 0px 10px ;
box-shadow: 0px 0px 10px ;
}
html, body{ height: 100% }

Regarding your demo … You changed size of layout cells, and that can affect cells content. We do not recommend to use this approach - the size of inner components is calculated for original size.