TextField width 100% minus scrollbar width (IE issue)

oliverp's picture

Hello,

I'am currently developing an Application with Echo3 and since the customer really likes to use the Internet Explorer 6 browser i ran into a small issue with the TextField component. If I place the Textfield in a Grid and set the with of the cell to 100% the code of the TextField (Javascript) subtracts the width of a scroll bar if the browser is Internet Explorer.

I investigated the behaviour by using 110 % width as cell width and it works fine, since the higher width is used in the javascript calulation of the scrollbar. I tested this with IE 6,7 and 8 and it looks much better without the calculation.
* So why is this code present at all?
* I personally think this could be a bug since input fields have no scrollbar, only TextArea have as far as i know

Sync.TextComponent.js

...
if (Core.Web.Env.BROWSER_INTERNET_EXPLORER) {
                // Add default windows scroll bar width to border size for Internet Explorer browsers.
                if (this.container) {
                    this.container.style.width = this._adjustPercentWidth(100, Core.Web.Measure.SCROLL_WIDTH, 
                            this.input.parentNode.offsetWidth) + "%";
                } else {
                    borderSize += Core.Web.Measure.SCROLL_WIDTH;
                }
            }
...

_adjustPercentWidth: function(percentValue, reducePixels, containerPixels) {
        var value = (100 - Math.ceil(100 * reducePixels / containerPixels)) * percentValue / 100;
        return value > 0 ? value : 0;
    },

Screenshot
I am also attaching screenshots to easily understand the problem. In the screenshot you can see the grid (red) and the TextField not using 100% width due to its container.

Patch
With the attached patch it works well in WindowsXP using Internet Explorer 6, 7 and 8 (TextField in a grid cell). All the other browsers, e.g. Firefox work like before since the patch doesn't influence them.

tliebeck's picture

I think this is present on

I think this is present on text fields to avoid horizontal scroll bars showing up in container components (like grid/row). Looking at the code the problem is not very well documented though. IE6 and 7 are nothing short of *awful* with horizontal scroll bars with 100% widths specified in/around TABLE elements.