Problem: Parent container moves right on select

bgardner

I have a case where selecting a row in a dataTable causes a parent div
to shift its screen contents to the right. If that rings a bell in anyone's
head, I would really appreciate a hand here. I will explain my situation
in detail.

In the main page, we have a just an empty div for our search results:
[code]


... other content, search box, etc.




.. more stuff ..


[/code]

Then we have a search field and button that makes an Ajax call, the result of
which is a HTML page...

[code]
$('#searchButton').click(function(){
$.post("listRequests.action", { providedKeyWord: $('#providedKeyword').val()},
function(ltext, lstatus){
$('#results').html(ltext);
}
);
});
[/code]

The contents of the page are populated by Velocity. Basically each element
of a list represents a row of data.
[code]



RequestId
... more ...



#foreach($request in $requestHistory)

$!{request.acsrRequestId}
... more ...

#end


[/code]

we take the contents of request-table and make a dataTable out of it...

[code]
oTable = $('#request-table').dataTable({
"bJQueryUI": true,
"bAutoWidth": false
});
[/code]

And lastly, thanks to Allan's help, we have a trigger on the table which
populates a details panel for the currently selected row.

[code]
$("#request-table tbody tr").click(function(event) {

$(oTable.fnSettings().aoData).each(function (){
$(this.nTr).css('background-color','#FFFFFF');
});

$(event.target).parent().css('background-color','#CC99B3');

var aPos = oTable.fnGetPosition( this );
var aData = oTable.fnGetData( aPos );
var requestId = aData[0];

$.post("listDetails.action",
{ acsrRequestId: requestId } ,
function(ltext, lstatus){
$('#info-panel').html(ltext);
}
);
});
[/code]

Here is the problem: When I select a row (the above click()), the entire
body-contents div is shifted to the right several pixels.

Is there something about dataTables that I need to be aware of when I style?
Oh, and the best news of all - our corporate standard is IE 6.

Any help at all will be appreciated. I need to have this ready to show to
people in the next couple of days, and shifting divs fail to impress...

Brian

allan

Hi Brian,

Doesn't ring a bell at all but sounds like a CSS issue to me. There is nothing in DataTables core which would cause the display to jump around like that. If you comment out the $.post("listDetails.action"... stuff, does the problem still show? Does Firebug or whatever show what might be adding a margin or padding or messed up colspans?

Allan

bgardner

I found later that a margin was getting applied when the details were appearing (after selection of a row). Removing this margin took care of it. Sorry to bother this forum with my strange IE6 styling behaviors.

Brian