1

I am using Datatables.net and I am running into an issue where they table appears to be going past the constraints of the blocks its contained within. Acting similar to a floating element. I am not really sure how to address this issue as I am not really sure exactly whats going on.

More times then less my tables will stay within the confines of my template and push the template with it where needed, except this table. Example of what I mean

enter image description here

chris
  • 36,115
  • 52
  • 143
  • 252
  • show the html/css please or use jsfiddle.. its hard to determine what exactly is causing this. – Sully May 01 '12 at 19:25

2 Answers2

1

You can control whether the containing element shows the over-sized data table by using the CSS property "overflow". If you set overflow:hidden, the table will be truncated, whereas if you set overflow:scroll the containing element will get a scroll bar which you can use to see the whole table (by scrolling around it).

However, I'm guessing you want to prevent the overflow, in which case your problem comes down to the data table's width and its container's width. If your data table's content is simply too big, then you need to use the data table options to adjust the content (for instance, you might want to change your aoColumnDefs to have shorter header text). If the table's contents are what you want, but you want to make the table smaller, then you'll need to play with the CSS for it (ie. you may want to lower the font size).

Finally, if the data table is a fine size, and your problem is just that the containing element is too small, you need to increase the width (via the CSS properties width or min-width) of that containing element.

Hope that helps.

machineghost
  • 33,529
  • 30
  • 159
  • 234
  • there in lies the problem though, the containing element is not static in width. Which is the bit confusing me. Ive got tables like this else where that push the template out as needed, this one however not so much.. I have found through while playing with it an another aspect of what I am working on that its using the equivalent of jquery's load() to bring that particular bit of info to the page so I am wondering if that has anything to do with it. – chris May 01 '12 at 21:25
  • I don't see why the load would make a difference, but if you wanted to test that theory you could try setting the containing element's width right after the load to see if it fixes matters. – machineghost May 01 '12 at 21:33
  • To expand on this, you may also want to check if there's a single word that's too long. May just need spaces after commas on comma delimited lists, some other content change, or changing the wordwrap you're using. – Goose Mar 06 '17 at 16:06
0

It's pretty hard without the specific code. Have you tried the usual clearfix options?

There are great examples of how to do this in the second answer, here: What methods of ‘clearfix’ can I use?

Community
  • 1
  • 1
Jennifer B
  • 51
  • 2