What's New?

[CLOSED] [2.2 Trunk] Height does not adjust in MessageBox with image contents.

Page 1 of 2 12 LastLast
  1. #1
    Jun 13, 2013, 1:35 AM

    [CLOSED] [2.2 Trunk] Height does not adjust in MessageBox with image contents.

    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?
    Last edited by Daniil; Jun 18, 2013 at 4:01 AM. Reason: [CLOSED]
  2. #2
    Jun 13, 2013, 2: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>
  3. #3
    Jun 13, 2013, 3: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.
    Attached Thumbnails Click image for larger version.  Name: Test25.png  Views: 12  Size: 68.9 KB  ID: 6364   Click image for larger version.  Name: test25b.png  Views: 15  Size: 57.7 KB  ID: 6365  
  4. #4
    Jun 13, 2013, 3:46 AM

    Cached vs uncached

    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?
  5. #5
    Jun 13, 2013, 4:56 AM
    Hi @michaeld,

    What about to preload an image before showing a message box?
  6. #6
    Jun 13, 2013, 7: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.
  7. #7
    Jun 13, 2013, 8: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.
  8. #8
    Jun 13, 2013, 10: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.
  9. #9
    Jun 13, 2013, 10:35 AM
    Where did you put it in his example to get it working? I'd like to try.
    Last edited by michaeld; Jun 13, 2013 at 10:42 AM.
  10. #10
    Jun 13, 2013, 10: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();">
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] [2.2] Ext.MessageBox.show does not size to fit contents if scaled
    By michaeld in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Jun 06, 2013, 5:41 AM
  2. [CLOSED] panel height auto adjust height according to the loaded page'height
    By hujq in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 15, 2013, 7:46 AM
  3. [CLOSED] Combo list adjust
    By softmachine2011 in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 15, 2012, 2:07 PM
  4. [CLOSED] CheckboxGroup Auto-Width/Height adjust
    By ljcorreia in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Jan 21, 2010, 10:05 AM
  5. How to adjust the distance of fieldlabel and field?
    By GeoffreyRen in forum 1.x Help
    Replies: 2
    Last Post: Jun 23, 2009, 3:12 AM

Posting Permissions