Help aligning Count of Entries, Buttons and Search Area

Help aligning Count of Entries, Buttons and Search Area

funluckykittyfunluckykitty Posts: 6Questions: 2Answers: 0

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>```

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • funluckykittyfunluckykitty Posts: 6Questions: 2Answers: 0

    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

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

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

  • funluckykittyfunluckykitty Posts: 6Questions: 2Answers: 0

    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

  • funluckykittyfunluckykitty Posts: 6Questions: 2Answers: 0

    @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

  • allanallan Posts: 61,436Questions: 1Answers: 10,049 Site admin
    Answer ✓

    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

  • funluckykittyfunluckykitty Posts: 6Questions: 2Answers: 0

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

This discussion has been closed.