dhtmlxLayout attached <img> does not fully resize

Suite and Optimus Suite 5
#1

I’m having a sizing issue which occurs when switching back and forth from a maximized window in Chrome. The setup is this (don’t mind my angularjs $scope variables):

I have a dhtmlxLayoutObject declared as:

$scope.layout = new dhtmlXLayoutObject(document.body, "2U");

There is a div with an img inside of it attached by:

$scope.layout.cells("b").attachObject("layoutCellImage");

The CSS being applied to the imageContainer is:

height:auto; width:auto;

The CSS being applied to the tag is:

max-width:100%; max-height:100%; margin:auto; display:block;

The full HTML template is:

[code]




[/code]

This all works perfectly, except for one case – when I swap my browser off a maximized state, then back to a maximized state, the height which is determined no longer fills the layout cell.

For example, I am currently looking at my application where the cell(“b”)

element has a height of 473px, but the
attached inside of it only has a height of 348px after maximizing the browser window (and as a result, the inside of that also only has a height of 348px).

Any thoughts? I’ve tried a number of layout setSizes() and window.onresize calls to setSizes(), but I haven’t had any luck yet. I should also note that if I resize the layout objects by physically sliding the separator between them, the image resize is fixed.

#2

For reference, I have included a full bit of html code which can be used to see the issue (at least, on my end). Note that dhtmlx.css and dhtmlx.js are assumed to be in the same folder this html file is. Images used for the test are located online on wikimedia.org.

<!DOCTYPE html>
<html>
<head lang="en">

	<meta charset="utf-,8">
	<title>DHTMLXLayoutObject Test</title>

	<link rel="stylesheet" type="text/css" href="dhtmlx.css"></link>
	<script src="dhtmlx.js" type="application/javascript"></script>

	<style type="text/css">
		html, body {
			background-color:white;
			height:100%;
			width:100%;
			padding:0;
			margin:0px;
			overflow:hidden;
		}
		
		#imageContainer {
			height:auto;
			width:auto;
			background-color:yellow;
		}
		
		#imageContainer img {
			max-width:100%;
			max-height:100%;
			margin:auto;
			display:block;
		}

	
	</style>
	
</head>

<body onload="doOnLoad();">>

	<div id="layoutCellImage1">
		<div id="imageContainer">
			<img src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Tile_-_Google_Art_Project_(471020).jpg"></img>
		</div>
	</div>
	
	<div id="layoutCellImage2">
		<div id="imageContainer">
			<img src="http://upload.wikimedia.org/wikipedia/ca/9/92/2000px-Google_Chrome_2011_logo.png"></img>
		</div>
	</div>
	
	<script>
	
		function doOnLoad() {
		
			var layout = new dhtmlXLayoutObject(document.body, "2U");
			
			layout.cells("a").setText("Picture1");
			layout.cells("a").attachObject("layoutCellImage1");
			
			layout.cells("b").setText("Picture2");
			layout.cells("b").attachObject("layoutCellImage2");
		}
	
	</script>

</body>

</html>

To recreate the issue:

Open the HTML in Chrome
Maximize the browser window
Unmaximize the browser window (mine takes up about 50% of my screen when this is done)
Remaximize the window
To verify size issue, slightly move the slider in the grid to watch the image on the right expand greatly to fill the remaining space

I should also note that I did some extra testing in other browsers, and the issue occurs in Chrome, but not in Firefox or Internet Explorer. Strange.

#3

Hi

please provide completed demo including all corresponfing js/css files and some screenshots with explanation for current behaviour and awaited behaviour

#4

Hi Andrei,

I have compiled a completed demo, but as the demo makes use of images, it is too large to attach directly to the forum post (approximately 2.6MB for the code+images, and then approximately 3.4MB for the screenshots).

Is there method you prefer for sharing this content, so I may get the completed demo to you?

#5

hi

just send it to support@dhtmlx.com

#6

Will do, thanks!

#7

Just an update: I have found what appears to be either a fix or a workaround. Using “display: table-cell;” in the stylesheet causes the img resize to work as expected. See the following code for a simple (non-functional) example.

CSS:

.imageContainer {
    display: table-cell;
    width: auto;
    height: auto;
}

.imageContainer img {
    max-width:100%;
    max-height:100%;
}

HTML:

<div id="layoutCellImage">
	<div class="imageContainer">
		<img src="http://something.com/myimage.jpg" alt="...">
	</div>
</div>
#8

hi

thanks for demo
try to add the following style

#layoutCellImage1, #layoutCellImage2 { width: 100%; height: 100%; overflow: hidden; }

#9

Hi Andrei,

It’s still not working quite like I would expect. But I’m starting to think that maybe my expectations are incorrect, haha. I do have a solution that will work for me, though – Max-width:100%, height:auto, and overflow:hidden applied directly to the image as well as the CSS you suggested on the layout cell object gets me what I need.

Thanks for your help!