RadGrid Paging on Multiple Lines but should be on a single line

[Bryan]

I have a basic RadGrid control on a page. I only set the grid property AllowPaging="True" and the only Pager Style is <PagerStyle Mode="NextPrevAndNumeric" />.  When the form loads up the paging is showing on 4 separate lines. I just want it to be on one line like all of the samples.  Any ideas why this is happening?  Do I need to apply CSS?

[Bryan]

 Here's the whole grid code:

 

 

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="true" Width="950px" Height="500px"
                         AllowSorting="true" PageSize="15" AllowPaging="True" ShowGroupPanel="true" OnNeedDataSource="RadGrid1_NeedDataSource">
                        <%--<ClientSettings AllowDragToGroup="True">
                        </ClientSettings>--%>   
                        <ClientSettings>
                    <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="true"></Scrolling>
<%--                    <Resizing AllowRowResize="True" EnableRealTimeResize="True" ResizeGridOnColumnResize="True"
                            AllowColumnResize="True"></Resizing>--%>
                </ClientSettings>
                        <ExportSettings IgnorePaging="true" OpenInNewWindow="true">
                <Pdf PageHeight="210mm" PageWidth="297mm" DefaultFontFamily="Arial Unicode MS" PageTopMargin="45mm">
                </Pdf>
            </ExportSettings>
             <MasterTableView Width="100%" Summary="RadGrid table">
             </MasterTableView>
             <PagerStyle Mode="NextPrevAndNumeric" />                     
                    </telerik:RadGrid>

[Konstantin Dikov]

Hello Bryan,

The issue that you are observing could be caused by a custom CSS that overrides the default styles of the control. Please inspect your CSS and see if you are not clearing the floating of DIV elements with none!important, because this will lead to the issue in question.

In more details, there is a rgWrap class added to the elements in the pager, which will ensure the floating of those elements. If you are overriding that float, this will break the layout. Generally, you could confirm that the problem is due to your custom CSS by adding the following:

<style type="text/css">
    .rgWrap {
        float: left!important;
    }
</style>

Hope this helps.


Regards,
Konstantin Dikov
Telerik

[Bryan]

Looks like there is some kind of conflicting CSS that's overwriting the RadGrid CSS.  Setting that .rgWrap property did bring the paging over to the left.  I also found the property rgInfoPart and floated that to the right.  There's one last piece I'm having trouble with and that's the page size drop down is going to a second line. Do you know a property and what CSS I would need to get it to stay on a single line?

[Konstantin Dikov]

Hi Bryan,

I would highly recommend that you inspect the generated HTML and the applied styles in your browser and see which part of your custom CSS is overriding the default styles of the grid. You should look for properties with "!important" or any other global settings for "div", "span", etc. elements. 

In regards of the RadComboBox, I could only guess what could cause this issue, but one way to reproduce it for example is by settings the span elements to be with "display" set to "block". 



Regards,
Konstantin Dikov
Telerik