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

Page 1 of 2 12 LastLast
  1. #1

    [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 5:01 AM. Reason: [CLOSED]
  2. #2
    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
    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 Test25.png   test25b.png  
  4. #4

    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
    Hi @michaeld,

    What about to preload an image before showing a message box?
  6. #6
    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
    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
    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
    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 11:42 AM.
  10. #10
    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. Replies: 5
    Last Post: Jun 06, 2013, 6:41 AM
  2. Replies: 2
    Last Post: Apr 15, 2013, 8:46 AM
  3. [CLOSED] Combo list adjust
    By softmachine2011 in forum 2.x Premium Help
    Replies: 2
    Last Post: Jun 15, 2012, 3:07 PM
  4. [CLOSED] CheckboxGroup Auto-Width/Height adjust
    By ljcorreia in forum 1.x Premium Help
    Replies: 5
    Last Post: Jan 21, 2010, 11: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, 4:12 AM

Posting Permissions