You found a bug! We've classified it as EXTGWT-3742 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Touch Premium Member
    Join Date
    Mar 2008
    Location
    Morgan Hill, CA
    Posts
    127
    Vote Rating
    3
    margozzi is on a distinguished road

      0  

    Default MessageBox layout issues

    MessageBox layout issues


    Required Information Version(s) of Ext GWT Ext GWT 3.1 Browser versions and OS (and desktop environment, if applicable)
    • Firefox 26, Windows 7
    Virtual Machine No Description The MessageBox width is seemingly randomly determined.
    Adding line breaks with <br> changes the width is somewhat unpredictable ways.
    The worst part is the button bar background. I thought this was fixed before.
    See attached image for details. Run mode both Steps to reproduce the problem
    1. Start running in development mode in Eclipse
    2. Open app in browser
    3. Create a standard MessageBox and add the text as shown in the attachment.
    Expected result I would expect a developer to be able to know what the width of the dialog will be
    based on something. As it stands, it is a mystery. Actual result Random Dialog width and bad button bar background width depending on dialog width. Test case
    Code:
     MessageBox msgBox = new MessageBox("Progress");
    msgBox.setPredefinedButtons(PredefinedButton.OK);
    msgBox.setIcon(MessageBox.ICONS.info());
    msgBox.setMessage( "Reset command sent to phone(s). <br>Registration status will be updated after next Sync." );            
    msgBox.show();
    Helpful Information Screenshot
    • See attachment
    Live test Debugging already done
    • None
    Possible fix Not provided
    Attached Images

  2. #2
    Sencha - GXT Dev Team
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    419
    Vote Rating
    15
    branflake2267 will become famous soon enough

      0  

    Default


    I'm not able to replicate the button issue with the test case provided. I suspect I'm missing the configuration used to size the button?

    Code:
    import com.google.gwt.user.client.ui.RootPanel;
    import com.sencha.gxt.widget.core.client.Dialog.PredefinedButton;
    import com.sencha.gxt.widget.core.client.box.MessageBox;
    import com.sencha.gxt.widget.core.client.button.TextButton;
    import com.sencha.gxt.widget.core.client.event.SelectEvent;
    import com.sencha.gxt.widget.core.client.event.SelectEvent.SelectHandler;
    
    
    public class MessageBoxTest {
    
    
      public MessageBoxTest() {
        TextButton button = new TextButton("Open");
        button.addSelectHandler(new SelectHandler() {
          @Override
          public void onSelect(SelectEvent event) {
            MessageBox msgBox = new MessageBox("Progress");
            msgBox.setPredefinedButtons(PredefinedButton.OK);
            msgBox.setIcon(MessageBox.ICONS.info());
            msgBox.setMessage( "Reset command sent to phone(s). <br>Registration status will be updated after next Sync." );            
            msgBox.show();
          }
        });
        RootPanel.get().add(button);
      }
      
    }
    Could you modify the test case, show me how you are sizing the button?
    Thanks,
    Brandon
    GXT Support

    ~ New GXT Guides ~
    http://docs.sencha.com/gxt/3.1/

    ~ Support Tickets ~
    https://support.sencha.com/index.php

    ~ Tips and Announcements Community ~
    https://plus.google.com/communities/110447085143928405373

    ~Training~
    Get on the Fast Track with Sencha Training http://sencha.com/training

  3. #3
    Touch Premium Member
    Join Date
    Mar 2008
    Location
    Morgan Hill, CA
    Posts
    127
    Vote Rating
    3
    margozzi is on a distinguished road

      0  

    Default


    I am not sizing the button. I am assuming now that this is a theming issuee :-(

    Can someone at least explain the logic behind how/when/when the text wraps?

  4. #4
    Sencha - GXT Dev Team
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    419
    Vote Rating
    15
    branflake2267 will become famous soon enough

      0  

    Default


    Thanks for the info. I'll play around with wrapping text a bit more and see if I can replicate that.
    Thanks,
    Brandon
    GXT Support

    ~ New GXT Guides ~
    http://docs.sencha.com/gxt/3.1/

    ~ Support Tickets ~
    https://support.sencha.com/index.php

    ~ Tips and Announcements Community ~
    https://plus.google.com/communities/110447085143928405373

    ~Training~
    Get on the Fast Track with Sencha Training http://sencha.com/training

  5. #5
    Sencha - GXT Dev Team
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    419
    Vote Rating
    15
    branflake2267 will become famous soon enough

      0  

    Default


    I missed the toolbar styling earlier, which is darker. The browser is doing the layout flow and wrapping around the float. So far I don't see the width issue yet, but I think getting your theme configuration file could help. Could you email your theme configuration to me, brandon.donnelson@sencha.com?
    Thanks,
    Brandon
    GXT Support

    ~ New GXT Guides ~
    http://docs.sencha.com/gxt/3.1/

    ~ Support Tickets ~
    https://support.sencha.com/index.php

    ~ Tips and Announcements Community ~
    https://plus.google.com/communities/110447085143928405373

    ~Training~
    Get on the Fast Track with Sencha Training http://sencha.com/training

  6. #6
    Sencha - GXT Dev Team
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    419
    Vote Rating
    15
    branflake2267 will become famous soon enough

      0  

    Default


    Just a note the width is determined by the text content div and the default min-width is set to 300. The text wraps because of the icon is added with a float left or the text wraps with a line break. The text div pushes the dialogs width. If you remove the icon, the text won't wrap b/c there isn't a float. I haven't been able to pin down a configuration yet that causes the toolbar width not to be 100% of the dialog.
    Thanks,
    Brandon
    GXT Support

    ~ New GXT Guides ~
    http://docs.sencha.com/gxt/3.1/

    ~ Support Tickets ~
    https://support.sencha.com/index.php

    ~ Tips and Announcements Community ~
    https://plus.google.com/communities/110447085143928405373

    ~Training~
    Get on the Fast Track with Sencha Training http://sencha.com/training

  7. #7
    Touch Premium Member
    Join Date
    Mar 2008
    Location
    Morgan Hill, CA
    Posts
    127
    Vote Rating
    3
    margozzi is on a distinguished road

      0  

    Default


    Here is our theme attached
    Attached Files

  8. #8
    Sencha - GXT Dev Team
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    419
    Vote Rating
    15
    branflake2267 will become famous soon enough

      0  

    Default


    Engineering did more investigation and can replicate the issue when padding or border radius has been changed. Thanks for reporting and we will update this thread when we make progress.

  9. #9
    Sencha Premium Member
    Join Date
    Jul 2012
    Posts
    9
    Vote Rating
    0
    smitzkus is on a distinguished road

      0  

    Default


    Hi,

    another issue is, that in case of long messages the alignments for lines after the icon are wrong. I think the message should be aligned in the way that the distance to the left dialog border is always the same. See attached screenshot.

    Best regards
    Stefan
    Attached Images

  10. #10
    Sencha - GXT Dev Team
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    419
    Vote Rating
    15
    branflake2267 will become famous soon enough

      0  

    Default


    Good idea, I'll pass that along. Currently we don't have the feature for the icon to be in its own column with this message box so the text aligns in its own column, although there are a few ways to modify it to for customization. I could be missing the point, maybe I'm not seeing something yet.

    1. The easiest is to build a customized dialog, and provide the table structure the text to be aligned.
    2. Element manipulation...
    Code:
            Element iconDiv = msgBox.getAppearance().getContentElem(msgBox.getElement()).getElementsByTagName("img").getItem(0).getParentElement();
            iconDiv.getStyle().set...
    3. Change the appearance, and change the appearance css.
    Code:
    MessageBox msgBox = new MessageBox(headingHtml, messageHtml, appearance, contentAppearance)
    Thanks for the feedback.
    Thanks,
    Brandon
    GXT Support

    ~ New GXT Guides ~
    http://docs.sencha.com/gxt/3.1/

    ~ Support Tickets ~
    https://support.sencha.com/index.php

    ~ Tips and Announcements Community ~
    https://plus.google.com/communities/110447085143928405373

    ~Training~
    Get on the Fast Track with Sencha Training http://sencha.com/training

Thread Participants: 3

Tags for this Thread