Button Alignment Issues.

MattD

I am having issues with alignment. I understand sDOM is used to address all alignment issues, though I'm still trying to figure it out. In my examples below, no sDOM settings are adjusted. I have two projects with a few different results as seen in the pictures below. My goal is to get the picture 3 layout but without the large gap between the buttons and the table.

There are no differences between any of the files being referenced other than 2 and 3 have had the buttons in the datatables.bootstrap.js changed to the DTTT_button type. Pictures 1 and 3 are identical except for that difference, however when changing just that button type, it collpased from two rows to one and shifted the buttons to the right.

1 - https://www.dropbox.com/s/p0l9dca7dvagyot/Bootstrap%20Buttons%20-%20datatables.bootstrap.css%20enabled.png
2 - https://www.dropbox.com/s/7epbgh35yacdpd2/TableTools%20Buttons%20-%20datatables.bootstrap.css%20disabled.png
3 - https://www.dropbox.com/s/l2crcghfw3nsjqz/TableTools%20Buttons%20-%20datatables.bootstrap.css%20enabled.png

Side note: The Delete button is intentionally pulled from 2 and 3.

If anyone could provide any direction as to how to achieve this result I would greatly appreciate it.

allan

> I understand sDOM is used to address all alignment issues

No - it is used to define the order of the HTML elements that DataTables adds to the document. It is the CSS which defines the visual positioning of the elements.

> My goal is to get the picture 3 layout but without the large gap between the buttons and the table.

It looks like the gap is about 1em. I'm afraid I\m not sure what is causing it from looking at the image though. We'd need an actual test case. I'd suggest poking around with your browser's DOM inspector as that will show what elements have margin which, I think, is the most likely causes. Possibly the table?

Allan

MattD

[quote]allan said: No - it is used to define the order of the HTML elements that DataTables adds to the document. It is the CSS which defines the visual positioning of the elements.[/quote]

I completely misworded my sDOM statement.

I will look into the margin issue, thanks so much! If I can't find anything I will post a test case.

MattD

[quote]allan said: I'd suggest poking around with your browser's DOM inspector as that will show what elements have margin which, I think, is the most likely causes. Possibly the table?[/quote]

I found it, it was a custom style I had enabled for the table which was not adding a 10% margin in one case but was in the other.

Thanks so much Allan!

allan

Great to hear :-)

Allan