Layout clip inside div

Suite and Optimus Suite 5
#1

Dear all,

I am facing an issue regarding dhtmlxLayout clipping inside a div with specified border radius.
I have defined a div with the following css attributes:

#div_map
{
	position: relative;
	top:10%;
	left:5%;
	width: 90%;
	height: 80%;
    overflow: hidden;	 
	/*padding:35px;*/
	border:2px solid;
	border-color:#d1133f;
	-webkit-border-radius:25px;
	-moz-border-radius:25px;
	border-radius:25px;
	
	-webkit-background-clip: padding-box; 
  	-moz-background-clip:    padding; 
 	 background-clip:         padding-box;
}

I create a dhtmlxLayout and I attached a map:

        var obj = document.getElementById("div_map");
	var dhxLayout = new dhtmlXLayoutObject(obj, "1C");	
         dhxLayout.cells('a').hideHeader();
	var map = dhxLayout.cells('a').attachMap();

The layout appears well but it overflows the div element instead of clipping at the rounded edges. Only in Firefox appears as expected. In all other tested browsers (chrome, safari) the clipping fails.

Is there a css conflict or am I missing something…?

S.

#2

Hello
Layout will overwrite your border radius: it uses images. What skin do you ise?

#3

Hi, I use the default skin. In Firefox plays well but not in other browsers… Is there a way to fix this issue ?

#4

It is Chrome feature.
After adding map

var map = dhxLayout.cells('a').attachMap();

add the next line: dhxLayout.cells("a").vs[dhxLayout.cells("a").av].dhxcont.mainCont[dhxLayout.cells("a").av].firstChild.style.borderRadius = "25px";
It mast fix this issue