Help aligning Count of Entries, Buttons and Search Area

funluckykitty

I'm struggling with trying to get the Show xx Entries, the Buttons and the Search Area aligned from left to right without stacking on top of one another. I'm using a asp.net gridview, Bootstrap, and Datatables. I appreciate any suggestions you might have. (I'm not able to post a link to code, as it's behind the firewall), But I can copy/paste my code and a screenshot of how it looks now, and what I'm trying to accomplish. Is left to right even possible for these three elements?

``` <script>
$(document).ready(function () {
$("#gvTest").prepend(
$("<thead></thead>").append($(this).find("tr:first"))).dataTable({
"pageLength": 2,
//sets the first column as not sortable
"columnDefs": [
{
"targets": [0],
"orderable": false
}
],
//sets the default order of sorting, since it can't be the first column, which is a button
"order": [2, 'asc'],

                        //dom: Bfrtip
                        //Bfrtip
                        "dom": 'Blfrtip',
                        "buttons": [
                             'copy', 'csv', 'excel', 'pdf', 'print']

                    });
            });
        </script>```

colin

Hi @funluckykitty ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

funluckykitty

Hi Colin. I've created a test case... I sure hope I did it right. :-)

What's weird in the test case, is the Show (xx) entries, Buttons, and search don't appear in the test case at all when I do the live view.

Appreciate any suggestions.. Here's the link: http://live.datatables.net/xomepare/1/edit

tangerine

Your test case console is showing 4 errors. You need to fix them.

colin

Yep, as @tangerine says the errors are stopping the scripts from running. layout issues are notoriously hard to resolve without seeing the failure.

funluckykitty

Hi @colin and @tangerine. I believe I've fixed the errors. Can you take a look at it again? http://live.datatables.net/xomepare/2/edit

funluckykitty

@colin and @tangerine ...I believe I messed up my live.datatables link. Try this one to see the formatting that stacks the buttons. I'd like them to be in the same row as the Show xx entries and the search.

http://live.datatables.net/cuhapade/1/edit

allan

Hi,

Thanks for the link! Its this:

'dom':'Blfrtip',

If you have a look at the dom documentation you'll see that the default for Bootstrap is a bit more complex as we use a Bootstrap grid to lay things out. You want to use the Bootstrap default as the basis for your layout.

Its a pain for certain I'm afraid! The good news is that DataTables v2 is going to make that a whole lot easier. But that's going to be 2020 before its released...

Allan

funluckykitty

@allan Thank you Thank you Thank you!!! I've got it working properly now. :-)