Paging design & alignment issue

[Asif]

Dear Support

Please find the attached image and understand the issue. How to make the necessary changes? Please suggest


<telerik:RadGrid ID="RadGrid1" Width="100%" BackColor="Transparent"
                                runat="server" AllowPaging="true" AutoGenerateColumns="false" OnItemCommand="RadGrid1_ItemCommand"
                                OnNeedDataSource="RadGrid1_NeedDataSource" AllowSorting="true" OnItemDataBound="RadGrid1_ItemDataBound"
                                OnItemCreated="RadGrid1_ItemCreated" Skin="Black" BorderWidth="1"  AlternatingItemStyle-BackColor="White"
                                AllowFilteringByColumn="true" OnInit="RadGrid1_Init">
                                <PagerStyle Mode="NextPrevAndNumeric" Position="Bottom" />
                                <GroupingSettings CaseSensitive="false" />
                                <FilterMenu CssClass="FilterMenu" ForeColor="White" />
                                <FilterItemStyle BorderWidth="0px" BorderColor="White" VerticalAlign="Top" HorizontalAlign="Left" />
                                <HeaderStyle Font-Bold="true" CssClass="FontFamily"></HeaderStyle>
                              
                                <MasterTableView DataKeyNames="PID" FilterItemStyle-HorizontalAlign="Left"
                                    CellPadding="0" CellSpacing="0" Width="100%" FilterItemStyle-BackColor="White"
                                    BorderWidth="0" ForeColor="Black" BackColor="White">
                                    <Columns>
                                        <telerik:GridTemplateColumn AllowFiltering="false" ItemStyle-BorderWidth="1px" HeaderStyle-BorderWidth="1px"
                                            HeaderStyle-BorderColor="#666666">
                                            <ItemTemplate>
                                                <img src='../Images/Edit.gif' alt='Edit' class="MouseHoverLink" title='Edit' onclick='<%# "OpenWindow1(" +Eval("PID") + " );" %>' />
                                            </ItemTemplate>
                                            <ItemStyle Width="9%" HorizontalAlign="Left" />
                                            <HeaderStyle Width="9%" HorizontalAlign="Left" />
                                        </telerik:GridTemplateColumn>
                                        <telerik:GridBoundColumn DataField="ShortName" HeaderText="Name" SortExpression="ShortName"
                                            UniqueName="ShortName" Visible="True" ItemStyle-BorderWidth="1px" HeaderStyle-BorderWidth="1px"
                                            HeaderStyle-BorderColor="#666666" AutoPostBackOnFilter="false"
                                            FilterImageUrl="../Images/Telerik/Filter.gif">
                                            <HeaderStyle HorizontalAlign="left" Width="18%"></HeaderStyle>
                                            <ItemStyle HorizontalAlign="left" Width="18%" CssClass="FontFamily"></ItemStyle>
                                        </telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn DataField="Abbr" HeaderText="Abbreviation" SortExpression="Abbr"
                                            UniqueName="Abbr" Visible="True" ItemStyle-BorderWidth="1px" HeaderStyle-BorderWidth="1px"
                                            HeaderStyle-BorderColor="#666666" AutoPostBackOnFilter="false"
                                            FilterImageUrl="../Images/Telerik/Filter.gif">
                                            <HeaderStyle HorizontalAlign="Left" Width="29%"></HeaderStyle>
                                            <ItemStyle HorizontalAlign="Center" Width="29%" CssClass="FontFamily"></ItemStyle>
                                        </telerik:GridBoundColumn>
                                        <telerik:GridNumericColumn DataField="Person" HeaderText="Person" SortExpression="Person"
                                            UniqueName="Person" Visible="True" FilterImageUrl="../Images/Telerik/Filter.gif"
                                            DataType="System.Int32" ItemStyle-BorderWidth="1px"
                                            AutoPostBackOnFilter="false"
                                            HeaderStyle-BorderWidth="1px" HeaderStyle-BorderColor="#666666">
                                            <HeaderStyle HorizontalAlign="Center" Width="18%"></HeaderStyle>
                                            <ItemStyle HorizontalAlign="Center" Width="18%" CssClass="FontFamily" />
                                        </telerik:GridNumericColumn>
                                        <telerik:GridTemplateColumn AllowFiltering="false" HeaderText="Active" ItemStyle-BorderWidth="1px"
                                            HeaderStyle-BorderWidth="1px" HeaderStyle-BorderColor="#666666">
                                            <ItemTemplate>
                                                <asp:ImageButton runat="Server" ID="imgActive" Tag='<%# Eval("IsActive") %>' ImageUrl='<%# GetImage(Eval("IsActive").ToString()) %>'
                                                    CommandName="Active" ToolTip='<%# GetToolTip(Eval("IsActive").ToString()) %>' />
                                            </ItemTemplate>
                                            <ItemStyle Width="17%" HorizontalAlign="Center" />
                                            <HeaderStyle Width="17%" HorizontalAlign="Left" />
                                        </telerik:GridTemplateColumn>
                                    </Columns>
                                </MasterTableView>
                            </telerik:RadGrid>

[Princy]

Hello Asif,

Try the following CSS to achieve your required scenario.
CSS:

<style type="text/css">
.RadGrid .rgWrap
{
  padding:0 0px !important;
}
</style>

Thanks,
Princy.

[Asif]

No change. It is not working.

[Princy]

Hello Asif,

The above CSS eliminates the spacing you have highlighted.  For the second issue make sure that you don't have any global CSS which overrides the default CSS which causes the line under PageSizeComboBox. Also take a look into the following online demo which is working as expected.
Grid / Basic Paging.

Thanks,
Princy.

[Asif]

In all other pages my paging design is proper only these page is causing such issues.

[Galin]

Hello Asif,

Could you try the following CSS rule:

div.RadComboBox table td.rcbInputCell,
div.RadComboBox table td.rcbArrowCell
{
    padding: 0 !important;
}

I hope it helps.


Best wishes,
Galin
the Telerik team