Announcement

**ESherbakova** · 30 Aug 2011, 11:21

Hi Isomorphic,

we are having an issue in Firefox with that image canvas item again.

Now if the imageType is "normal" and we specify a big prompt, the height of the form item is rendered too big. And the height of the form item grows as the prompt gets longer.

This happens only first time. If you refresh the page, the height is rendered normal (I guess because it gets the image from cache).
Clear browser cache and refresh, and you will see that height is too big again.

Please see standalone sample attached.
(It uses ..\smartclientSDK\examples\components\images\greenlight.gif from your examples).

Note:
1) If I remove overflow: "visible" or use "stretch" image type it will work.
But we cannot remove them because we use those settings for dynamic images.
2) Without prompt it works fine.

Version: SmartClient_SC_SNAPSHOT-2011-08-16
Browser: Firefox 5 under Windows 7.

Code:

<HTML><HEAD>
	<SCRIPT>var isomorphicDir="../../isomorphic/";</SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_Core.js></SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_Containers.js></SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_Grids.js></SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_Forms.js></SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
	<SCRIPT SRC=../../isomorphic/skins/Enterprise/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR='papayawhip' MARGINHEIGHT=0 MARGINWIDTH=0 LEFTMARGIN=0 TOPMARGIN=0>


<!--------------------------
  Example code starts here
---------------------------->

<SCRIPT>
isc.ClassFactory.defineClass("CwImageItem", "CanvasItem");

isc.CwImageItem.addProperties({
    init:function () {
    	var canvasProperties = {
            	src:this.src,
            	width:this.width,
            	height:this.height,
            	form: this.form,
            	overflow: "visible",
            	imageType: this.imageType
            };

        this.canvas = isc.ImgButton.create(canvasProperties);

        var res = this.Super("init", arguments);
		this.prompt = null;
		return res;
    }
    
});


isc.HLayout.create({
    left:50,
    top:75,
    members: [

isc.DynamicForm.create({
    width: 1,
	height: 1,
    fields: [
        {name:"textFld", title:"Text", type:"text"},
		{name:"imageFld", _constructor: "CwImageItem", 
		src:"greenlight.gif", 
		width:7, height:7, 
		prompt:"Very big prompt. Very big prompt. Very big prompt.", 
		imageType:"normal", 
		showTitle: false},
        {name:"textFld2", title:"Text 3", type:"text"}
    ]
})
]});

</SCRIPT>
</BODY>
</HTML>

Attached Files

CwImgButton.html (1.7 KB, 85 views)

**Isomorphic** · 30 Aug 2011, 11:25

If you need to size to a dynamically loaded image, you need to either know the image dimension in advance and specify sizes accordingly, or if you want auto-sizing to work, ensure that the image has been loaded in advance of the component rendering it. For the latter approach, the FileLoader APIs can be used to accomplish pre-loading of images.

**ESherbakova** · 30 Aug 2011, 11:25

In this case width and height IS SET.

**ESherbakova** · 30 Aug 2011, 11:27

Or you are trying to say we cannot use "normal" image type or overflow: visible?

**ESherbakova** · 30 Aug 2011, 11:29

Once again, the problem is THE PROMPT, not image itself. Without prompt it works fine.

**Isomorphic** · 30 Aug 2011, 14:29

Same solution. The problem is that for the brief moment while the image is loading, the browser actually displays the prompt text, so we size to the prompt text. If you eliminate the loading delay by ensuring the image is already loaded, this problem goes away.

**ESherbakova** · 31 Aug 2011, 08:18

The problem is that we do not know the image URL in advance. That information is available only at the moment of creation of the "CwImageItem" object.
Preloading all images that potentially may be used as ImgButton source is not affordable.

So I tried to use FileLoader in init() method of the CwImageItem.
Actually I was having hard time to make it working at least somehow.
I was wrong saying that without prompt it works fine. It does not.

So once again, to clarify the conditions:

The following settings are used for the ImgButton:
imageType: "normal",
overflow: "visible",
width: 7, height:7;
src: an image that has dimensions 7x7.
browser: Firefox

Issue:
With this combination of settings the height (and width) of the ImgButton is not calculated properly in Firefox if the image is not loaded yet in browser at the moment of creation. It does not respect the width and height settings in this case at all.

If there is NO PROMPT specified, the width and height are 24x24 px (some default size I guess) and no way to make it smaller.
With the prompt size is growing to adjust the prompt text. And no way to avoid it.

So I tried different things and eventually ended up with the following ugly fix: set the "overflow:visible" only after the image is loaded in the "onload" function.

Code:

<HTML><HEAD>
	<SCRIPT>var isomorphicDir="../../isomorphic/";</SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_Core.js></SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_Containers.js></SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_Grids.js></SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_Forms.js></SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_FileLoader.js></SCRIPT>
	<SCRIPT SRC=../../isomorphic/skins/Enterprise/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR='papayawhip' MARGINHEIGHT=0 MARGINWIDTH=0 LEFTMARGIN=0 TOPMARGIN=0>


<!--------------------------
  Example code starts here
---------------------------->

<SCRIPT>
isc.ClassFactory.defineClass("CwImageItem", "CanvasItem");

isc.CwImageItem.addProperties({
    init:function () {
    	var canvasProperties = {
            	src:this.src,
            	width:this.width,
            	height:this.height,
            	form: this.form,
            	//overflow: "visible",
				showRollOver: this.showRollOver,
            	imageType: this.imageType
            };

			
		if ((this.imageType == null || this.imageType == "normal") && this.src != null) {
             this.canvas = isc.ImgButton.create(canvasProperties);
			 var formItem = this;
			 var imageURL = this.canvas.getImgURL(this.src);
  	         isc.FileLoader.cacheFiles(imageURL, function() {
			   formItem.canvas.setProperty("overflow", "visible");
			   formItem.canvas.markForRedraw();
			   formItem.form.markForRedraw();
			 }, "image");
		}
		else {
		    canvasProperties.overflow = "visible";
            this.canvas = isc.ImgButton.create(canvasProperties);
		}
        var res = this.Super("init", arguments);
		return res;
    }
    
});


isc.HLayout.create({
    left:50,
    top:75,
    members: [

isc.DynamicForm.create({
    width: 1,
	height: 1,
    fields: [
        {name:"textFld", title:"Text", type:"text"},
		{name:"imageFld", _constructor: "CwImageItem", title: "Image",
		src:"greenlight.gif", 
		width:7, height:7, 
		prompt:"Very big prompt. Very big prompt. Very big prompt.", 
		imageType:"normal", 
		showTitle: true, showHover: true, showRollOver: false},
        {name:"textFld2", title:"Text 3", type:"text"}
    ]
})
]});

</SCRIPT>
</BODY>
</HTML>

Please confirm that there is no better solution to fix the issue.

Note, it's not the browser who resizes the image, it's your code that calculates the element size incorrectly and sets the big size for <div> tag wrapping the <img>.

I am sure we are not only ones who are having this issue with images in FF, it would make sense to handle it on the ImgButton level by default.

**Isomorphic** · 31 Aug 2011, 10:38

Because you're setting overflow:visible, the ImgButton is auto-sizing to the Firefox placeholder, which is bigger than 7x7. Same problem with the prompt.

Why are you setting overflow:"visible"? You said something about using it for dynamic images, but with a fixed-size image it makes no difference except to introduce these problems - this is why you are the only ones having such an issue (feel free to search the forums to verify).

**ESherbakova** · 31 Aug 2011, 11:51

Because we are developing framework elements, means that CwImageItem can be used in different places and I have to make sure the behavior of the item is consistent for all scenarios and browsers.

The image can be set initially or dynamically later. The dynamic image can be bigger, or width and height can be not specified at all.

That's why imageType="normal" is used - to be able to expand the element size to fit the dynamic image (with the exact size).
Setting overflow:visible was the only way (acceptable for us) to implement that auto-fit logic.

Overflow "visible" everywhere in your code means the following:
the element/canvas has initial width and height specified and then extends the size to fit the content.

We are assuming that this should work same way in this case too and be consistent in all browsers.

**Isomorphic** · 31 Aug 2011, 12:22

Again, the fundamental problem is that we do not have an accurate size for the image until the browser loads it. This is not a cross-browser problem, this just a fundamental problem across all browsers (and even other non-browser technologies).

So here is how you use the facilities the framework provides:

1. if the image is fixed size, provide a width and height and don't set overflow:"visible"

2. if the image is of unknown size, ensure it's loaded before attempting to draw anything that needs to auto-size to the image. If it cannot be loaded in advance, you will have to redraw or otherwise trigger size adjustment (eg adjustForContent()) once the image is loaded - there is no way to avoid this anyway because there simply is no way to draw anything the correct size until the image is loaded and its dimensions are known.

**ESherbakova** · 31 Aug 2011, 12:35

So basically at the moment of calculating the image size you cannot know if it's loaded or not? Because if you can determine that, why not just use specified width and height?

If you cannot determine this, I agree, this is not fixable from your perspective. Then we will keep looking for the appropriate workaround.

**Isomorphic** · 31 Aug 2011, 12:42

We always apply the specified width and height regardless. The problem is, when you set overflow:visible you're telling us to auto-size to what the browser draws. And the browser in some cases draws a placeholder (the prompt text, or something else) which is larger than your specified size, so we autosize to that. This is true in multiple browsers by the way.

**ESherbakova** · 31 Aug 2011, 12:47

Ok, thanks for your suggestions, now I have better picture of the issue.

Announcement

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment