Pager bleeds when not enough room

[Sam]

I think this is related to my post here:

http://www.telerik.com/forums/grid-columns-bleed-when-using-bootstrap-theme#PmG5fVVMPku7AAjDa7F2LA

But when using the bootstrap theme, when the pager is longer than the viewport it bleeds and extends past the grid.

See screenshot for what it looks like when there is enough room and when it bleeds.​

[Pavlina]

Hello,

This is a known bug which is already fixed and the fix is available in the latest internal build which you can download from your account. Please excuse us for the inconvenience caused.

Regards,
Pavlina
Telerik

[Sam]

Hi,

I installed version: 2015.2.804.45

And it is still occurring as per my screen shot.

I made sure to clear my IIS cache, VS cache, and browser cache and it still happens...is there a newer internal build I should be using?

Thanks.

[Sam]

I added this css and it scrolls the pager cell which doesn't look quite as bad.

Is there a way to decrease the buttons with the page numbers; so instead of showing 10 buttons, it shows only 5?

.RadGrid_Bootstrap .rgPager > td {
    overflow:auto !important;
}
.RadGrid_Bootstrap td.rgPagerCell {
    overflow:auto !important;
}
.RadGrid_Bootstrap .rgPagerCell {
    overflow:auto !important;
}
.RadGrid_Bootstrap .rgPagerCell .rgWrap {
    overflow:auto !important;
}

[Pavlina]

Hello,

Could you send us the grid declaration, so we can test it locally and find the cause for the issue you are facing? It is possible some custom style you added on the page to break the grid appearance when the bootstrap theme is used.

Regards,
Pavlina
Telerik

[Sam]

The bleeding only occurs with the advanced pager...so I stopped using it and used the simpler pager.

[Pavlina]

Hello,

We tested advanced pager of the grid in the demo linked below with Bootstrap skin selected and it is working properly:
http://demos.telerik.com/aspnet-ajax/grid/examples/functionality/paging/basic-paging/defaultcs.aspx?skin=Bootstrap

If you decide to switch to NextPrevNumericAndAdvanced pager mode again you can check the demo and see what is the difference in your case.

Regards,
Pavlina
Telerik

[Shawn Krivjansky]

Pretty sure the original post was referring to the "NextPrevNumericAndAdvanced" pager option...and not just the "Advanced" pager option.  If you look at your demo page with this pager option... and slowly shrink your browser width to simulate other viewports, you'll see a few bad things... 1) the "Item X to Y of ZZ" seems to be right justified (float right) and DOES "bleed" through everything as the viewport shrinks. 2) Nothing gets stacked, removed, or shifted to other lines the way you might expect (at least) in a bootstrap design/skin.  Therefore, you have bleeding at best and complete overrun outside the grid boundaries for everything else at worst.

At least for the bootstrap skin, I would expect that to be very fluid and stack the elements as the viewport changes... NOT become completely unusable and cram everything into one tiny line if there are enough pages that fill up the area and/or the viewport is small to begin with.  People want to use ONE pager design through an application (presumably the one with the best functionality for their app)...and the number of pages and viewport shouldn't play a part in that decision.  As it is, we either have to dumb-down our pagers to accommodate the most demanding situation (however rare)...else, go through media query hoops to remove the pager pieces that are screwed up at the lower viewports.

It can't be that hard to make things less (one line) rigid and instead to make things fluid across many lines as the viewport dictates.

[Pavlina]

Hi,

May I ask you record a video while testing our online demo following the described steps, so we can see what we are missing out. Once we replicate the problem locally we will be able to assist  you further.

Regards,
Pavlina
Telerik

[Shawn Krivjansky]

It's a little disappointing that my very simple instructions couldn't be followed to reproduce.

At any rate, here is the video showing it:

http://screencast.com/t/ClRt5LrKV

[Cradz]

I've had this same issue and fixed it by reducing the number of page buttons using the PageButtonCount:

 

<PagerStyle Mode="NextPrevNumericAndAdvanced"  Position="TopAndBottom" PageButtonCount="4"  />

[Shawn Krivjansky]

That's a partial solution.  But, even that will have issues at the smaller mobile viewports.  I've tried that with a combination of other media queries (where I completely remove half or more of what gets spit out on the pager line and the smaller viewports), but the fact is... that whole line just isn't optimized at all for a fluid design.  "Optimized" is being generous... more like not designed at all for it.  It needs to be.  A few extra css classes there....certainly with the bootstrap theme and it could be done.

[Pavlina]

Hi,

If you set RenderMode property to Mobile grid will be optimized for mobile devices and you will not encounter this issue. For more information  about mobile rendering you can refer to the online example and help article linked below:
http://demos.telerik.com/aspnet-ajax/grid/mobile-examples/overview/default.aspx?name=overview&utm_source=AJAX+Demos&utm_medium=QRcode&utm_campaign=Ajax_mobile_demos_qrcode
http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/mobile-support/mobile-rendering/overview

Regards,
Pavlina
Telerik

[Cradz]

Yup I set my Render Mode to Mobile as I prefer the look of the mobile version even on desktops.

That's probably why it works fine for me regardless of screen size but I do still have to set a smaller page button count so it doesn't bleed over a containing div. I have a side menu I hide or show depending on screen size or if the user has it enabled and this caused the paging of any data grid in the div to the right to "bleed" over the boundaries of the div.

[Pavlina]

Hi,

When you have so many elements in the grid pager you can add custom media query and hide some of them by setting display:none. Thus you should be able to prevent pager bleeds.

Regards,
Pavlina
Telerik

[Shawn Krivjansky]

I've mentioned that I use media queries on more than one occasion in this thread already (I need to... just so the display doesn't look like crap, but I sacrifice all the functionality because of it).  I can't use the "mobile" render mode because that is only my 10-20% case.  I don't like the idea of crippling the 80% case just because the rendering sucks on the normal rendering modes.

What I (and umm... everybody) need is all the functionality of NextPrevNumericAndAdvanced, but that it doesn't look like crap when you move away from a desktop resolution.

I don't understand that if you are going to have a "bootstrap" theme, why is making something like this more fluid and "bootstrap-like" such a big deal?  I mean... "bootstrap" just isn't about gray and blue buttons. Not asking for the world here... just that things STACK and be fluid instead of running all over themselves. Doesn't seem like a crazy request.

[Pavlina]

Hello Shawn,

We understand your point of view very well, however as the grid is more complex control and it could cover many different scenarios (have different page count, width, height etc.) there is no universal solution to avoid the observed behavior on desktop devices. However, if you isolate the issue you are facing in sample runnable project and send it to us via support ticket we will be able to modify it so that the issue no longer exists in your application.

Regards,
Pavlina
Telerik