ColdFusion cfgrid Selected Row Disappearing / Blank in IE

After selecting a row in cfgrid in Internet Explorer, the selected row goes blank or all white. The data is still there and the row is selected, you just can’t tell.

The problem lies in a css file that ColdFusion uses for the cfgrid. According to some other posts on the web, there is some incorrectly commented out css rules. They are commented out with ‘//’ rather than ‘/*…*/’. The file is ext-all.css and on my set up with IIS, I found it at C:\Inetpub\wwwroot\CFIDE\scripts\ajax\resources\ext\css\ext-all.css.

When the comments are correctly marked up, it got better (the text showed up) but the background color did not behave even though I specified the select background color in the cfgrid attributes with selectColor=”#FF3300″. BTW, the selectColor worked for FireFox, IE didn’t seem to care.

My solution (although imperfect) was to edit the ext-all.css by properly commenting out the bad comments and adding my own background color for the selected td. It’s imperfect because it overrides the selectColor in FireFox.

.x-grid-row-selected td, .x-grid-locked .x-grid-row-selected td{
	background-color: #316ac5; /* added */
	/*color: white;*/
}


.x-grid-row-selected span, .x-grid-row-selected b, .x-grid-row-selected div, .x-grid-row-selected strong, .x-grid-row-selected i{
	color:white !important;
}

.x-grid-row-selected .x-grid-cell-text{
	/*color: white;*/
}

.x-grid-cell-selected{
	/*color: white;*/
}

.x-grid-cell-selected span{
	/*color: white !important;*/
}

.x-grid-cell-selected .x-grid-cell-text{
	/*color: white;*/
}

Hope this helps someone else and I hope Adobe fixes it.

Posted in Uncategorized. Permalink. Both comments and trackbacks are closed.

4 Comments

  1. Melvin
    May 6, 2011 at 4:53 pm | Permalink

    Very Very Helpful! I threw the 3 lines of style code on the top of the actual page I was displaying and it worked perfectly!

  2. Amit
    February 3, 2011 at 11:32 pm | Permalink

    `this is a very nice article,

    I want to apply autocomplete in gridview (in asp.net3.5 with C#) using jquery and this gridview is within the ajax update panel<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>.

    For this i am using method within the <ItemTemplate>

    $(document).ready(function(){
    $('[id$=txtItemCode]').autocomplete("SearchItem.aspx").result(function (event, data, formatted) {
    if (data) {
    alert('Value: '+ data[1]);

    }
    else {
    $('[id$=txtItemID]').val('-1');
    }
    });
    });

    since in gridview the textbox id is <asp:TextBox id="txtItemCode" /> but

    on browser such as <input type="textbox" id="ctl00_otherName_101txtItemCode" />
    and then for the next row same textbox id is now
    <input type="textbox" id="ctl00_otherName_102txtItemCode" />

    i tried
    1. put this code within the <ItemTemplate>
    2. <%= txtItemCode.ClientID %>
    3. $("*[@id$=theGridId] input[@id$=txtItemCode]")
    4. jQuery.expr[':'].asp = function(elem, i, match) {
    return (elem.id && elem.id.match(match[3] + "$"));
    };
    and $(":asp(txtItemCode)").autocomplete…
    5.$('.txtItemCode').autocomplete("LookupCodes.aspx?type=IC", { mustMatch: true })

    but autocomplete for textboxfield in multiple rows does not work in all the cases

    plz help me.

  3. Mohamed
    December 1, 2010 at 6:49 am | Permalink

    Excellent solution, thanks for sharing

  4. Jonathan
    August 26, 2010 at 2:48 pm | Permalink

    My selected text is turning white regardless of browser. I checked ext-all.css and didn't find the lines in your post. I am running cf9. I can't determine the year your post was published because there is no year on the graphic.

    Here is code from the stylesheet I am using for the page.

    .x-grid-row-over td{background:white; cursor:pointer;}

    .x-grid-row-selected td {background:#21533f !important;}

    .x-grid-row-selected .x-grid-cell-text {color:#000080 !important;}

    Any thoughts appreciated.