PDA

View Full Version : [CLOSED] [2.2 Trunk] Height does not adjust in MessageBox with image contents.



michaeld
Jun 13, 2013, 2:35 AM
This post-back code used to fit the size of the contents in 1.0. Now it only shows the first 2 lines and the top portion of the image in current Chrome. I haven't tested in other browsers yet.



// Notify Complete
var more = OrigSize.Width!=calImage.Width || OrigSize.Height!=calImage.Height ?
string.Format( "<br/>Resized Image: {0}x{1}<br/><br/>Upload Hint - resize for faster transfer",
calImage.Width, calImage.Height
) : string.Empty;
X.Msg.Show( new MessageBoxConfig {
Buttons = MessageBox.Button.OK,
Icon = MessageBox.Icon.INFO,
Title = "Success", Width=900,
Message = string.Format( "Uploaded file: {0}<br/>Size: {1}x{2}{3}<br/><br/><img src='{4}'/>",
file, OrigSize.Width, OrigSize.Height, more, ImagePath.GetUrlPath( Request, calImage.FileName) ),
Handler="document.location=document.location;"
} );


Any thoughts how I can get the height to fit the size of the actual full message contents without specifying a height?

Baidaly
Jun 13, 2013, 3:51 AM
Hello!

Couldn't reproduce. I've tried the following sample:



<%@ Page Language="C#" %>

<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>

<!DOCTYPE html>

<html>
<head runat="server">
<script runat="server">
public void ButtonClick(object sender, DirectEventArgs e)
{
var more =
string.Format( "<br/>Resized Image: {0}x{1}<br/><br/>Upload Hint - resize for faster transfer",
300, 225
);

X.Msg.Show( new MessageBoxConfig {
Buttons = MessageBox.Button.OK,
Icon = MessageBox.Icon.INFO,
Title = "Success", Width=900,
Message = string.Format( "Uploaded file: {0}<br/>Size: {1}x{2}{3}<br/><br/><img src='{4}'/>",
"SomeFile.file", 300, 225, "Some text", "http://www.ext.net/wp-content/uploads/2012/12/ext2.png" ),
Handler=""
});
}
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:Button runat="server" Text="Click me">
<DirectEvents>
<Click OnEvent="ButtonClick"></Click>
</DirectEvents>
</ext:Button>
</form>
</body>
</html>

michaeld
Jun 13, 2013, 4:39 AM
I'm thinking this is related to zoom factor "again" but maybe something else because I can't reproduce it easily. But this is what I'm seeing in my browsers. Chrome and firefox.

michaeld
Jun 13, 2013, 4:46 AM
Okay, I've got it. The issue appears when the image is not cached. Pressing Ctrl-F5 will cause the behavior because the image will not have been loaded.

I'm guessing when the image is cached, it can calculate the size because the contents are already there during load, but if it's not cached, it's loading in parallel and the by the time it loads the messagebox is already rendered. Thoughts on how to cause a redraw on this panel after the image is loaded or cause it to delay or not cache?

Daniil
Jun 13, 2013, 5:56 AM
Hi @michaeld,

What about to preload an image before showing a message box?

michaeld
Jun 13, 2013, 8:01 AM
This particular code is the post-back confirmation to the user that their upload succeeded, so I don't know how I'd do that. I'm thinking the only way we may be able to do this is to create a true ext:window control and showing it in postback, as there is no reason in this instance why I can't use ext controls here.

That might solve this instance, but I have another case where I have a SEO public page that is mostly html content that is having a same problem finding height because of the image. The entire content is wrapped inside an ext:panel and if I understand you correctly, I'd have to hide the panel till the image is loaded. The problem with that is traditional SEO doesn't register content after an html javascript delay or event. That may be changing but no one in the SEO field will genuinely confirm this.

It seems to me the classic update or render features of ext 2.X/3.X would solve the problem by forcing a refresh of the panel with the image after the fact (which I can accept), but I'm not sure that feature still exists. Does it? I'll list that as a separate post if you prefer but the issues both relate to height calculations of standard html controls. We haven't really confirmed my theory on the issue is correct either.

michaeld
Jun 13, 2013, 9:33 AM
I got slightly better results when I did the following:



Message = string.Format( "Uploaded file: {0}<br/>Size: {1}x{2}{3}<br/><br/><img src='{4}' width='{1}' height='{2}'/>",
file, OrigSize.Width, OrigSize.Height, more, ImagePath.GetUrlPath( Request, calImage.FileName) )



In other words, I added width and height to the img so that the parent had more to work with assessing the size instead of preloading. However, it's not behaving perfect. It shows only the top half of the entire image but it showed enough to get the idea, so I can go to beta with this.

Daniil
Jun 13, 2013, 11:21 AM
This call appears to help when an image is loaded.

Ext.Msg.doLayout();

I tested it with the @Baidaly's example which does reproduce the issue for me.

michaeld
Jun 13, 2013, 11:35 AM
Where did you put it in his example to get it working? I'd like to try.

Daniil
Jun 13, 2013, 11:38 AM
Well, I ran it in the console just to check.

The AfterRender event doesn't wait image loading.

I would try to call it within an img's onload event.

<img src="..." onload="Ext.Msg.doLayout();">

michaeld
Jun 13, 2013, 11:49 AM
Got it. Thank you. I didn't consider that option.
Think the issue itself is worth noting to sencha?

Daniil
Jun 13, 2013, 11:50 AM
I think it is worth. I am not sure they will do something, but, at least, we will be aware of this issue.

Though, if define height and width for an img and it doesn't work, I would say it is a bug. I need to check it. Is it reproducible with the @Baidaly's example?

michaeld
Jun 13, 2013, 12:42 PM
When I put height and width in Baidaly's example, it works fine, but when I try either solution in the actual implementation after an upload, it doesn't display more than half the image. I haven't spent too much time to determine why that is. The image is 496x642 but the Ext.Msg box displays at 590x490. It's strange considering I explicitly set width to 900 (see my original sample code and Baidaly's). I guess that could be deemed a bug? Unless of course that's supposed to be graded as a max width. I haven't looked up documentation.

Daniil
Jun 13, 2013, 4:38 PM
Yes, a MessageBox's maxWidth is 600 by default on the ExtJS level.

Passing MaxWidth into a Show config helps.

X.Msg.Show(new MessageBoxConfig
{
Width = 900,
MaxWidth = 900
});