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.