locked
Pagers displaying page number way too apart RRS feed

  • Question

  • User1769015664 posted

    I have tried using many css samples from Google but none worked with my code; I am sure there is something I am dong wrong which causes page numbers to display too far part like page number 1 on the left edge and page 2 in the middle of the page.

        <asp:Panel ID="targetpanel" runat="server" Width="" CssClass="collapsePanel">
    
            <asp:GridView ID="dgInfo" CssClass="datatable gridViewPager" Width="100%" runat="server" PageSize="10" BorderStyle="Solid" OnPageIndexChanging="OnPageIndexChanging" 
                    AllowPaging="true" AllowSorting="true" OnSorting="SortRecords" OnRowDataBound="dgOverview_RowDataBound" 
                    OnSelectedIndexChanged="dgOverview_SelectedIndexChanged" CellPadding="1" OnRowCreated="dgInfo_RowCreated">
                <HeaderStyle BackColor="Silver" ForeColor="Black" HorizontalAlign="Center" />
                <PagerStyle BackColor="#99CCCC" ForeColor="#003399" HorizontalAlign="Center"/>
            </asp:GridView>
    
        </asp:Panel>
    
    .gridViewPager td table{
                     margin-right:20px;
                }



    Tuesday, May 30, 2017 5:26 AM

All replies

  • User1769015664 posted

    Any help would be highly appreciated.

    It looks fine in design mode but displays like the following when app is running.

    1                                                                                        2                                                                               3                                                            

    Tuesday, May 30, 2017 10:45 PM
  • User-707554951 posted

    Hi NJ2,
     
    According to your description and code, I used the following code to reproduce your problem.

    However, it seems that it works well with page number displayed normally.

    Code as below:

    <div>
        <asp:Panel ID="targetpanel" runat="server" Width="" CssClass="collapsePanel">
            <asp:GridView ID="dgInfo" CssClass="gridViewPager" Width="100%" runat="server" DataSourceID="SqlDataSource1" PageSize="2" BorderStyle="Solid" 
                    AllowPaging="true" AllowSorting="true" CellPadding="1" >
                <HeaderStyle BackColor="Silver" ForeColor="Black" HorizontalAlign="Center" />
                <PagerStyle BackColor="#99CCCC" ForeColor="#003399" HorizontalAlign="Center"/>
            </asp:GridView>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT * FROM [number]"></asp:SqlDataSource>
        </asp:Panel>
        </div>
    .gridViewPager td table
    {
        margin-right:20px;
    }

    Output screenshot as below:


    Besides, if you want to  display page numbers with more distance between them, you could only modify the css style sheet as follow:

    .gridViewPager td
    {
        padding: 1px;
        width:10%;
    }

    Each number was on a separate cell in a table which is located in the gridview pager footer, so by changing the column size you could get them closer together.
     
    Output screenshot as below:


     
    Best regards

    Cathy

    Wednesday, May 31, 2017 7:37 AM
  • User1769015664 posted

    This is what I get...

    Wednesday, May 31, 2017 9:34 AM
  • User-707554951 posted

    Hi NJ2,

    According to your description, the problem may be related to style conflict.

    So I suggest that you could add !important in your css to improve priority.

    You could refer to as below:

        .gridViewPager td table
    {
        margin-right:20px !important;
    }

    Best regards

    Cathy

    Thursday, June 1, 2017 10:06 AM
  • User1769015664 posted

    it didn't help.

    Friday, June 2, 2017 8:41 AM
  • User-707554951 posted

    Hi NJ2,

    According to the code and image you provided, I tested it and only removed the function in gridview and it worked correctly.

    So I suggest that you could the check whether the "collapsePanel" css style is in conflict with the gridviewPager css style

    Or other css style make difference in your page number display.

    Best regards,

    Cathy

    Monday, June 5, 2017 2:06 AM