Button positioning

trevorGoodchild

I have created a dashboard page with a number of small reports using datatables. Everything works great, except that I'm stuck on how to position the Excel export buttons. The DIVs that hold the individual reports are set to a fixed height, we couldn't go the responsive route on this one, and I would like to be able to position the Excel export button in the lower right hand corner of the DIV regardless of how many rows are returned in the table. I created a CSS class

.advisorsExportButton 
{
position: absolute;
right: -7px;
bottom: 2px;
}

and added it to the button:

{ extend: 'excel', text: 'Export to Excel', exportOption: { page: 'current' }, footer: true, className: 'advisorsExportButton' }

but position: absolute gets superseded by one of the dtbuttons classes and the button ends up moving vertically upwards if there aren't enough rows to fill the table. Feel like this should be a lot easier than it is, hoping someone can help./

allan

I hate height dependent layout in CSS. It always feels like it should be easier and never is...

but position: absolute gets superseded by one of the dtbuttons classes

Sounds like you need to make your CSS selector more specific. What class is overruling it at the moment?

Another option is to use buttons().container() and insert the buttons container into your own fixed element.

Allan