Question

I can’t get my paging buttons: “<< < > >>” to align right.
Here is my GridView:

               <asp:GridView ID="GridView1" ShowHeader="false" AllowPaging="true" PageSize="2"
                                AutoGenerateColumns="false" Width="100%" runat="server">
                                <Columns>
                                    <asp:TemplateField>
                                        <ItemTemplate>
                                           foo
                                        </ItemTemplate>
                                        <ItemStyle CssClass="blah" />
                                    </asp:TemplateField>
                                    <asp:TemplateField>
                                        <ItemTemplate>
                                            bar
                                        </ItemTemplate>
                                        <ItemStyle CssClass="pluh" />
                                    </asp:TemplateField>
                                </Columns>

                                <PagerStyle CssClass="gridpager" HorizontalAlign="Right" />
                                <PagerSettings Mode="NextPreviousFirstLast" FirstPageText="<<" PreviousPageText="<"
                                    NextPageText=">" LastPageText=" >>"  Position="Bottom" />

                            </asp:GridView>

And the CSS style:

   .gridpager, .gridpager td
    {
       padding-left: 5px;
       text-align: right;
    }    

If I remove the PageStyle CssClass and use HorizontalAlign=”Right” on PagerSettings it works, but then I don’t get the padding I need. And specifying both a CssClass and HorizontalAlign like my sample doesn’t work.

What do I need to do?

Thank you!

Answer 1

It looks because of the horrible markup Web Forms outputs. The pager is created as a table within a td. I can get it working with this CSS:

.gridpager table {
    float: right;
}

Edit: glad you got it figured out. I didn’t know if you wanted to do it with pure CSS. I also don’t like the float method much.

Edit 2: Looks like the rendered grid uses the align attribute in the td used for the pager when you use <PagerStyle HorizontalAlign="Right" />