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.
16 Answers, 1 is accepted
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

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.

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
;
}
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

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

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

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

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"
/>

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

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

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.
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.
Pavlina
Telerik