Datapager Layout problems in Chrome and Safari

[Jeff Clark]

I am using 2011 Q1 of ASP.NET Ajax tools. I have the following code within a RadListView control for data paging.

<table cellpadding="0" cellspacing="0" width="100%;" style="clear: both;">
    <tr>
        <td>
            <telerik:RadDataPager ID="RadDataPager2" runat="server" PagedControlID="RadListView1"
                PageSize="10">
                <Fields>
                    <telerik:RadDataPagerButtonField FieldType="FirstPrev" />
                    <telerik:RadDataPagerButtonField FieldType="Numeric" />
                    <telerik:RadDataPagerButtonField FieldType="NextLast" />
                    <telerik:RadDataPagerPageSizeField PageSizeText="Page size: " />
                    <telerik:RadDataPagerGoToPageField CurrentPageText="Page: " TotalPageText="of" SubmitButtonText="Go"
                        TextBoxWidth="15" />
                    <telerik:RadDataPagerTemplatePageField>
                        <PagerTemplate>
                            <div style="float: right">
                                <b>Items
                                    <asp:Label runat="server" ID="CurrentPageLabel" Text="<%# Container.Owner.StartRowIndex+1%>" />
                                    to
                                    <asp:Label runat="server" ID="TotalPagesLabel" Text="<%# Container.Owner.TotalRowCount > (Container.Owner.StartRowIndex+Container.Owner.PageSize) ? Container.Owner.StartRowIndex+Container.Owner.PageSize : Container.Owner.TotalRowCount %>" />
                                    of
                                    <asp:Label runat="server" ID="TotalItemsLabel" Text="<%# Container.Owner.TotalRowCount%>" />
                                    <br />
                                </b>
                            </div>
                        </PagerTemplate>
                    </telerik:RadDataPagerTemplatePageField>
                </Fields>
            </telerik:RadDataPager>
        </td>
    </tr>
</table>

The layout works fine in Internet Explorer (9) and Firefox (4) (see datapager ie.png image) but the page x of x section wraps in Chrome (10) and Safari (5) (see datapager chrome.png).

Any ideas on how to fix this?

Thank you.

[Galin]

Hi Jeff Clark,

Resolve the issue with the following CSS:

.rdpWrap .RadInput,
.rdpWrap .rdpPagerButton,

.rdpWrap .rdpPagerLabel

 {

     float: left;   

 }

Kind regards,
Galin
the Telerik team