Pagination formatting is broken about webgrid

[guruofgentoo]

FWIW, in an app the other day I made the styling around that area a bit more specific:

.datagrid .paging {
    margin-right: 0 !important;
}

.datagrid .paging th, .datagrid .sorting dt {
    font-size: 12px;
}

.datagrid .paging .perpage {
    width: 75px;
}

It looks like there is more happening here, though, with the overlapping, which may have to do with other style elements in the app template you're working with.

[matthiaswh]

I noticed the overlapping also occurring on another project, which has basically no added styles. This makes it difficult to use the sort dropdown as most of its hitbox is covered by the absolute positioned table that should sit below it:

This is a quick fix for the overlapping:

.datagrid form.header {
  min-height: 140px;
}

But the layout for this whole section is pretty archaic, using floats and tables... that also makes it relatively inflexible and easy to break. I took a quick stab at modernizing it using flexbox, which has broad support back to IE11, albeit with a couple of the usual IE bugs. At the same time I attempted to improve the layout to make it more obvious that you need to use the Apply button for all of the elements.

Open to feedback, of course.

[guruofgentoo]

I'm all for fixing the layout so it applies properly in all modern browsers and works with more generic templates. But, moving things around too much will be problematic for some of our larger apps, who have some power users who are used to the layout. IMO we should save broader facelifts for webgrid 2.0, which will have additional options/settings to place.

I'd be fine with having the Apply button in it's own "row", but I think it needs to stay on the left. The vast majority of operations users make in that area are the filters. I have thought it would look better if Sort By were next to its first box, rather than above it, but I'd keep it over to the right, above the pagination controls.