Column header right-shifted when there are fewer than 11 items

[Steve Fletcher]

My grid is databound with no edit or delete column.  I have scrolling enabled with UseStaticHeaders = True.  I am using the Default2006 skin, but this problem still occurs regardless of the selected skin.

[Dimo]

Hi Steve Fletcher,

I suspect that you are using HorizontalAlign="Right" on some RadGrid objects (e.g. the MasterTableView). Apart from rendering obsolete markup, this property produces unexpected results when used on block-level elements (such as tables) and should be avoided.

Kind regards,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Steve Fletcher]

Dimo,

I don't have anything right-aligned in the grid.  Here's my ASPX code:

<rad:RadGrid ID="dgUserList" runat="server" AllowSorting="True"
    AutoGenerateColumns="False" onsortcommand="dgUserList_SortCommand"
    onselectedindexchanged="dgUserList_SelectedIndexChanged" Height="170px"
    Skin="Default2006" GridLines="None">
    <HeaderStyle Height="20px" HorizontalAlign="Left" />
    <ClientSettings EnableClientKeyValues="True" EnablePostBackOnRowClick="True" EnableRowHoverStyle="True">
        <Selecting AllowRowSelect="True" />
        <Scrolling AllowScroll="True" UseStaticHeaders="True" />
        <ClientEvents OnRowSelected="RowSelected" OnGridCreated="ScrollToSelectedItem" />
    </ClientSettings>
                       
    <MasterTableView DataKeyNames="Corporate_Staff_Id" GridLines="None">
        <Columns>
            <rad:GridBoundColumn DataField="Corporate_Staff_Id" UniqueName="Corporate_Staff_Id" Visible="false"></rad:GridBoundColumn>
            <rad:GridBoundColumn DataField="Formatted_Name" HeaderText="User" ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left" ItemStyle-Width="240px">
                 <HeaderStyle HorizontalAlign="Left"></HeaderStyle>
                 <ItemStyle HorizontalAlign="Left" Width="240px"></ItemStyle>
            </rad:GridBoundColumn>
            <rad:GridBoundColumn DataField="Email_Address" HeaderText="Email Address" ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left" ItemStyle-Width="240px">
                 <HeaderStyle HorizontalAlign="Left"></HeaderStyle>
                 <ItemStyle HorizontalAlign="Left" Width="240px"></ItemStyle>
            </rad:GridBoundColumn>
            <rad:GridBoundColumn DataField="Login_Username" HeaderText="Username" ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left" ItemStyle-Width="160px">
                 <HeaderStyle HorizontalAlign="Left"></HeaderStyle>
                 <ItemStyle HorizontalAlign="Left" Width="160px"></ItemStyle>
            </rad:GridBoundColumn>
            <rad:GridBoundColumn DataField="Inactive" HeaderText="Inactive" ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left" ItemStyle-Width="80">
                 <HeaderStyle HorizontalAlign="Left"></HeaderStyle>
                 <ItemStyle HorizontalAlign="Left" Width="80px"></ItemStyle>
            </rad:GridBoundColumn>
        </Columns>
        <HeaderStyle Height="20px" />
    </MasterTableView>
</rad:RadGrid>


The whole header area is shifted to the right about half the width of the scrollbar.  But only when there are 10 or fewer rows. 

Also, there is no right-shift in FireFox.  In IE, there is no right-shift if I set UseStaticHeaders = False.

[Dimo]

Hello Steve,

Thanks for the RadGrid declaration.

The problem, which I see when I run my test page is caused by the HeaderStyle Height property. It increases the height of the header cells, but there is a background image on the too-right side of the control, which does not expand automatically. Please create a background image, which matches the height of the header cells and set it as a background to the header wrapper like this:

div.GridHeaderDiv_Default2006
{
       background: url(....) 0 0 repeat-x;
}


All the best,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Steve Fletcher]

Dimo,

I removed the Header height settings.  I added the background image as you suggested, but also needed to add the border-top and border-bottom.  With or without border-top and border-bottom, though, the background image is shifted up a couple of pixels (in IE, not Firefox), and because I want a white background for the grid, the shift up is noticeable.  Here's what I added to the style sheet for the Default2006 skin:

div.GridHeaderDiv_Default2006
{
    background: #f7f7f7 url('Img/GridHeaderBg.gif') 0 0 repeat-x;
    border-top: solid 1px #e5e5e5;
    border-bottom: solid 1px #bbb;
} 

I'm using the skin images as shipped with the grid.  No customization on them.  I left all image and cell sizing in the skin style sheet as shipped with the grid.

Any suggestions?

[Dimo]

Hi Steve,

Well, for better results you should edit the image and add the borders as well. The best way to achieve all this is to make a screenshot of RadGrid and cut a portion of a header cell. In this way you will make sure that the custom image is properly sized.

Kind regards,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Steve Fletcher]

Actually, I've abandoned the div background image approach.  I wasn't really spiraling in toward a solution.  There was always problems with image vertical alignment.  Any attempts to fix the vertical alignment with different image sizes or position settings resulted in no image being shown at all.

This works better for me:

div.GridHeaderDiv_Default2006

{

 

text-align: left;

 

}

Now, regardless of the number of items in the grid, the header bar is shifted entirely to the left as it should be.

Let's consider this particular issue closed