Controls Display Problem

davidmyers

At http://www.ifrcd.org/localcircuit/ticket.php?option=view&type=current I'm having issues with the ways the that the table controls are displaying. I'm currently using the default sDom initialization and for some reason the controls are all stacking on top of each other instead of displaying in-line.

Also, the table control div has a fixed width that doesn't match the width of the table.

I just started using DataTables and ThemeRoller a couple of hours ago so I'm sure there are simple fixes for this, but I'm on a tight schedule and I've already spent quite a bit of time trying to figure this out. Thanks in advance for any help.

davidmyers

I have fixed the width issue by just stretching my table columns to fit the width of the table controls header.

However, I'm still having the problem with the sDom table controls display. I've also noticed that the arrow icons on the table headers are having the same issue; that is, they are displaying on a new line as opposed to in-line as they are supposed to.

I'd really appreciate any ideas or help with this.

davidmyers

Bump

cdaigle

Hi DavidMyers,

I ran into the same problem, and I believe this was caused by not including all the css styles provided. I notice that on your webpage, you don't have the demo_table.css file included, or anything from it. You will need certain things that do 'float: right' and other style modifications from that file. (it also has the table width set in there, which is where that problem stems from)

Hope this helps.

davidmyers

Thanks so much, that seems to have solved all of the issues I was having with the table controls.

The only caveat being that the sort arrow icons are still not displaying in-line. But that's something that I can live with atm.

davidmyers

I fixed the icon problem by changing:
[code].ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }[/code]
in my jquery-ui-1.8.7.custom.css file to this:
[code].ui-icon { display: inline-block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }[/code]