Search code examples
extjsinternet-explorer-8tbar

Ext JS 4: Title Bar buttons not fully visible in Internet Explorer 8

The default ExtJS configuration doesn't allow title bar buttons to show correctly in IE 8. I have not tested in IE 9. How can I fix this?

BEFORE:

Internet Explorer 8:

enter image description here

Mozilla Firefox 15:

enter image description here

I've tried adding a tbar > style > height config of the 1st button to '200px'. That just makes the 1st button get huge, but the 2nd and 3rd remain the same. Even if I set the same height in all 3 buttons, the buttons are still partially hidden in IE 8. If you know how to set the style of the tbar itself, I can attempt that. I can't figure that out though.

AFTER:

tbar: [{
    text: 'Create HEAT Project',
    style: {
        border: 'solid',
        height: '200px'
    },

Internet Explorer 8:

enter image description here

Mozilla Firefox 15:

enter image description here

Solution

  • This CSS fixed it in Internet Explorer!

    <style media="screen" type="text/css">

    .x-nlg .x-toolbar-default {
        background-image: url(../blank.png) !important;
    }

</style>