Click here to Skip to main content
Click here to Skip to main content
Go to top

Fix textbox resizing problem

, 2 Jan 2008
Rate this:
Please Sign up or sign in to vote.
Fix resizing problem for textboxes inside tables on Internet Explorer when width is specified in percentage.

Introduction

A problem occurs when a TextBox having its width set in percentage is placed in a table. If there is some initial value in the TextBox, then IE sets the width incorrectly.

Background

When a TextBox is assigned width in percentage, the actual width it takes is a percentage of its container. Normally, this works fine, but if the TextBox is placed inside a table, then IE renders it correctly only if the TextBox is empty to begin with. However, if there is some initial value in the TextBox when the page is loaded, then IE sets the minimum width of the TextBox to the actual content. As a result, if the calculated width of the TextBox is more than this value, the TextBox expands, but if the calculated width is smaller than this value, it takes the initial width. This behavior occurs only when the TextBox is inside a table.

Using the code

I scouted around for a fix for this typical problem. Many suggested using a multiline textbox, i.e., a TextBox with Rows=1, but it still allowed multiple line entry. Then, I noticed a curious behavior in the sense that only the TextBoxes that have an initial value were affected by this problem. Any data entered in the other TextBoxes were behaving normally. I modified my TextBoxes to have an empty initial value and stuffed the actual contents after page load. This functionality has been wrapped in a nice reusable function below. This function may be placed in a common module as a static function.

public void FixTextBoxes()
{
    // Attempt to cast HttpHandler as a Page.
    Page thePage = HttpContext.Current.Handler as Page;
    if (thePage == null) return;//Do nothing since we do not have a page
    if (!thePage.Request.Browser.Browser.ToLower().Contains("ie"))
    //The browser is not Internet Explorer
        return;
    string sScript;
    if (!thePage.IsClientScriptBlockRegistered("processTB"))
    {
        sScript = "function processTB(restoreMode)" + 
                  "{if(typeof restoreMode == 'undefined')restoreMode=false;";
        sScript += "var i=0,theCtls=document.getElementsByTagName('input');";
        sScript += "for(i=0;i<theCtls.length;i++){";
        sScript += "if(theCtls[i].type.toLowerCase()=='text'){";
        sScript += "if(restoreMode){if(theCtls[i].xVal!='undefined')" + 
                   "theCtls[i].value=theCtls[i].xVal;";
        sScript += "}else {var xWidth=theCtls[i].style.width;";
        sScript += "theCtls[i].xVal=theCtls[i].value;theCtls[i].value='';";
        sScript += "theCtls[i].style.width=theCtls[i].offsetWidth+'px';" + 
                   "theCtls[i].style.width=xWidth;";
        sScript += "}}}if(!restoreMode)window.setTimeout('processTB(true)',1);};";
        thePage.RegisterClientScriptBlock("processTB", sScript, true);
    }
    if (!thePage.IsStartupScriptRegistered("fixTB"))
    {
        sScript = "window.setTimeout('processTB()',100);";
        thePage.RegisterStartupScript("fixTB", sScript, true);
    }
}

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Girish Chandra
Web Developer
India India
No Biography provided

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web01 | 2.8.140926.1 | Last Updated 3 Jan 2008
Article Copyright 2008 by Girish Chandra
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid