Archive

Archive for the ‘IE bugs’ Category

How to overwrite an !important style property from JavaScript

20/11/2009 2 comments

So today I had to change the background color of a div, which had a CSS class on it, which specified something like:

.cell-selected {background-color : #dedede !important}

Obviously, the first thing I tried in JavaScript was pretty straight-forward, but also wrong:

htmlelement.style.backgroundColor = '#fafafa !important'

This doesn’t work neither on Firefox (3.5), nor on IE (7, 8).
Searching the internet, I found out that the style object has a setProperty method, which has 3 parameters:

setProperty(property, value, priority)

where priority is either an empty string, or ‘important’. However, as with most solutions easy to find, it only works on Firefox, Safari, Opera, probably Chrome too. The apparent solution on Internet Explorer was to create a style tag and add some text content to it, creating a new css class, with the new background color set as !important, then applying that class to htmlelement. All the info regarding this problem can be found on this thread here. The bad news is:

var   styleElement = document.getElementById('styles_js');
    if (!styleElement) {
        styleElement = document.createElement('style');
        styleElement.type = 'text/css';
        styleElement.id = 'styles_js';
        document.getElementsByTagName('head')[0].appendChild(styleElement);
    }
    styleElement.appendChild(document.createTextNode(newStyle));

doing something like this won’t help at all. In fact, the call to appendChild will raise an error. To clear this up I started yet again a search on-line. The result is this page. Unfortunatelly, not one solution worked for me. They either raised errors, or, when I did the styleElement.text assignment, it worked on IE8, but not on IE7.

Anyway, after renewed efforts, I found this link right here, which explains very well how to handle style tag creation in IE. However, simply creating DOM nodes and leaving them be is not a good solution. So if you do this, make sure you remove them from the DOM after you’ve done your job. The alternative is creating a memory leak (not a big one, but if the programming style isn’t defensive enough, the page could start leaking memory like a sieve).

So, the final solutions was actually something like:

if(Ext.isIE){
    var newStyle = document.createStyleSheet();
    newStyle.addRule('colorstyle', 'background-color : #fafafa !important;');
    Ext.fly(htmlelement).addClass('colorstyle');
}else{
    htmlelement.style.setProperty('background-color', '#fafafa', 'important');
}
Advertisements
Categories: CSS, Firefox, IE bugs

IE7 overflow issue, while working with ExtJS

10/11/2009 1 comment

I’ll start by saying that I found this bug while working with ExtJS. It’s worth noting because it was very frustrating to deal with, and also, I could not find an actual bug explanation.

The simplified test case code for this would be:

Ext.onReady(function() {
    var win = new Ext.Window( {
        width : 300,
        height : 300,
        layout : 'fit',
        items : [ {
            xtype : 'form',
            layout : 'anchor',
            items : [ {
                xtype : 'tabpanel',
                anchor : '100% 100%',
                autoScroll : true,
                items : [ {
                    title : 'Tab 1',
                    id : 'tab1',
                    html : 'Really complex content goes here'
                } ],
                activeTab : 0
           } ]
       } ]
}); win.show(); });

This shows a window, containinga tab panel, with only one tab and some text in it. In order to observe the strange behavior, after the page displays, try setting the height of the tab to 500px.

Ext.getCmp('tab1').setHeight(500);

If you run this from Firebug’s console, or from IE8’s developer tools script console, you will notice that scroll bars will appear in an instant. However, if you set IE8 to function on IE7 Browser Mode and IE7 Document Standards, and then run the same command, the overflow will appear not to function. In fact, it seems that IE7, instead of adding the scrollbars on the inside of the overflowed container (as it usually does), it adds them on the outside of the contained div. This is way they are not visible. However, even if they were visible, they wouldn’t work.

The generated HTML structure which causes this problem can be simplified like this:

<div style="overflow: auto; width: 282px; height: 238px;">
    <div style="width: 282px; height: 500px; overflow:hidden; position:relative;">
        Really complex content goes here
    </div>
</div>

So, even if you will notice the scrollbars are visible, they will not function in IE7. After trying to remove different stuff to see what’s broken, I noticed it’s got something to do with the position:relative attribute. Even if this seems like a sufficiently easy fix, it didn’t work on my complex layout.

So, without finding an actual solution, I settled for this workaround:

Ext.onReady(function() {
    var win = new Ext.Window( {
        width : 300,
        height : 300,
        layout : 'fit',
        items : [ {
            xtype : 'form',
            layout : 'anchor',
            items : [ {
                xtype : 'tabpanel',
                anchor : '100% 100%',
                items : [ {
                    title : 'Tab 1',
                    autoScroll : true,
                    items : [{
                        xtype : 'panel',
                        html : 'Really complex content goes here',
                        height : 500
                    }]
                } ],
                activeTab : 0
            } ]
        } ]
    });
    win.show();
});

So instead of trying to make the tab panel scroll its body, I added an intermediary object which does only that: overflow : auto; Its content is correctly scrolled in Firefox, IE8 and IE7.

So far, this is the best I could come up with, and I’m happy that at least it works.

Later edit:

Seems like the solution was simpler than that: all I had to do was to specify position:relative for the element with overflow:auto. A very good explanation can be found here 

Later Edit: 15th July 2014 – it appears the link I mentioned is not available any more. The solution is still valid, but a detailed explanation will be hard to find.

Categories: ExtJS, IE bugs