Responsive Fuglyness?

bradke

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!

classic12

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.

allan

.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

bradke

Awesome! Thanks Allan!

allan

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

classic12

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

classic12

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.

classic12

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).

allan

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

classic12

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

http://toolfolks.com/surplusAnywhere4/

slate theme

allan

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

tangerine

Thats because I'm stupid , old & tired

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