We are using iggrid and the paging control in the grid is getting wrapped when the width of the page layout is small. Do we have an option to apply a scrollbar for the paging control alone?
Attached the screenshot, please find.
Thanks Martin for your reply and the sample source code.
We still have the issue because we are dynamically setting the width for the grid in percentage. We should see the scrollbar based on the width set.
#grid2_pager>div.ui-iggrid-paging {display: inline-block;width: 30%;float: none; }
Hello Prasath,
Does the information that Martin provided resolve your issue? Please let me know if we may be of any further help with this matter.
You can choose between two different approaches:
1. Remove some of the paging interface using the following igGridPaging options: showPagerRecordsLabel, showFirstLastPages, showPrevNextPages2. Use CSS to make the horizontal scrollbar - here are the CSS rules which assume that the grid has ID = 'grid2'
<style> #grid2_pager { white-space: nowrap; overflow-x: scroll; } #grid2_pager>div.ui-iggrid-paging { display: inline-block; width: 400px; float: none; } #grid2_pager_label { float: none; padding-right: 20px; } </style>
<style>
#grid2_pager {
white-space: nowrap;
overflow-x: scroll;
}
#grid2_pager>div.ui-iggrid-paging {
display: inline-block;
width: 400px;
float: none;
#grid2_pager_label {
padding-right: 20px;
</style>
Both of the approaches are demonstrated in the attached sample.
Best regards, Martin Pavlov Infragistics, Inc.