[Solved] RadDataPager Alignment

[Jeff Gorman]

i'm not sure if I'm missing something here or not, but how do I center a RadDataPager???  It seems to always want to align to the left.  Below is the RadDataPager code I'm using.

        <center>
            <telerik:RadDataPager EnableEmbeddedBaseStylesheet="False" ID="RadDataPager2" runat="server"
                PagedControlID="RadListView1">
                <Fields>
                    <telerik:RadDataPagerButtonField FieldType="FirstPrev" />
                    <telerik:RadDataPagerButtonField FieldType="Numeric" />
                    <telerik:RadDataPagerButtonField FieldType="NextLast" />
                </Fields>
            </telerik:RadDataPager>
        </center>

[Rosen]

Hello Jeff,

As you may know paging elements of RadDataPager have float:left set by default. Therefore in order to "push" them you should consider setting padding to the pager container element. Similar to the following:

<style type="text/css">
     div.RadDataPager
     {
         padding-left:30%;
     }
 </style>

All the best,
Rosen
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Jeff Gorman]

That would work if the DataPager was a fixed width, but the width varies based on the number of pages.

[BaiH]

I'm using similar approach too. I have just modified the padding value according to the layout.
I don't think currently there is another solution... maybe a custom skin. If you find one please post it here.

--BH

[Nicolas Fahr]

this might be anothersolution:

div.RadDataPager
{
    float: left;
    left: 50%;
    position: relative;
    background: none;
    border: 0px solid #888;
}
div.RadDataPager .rdpWrap
{
    right: 50%;
    position: relative;
    background-color: yellow;
    height: 30px;
}
div.RadDataPager .rdpWrap input, div.RadDataPager .rdpWrap a
{
    margin-top: 4px !important;
}