Responsive Fuglyness?

Responsive Fuglyness?

bradkebradke Posts: 2Questions: 1Answers: 0

Hi! In responsive mode the 'show' and 'search' both center and stack on top of each other in a kinda fugly way. Aligning them both left on mobile would look way better, any way to change this default behavior? I know, it's pretty nitpicky, but it seems like the only part of DataTables that gets centered and looks a little funky imo. Thanks!

This question has an accepted answers - jump to answer

Answers

  • classic12classic12 Posts: 228Questions: 60Answers: 4

    I was going to post on this as the editor buttons and search on mobile are ugly.

    Can we replace the buttons with a icon ( to save space ) and get them on one line.

    Also add the clear edit box ‘x’ on all edit boxes.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info {
      text-align: left;
    }
    

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

    Yup - completely accept that it isn't to everyone's taste. I don't like it a huge amount either, but I actually prefer it over the left aligned one as the paging works centered I think.

    I couldn't think of a better option at the time!

    Allan

  • bradkebradke Posts: 2Questions: 1Answers: 0

    Awesome! Thanks Allan!

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Can we replace the buttons with a icon

    Yes - there is an example of that here.

    Also add the clear edit box ‘x’ on all edit boxes.

    That's browser and OS dependent. I think IE / Edge will do it in all versions. I'm not sure if there is an option in other browsers to add a clear x to a plain input element.

    Allan

  • classic12classic12 Posts: 228Questions: 60Answers: 4

    Hi Guys,

    a rough layout using awesome fonts.

    Maybe a mobile option to replace the buttons with this.
    Then maybe a Tablet & Desktop version.

    Paging usually looks like old HTML and is ugly...

    I can do any artwork you guys need.

    It looks a lot cleaner and more real estate for rows.

    Cheers

    Steve Warby

  • classic12classic12 Posts: 228Questions: 60Answers: 4

    Is it possible to get the buttons to follow the theme.

    www.toolfolks.com/surplusAnwhere4.com

    I have slate theme but the buttons are grey.

  • classic12classic12 Posts: 228Questions: 60Answers: 4

    https://datatables.net/extensions/buttons/examples/styling/icons.html

    Looks a lot better but on smaller deivces even though I only have 2 buttons they end up with 2 rows and not centred ( fulgy again).

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    I'm getting a 404 on the page you linked to. What theme are you using?

  • classic12classic12 Posts: 228Questions: 60Answers: 4

    Thats because I'm stupid , old & tired and can't write a link correctly

    http://toolfolks.com/surplusAnywhere4/

    slate theme

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    It looks like you are loading both the DataTables default stylesheet and also the Bootstrap / DataTables stylesheet. They are conflicting. Only one should be loaded at a time.

    <link href="nsb/bs/css/dataTables.bootstrap.min.css" rel="stylesheet">
    

    And

    <link href="dataTables.min.css" rel="stylesheet">
    

    which is loading a DataTables download package that uses the DataTables stylesheet.

    Try using the download builder to create a package with just want you need. Files are being loaded multiple times on that page.

    Allan

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

    Thats because I'm stupid , old & tired

    Hey, that's my line. Copyright circa 2012.

This discussion has been closed.