PDA

View Full Version : Button in grid cell, IE7 issue



ttbgwt
16 Mar 2011, 2:12 PM
I have an editor grid and for one of the columns I render a button into it, float it left, and set the width so that the button covers two additional cells. All works great but in IE7 (customer requires it), the button gets cut-off in the first cell.



renderer: function (value, metaData, record, rowIndex, colIndex, store) {
if (record.get('Id') == 6) {
metaData.css = 'my-grid-button-cell';
var contentId = Ext.id();
searchPumpsButton.defer(1, this, [value, contentId, record]);
return ('<div id="' + contentId + '"></div>');
}


Here is the button code:


function searchPumpsButton(value, contentid, record) {
if (Ext.fly(contentid) !== null) {
new Ext.Button({
text: 'SEARCH FOR PUMPS',
width: 178,
id: 'search-button-id-text'
}).render(document.body, contentid);
}
if (Ext.fly(contentid) !== null) {
Ext.fly(contentid).up('div').addClass('my-grid-button-cell');
}
});


Here is the css:


.my-grid-button-cell
{
float: left; !important;
z-index: 10; !important;
position: relative; !important;
}


I googled and think this is an IE7 float issue, but din't know if anyone in the forum has run into this before?

Thanks