Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member
    Join Date
    Jul 2011
    Posts
    29
    Vote Rating
    2
    beckdawg is on a distinguished road

      0  

    Default Message box styling issue in IE only

    Message box styling issue in IE only


    REQUIRED INFORMATIONExt version tested:
    • Ext 4.0.7
    Browser versions tested against:
    • IE8/compatibility mode
    Description:
    • Styling issue with message box in IE
    Steps to reproduce the problem:
    • Added ext code below to examples/theme/theme.js
    • Set up custom theme using the steps listed in learning guide
    • Added one custom line(white background listed below)
    The result that was expected:
    • correct styling
    The result that occurs instead:
    • buttons overlap background
    Code:
        var dialog = Ext.create('Ext.window.MessageBox', {        buttons: [            {text: "Ok", handler: function(){alert('hi');}},            {text: "Play", handler: function(){alert('hello');}},            {text: "that", handler: function(){alert('how are you');}},            {text: "funky music", handler: function(){alert('hola');}},            {text: "white boy", handler: function(){alert('coma esta?');}},            {text: "Cancel", handler: function(){dialog.close();}}        ]    });    dialog.show({        title: 'Save Changes?',        width: 800,        msg: 'Click OK to delete this item or click Cancel to exit',        icon: Ext.MessageBox.WARNING    });
    HELPFUL INFORMATIONScreenshot or Video:Debugging already done:
    • Found potential solution
    Possible fix:
    • change padding
    Additional CSS used:
    • default css plus one addition($window-body-background-color: #ffffff !important; )
    Operating System:
    • WinXP
    By default, window body inherits the background color from it's parent which is a blueish hue. My company wants to add custom styling so that it looks similar to the above image. As such, we created a custom theme which at the moment only has one change which is adding the background color of white to window-body-background.Doing this causes the buttons to get overlapped by the white background. Some investigation has lead me to this portion of the markup

    Code:
    <div class="x-container x-window-item x-container-default" id="container-1346" role="presentation" style="padding-bottom: 10px; padding-left: 10px; width: 590px; padding-right: 10px; overflow: hidden; padding-top: 10px;">
    Removing padding-bottom from that via IE's dev tools appears to fix the issue. Normally I would just alter the scss for window. However, in this case the styling is being drawn on the element itself not via a class. My suspicion is that IE, being IE, is incorrectly handling padding and since the buttons are in a tool bar drawn with top/left it is choosing to draw them after the last physical thing in the mark up and over top of the padding.

    This looks fine in the newest versions of chrome and firefox. Also, removing the padding-bottom seems to have no change on the styling at least in chrome.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,649
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Have you tried this in 4.1.0 beta3?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Ext JS Premium Member
    Join Date
    Jul 2011
    Posts
    29
    Vote Rating
    2
    beckdawg is on a distinguished road

      0  

    Default


    Short answer, yes it appears to work fine in 4.1 beta 3. However, it appears there are some other bugs with custom themes in the beta. If I run the themes example with resources/css/ext-all.css it works fine. However, switching to a custom theme(no changes just different file) cause some weird spacing issues. Also, the tabs styling appears to have additional issues(see below). This behavior seems fairly consistent among other examples I've tried as well.

    I've not tried to debug the below behavior at all as it's really a separate issue. I'm not sure how soon 4.1 will be out of beta status either. Perhaps these are known issues. I've not looked. But, I'm not sure we can upgrade to the beta with issues such as this and I'm not sure my QA will let my code through with the issues I have in 4.0.7.
    untitled1.jpguntitled2.jpg

  4. #4
    Ext JS Premium Member
    Join Date
    Jul 2011
    Posts
    29
    Vote Rating
    2
    beckdawg is on a distinguished road

      0  

    Default


    I noticed today when messing around with this that a page built with ext-all.js and only a message box appears to work correctly in 4.0.7. The example page for theme is using bootstrap instead of ext-all.js and displays as I screen capped above.

    In 4.1 beta 3 they have converted that theme example to ext-all.js. I'm thinking the issue has something to do with bootstrap and if I avoid that I think things may be ok.

Thread Participants: 1