[Solved] Scrollable() causes header column misalignment with many columns

[Rob]

Hi,

I am using an MVC Grid that can have up to 30 columns or so of varying length (20px to 200px), and when I enable Scrollable() on the grid, the header columns misalign with the actual columns as shown in the screenshot.  When I don't enable Scrollable(), there is no problem and everything aligns fine.

With this many columns, I need to enable scrolling horizontally and vertically.  Is there a way to enable scrolling and have the grid take up a certain width on the page and not have the column alignment issue?  I had some problems sizing it using % instead of px, and in any case, enabling scrolling caused the header column misalignment issue.

Thanks,

Rob

[Dimo]

Hi Rob,

In order to achieve horizontal scrolling, you need to specify explicit pixel widths to all Grid columns.

With regard to cell alignment, please verify that:

1. The <table> elements inside the Grid have a table-layout:fixed style applied (by default when scrolling is enabled)

2. The defined columns widths are large-enough to accommodate non-wrappable content (images). Note that if you have a 20px wide image, the column width should be at least 35px, to make up for cell paddings and borders.

3. You have no JS errors on the page

If the problem persists, please provide a runnable demo or a live URL for testing.

Kind regards,
Dimo
the Telerik team

[Rob]

Hi there,

I am now specifying width for all columns, confirmed that there are no javascript errors, confirmed that the table does have a table-layout: fixed style applied, and I changed my column definition to be like so for all icon-based columns (I have like 17):

columns.Bound(o => o.OrderId)
    .Title(string.Empty)
    .ClientTemplate("<img src=\"{0}\" alt=\"Edit Order\" class=\"orderlist-edit\" style=\"border-width: 0px; cursor: hand;\">".Formatted(Url.Content("~/Images/Icons/16/symboledit.png")))
    .HtmlAttributes(new { style = "text-align:center; margin:0px; padding:0px;" })
    .Sortable(false)
    .Width(35);

Additionally, I made the grid .Scrollable(s => s.Height("99%")).  Everything seems to be working OK, with two exceptions. 

1. Telerik MVC Menus are extending into the column next to them as shown in the attached screenshots.  Is there some style tweaks I can apply to prevent this?

2. The columns are still slightly misaligned (see third screenshot).

Note that if I turn off IE 9's compatibility mode, both of these problems go away.  However, with compatibility mode off, the menus do not appear on top and slide behind the next row upon opening up.

Also note that I am doing the following in the open and close events of all the menus so that the menu appears on top instead of underneath a detail row that contains a menu:

On open:

    $j(this).parents('.t-detail-row').css('z-index', +1000);

On closed:

        function menuClosed(e)
        {
            e.stopPropagation();

            $j(this).parents('.t-detail-row').css('z-index', 'auto');
        }

Here is a menu column definition:

columns.Bound(o => o.Status)
.ClientTemplate(Html.Telerik().Menu().Name("menuOrderStatus_<#=OrderId#>")
.Items(menu => menu.Add().Text("<#=Status#>").HtmlAttributes(new { @style = "width:155px;", @class = "orderlist-current-order-status" })
.Items(submenu =>
{
IList<string> orderStatuses = ViewData["AllOrderStatuses"] as IList<string>;
foreach (string status in orderStatuses)
submenu.Add().Text(status).HtmlAttributes(new { @style = "width:155px;" });
}))
.ClientEvents(events => events.OnSelect("menuSelectOrderStatus").OnOpen("menuOpenOrderStatus").OnClose("menuClosed"))
.Effects(fx =>
fx.Expand(animation => animation.CloseDuration(AnimationDuration.Fast).OpenDuration(AnimationDuration.Fast))
.OpenDuration(AnimationDuration.Fast).CloseDuration(AnimationDuration.Fast))
.ToHtmlString())
.Width(155);

And then one more final problem: the menu isn't visible when in the last row of the grid and scrolling is enabled as shown in the final screenshot.  How can I style around this using the menu open events?  Note that the vertical scrollbar does increase correctly and I can use the mouse wheel while the menu is open to scroll down and see the choices... but this won't work from a user perspective.

Any insight is appreciated, thanks!

Rob

[Dimo]

Hi Rob,

I will need a standalone runnable demo in order to reproduce the described issues and research them. Thanks.

Greetings,
Dimo
the Telerik team

[Rob]

Hi Dimo,

Sorry for the delay in a response.  Attached is a project that demonstrates the issues.  Specifically:

1. Column header misalignment
2. Menu item in a column in detail view extends into the column to the right of it
3. Scroll to bottom and mouse over menu item in grid's last row and note that you cannot see the menu items -- though the scrollbar lengthens properly
4. Overlapping menu items between parent row and detail row (I was able to solve this using the z-index css style change on open/close events)

So, the real problems are just 1 - 3.

Thanks,

Rob

[Dimo]

Hi Rob,

Thanks for the project. Here are some guidelines on your issues:

1. The only reason you may get such a slight column misalignment is the hard-coded right padding of 17px for the t-grid-header CSS class. If you are using a "classic" Windows theme, the scrollbar is 16px, so the padding becomes incorrect. This problem is fixed in the latest internal build of our components, where this padding is calculated client-side.

2. The Menu horizontal expansion occurs only in IE7 (IE Compatibility mode). You can avoid it by adding:

*+html .orderlist-current-order-status
{
    width: 100% !important;
}

However, you have a bigger problem, namely - the Grid cells have an overflow:hidden style applied, which prevents the Menu subitems from being visible in all modern browsers. You can resolve this by adding

div.t-grid  td
{
    overflow: visible;
}

3) The Grid scrollable data area prevents the Menu subitems in the last few rows from appearing and this is normal. There is no sensible workaround for this, apart from not using Grid scrolling or not using Menu subitems.


Kind regards,
Dimo
the Telerik team

[Samba]

hi ,
im getting   column misalignment header columns and content  in my telerik grid  it happens in  IE7 only . . and its working fine in IE8
how i can resolve this issue ?

 i added the  code  in my css  file , but its not working for me .

*+html .orderlist-current-order-status
{
    width: 100% !important;
}

please suggest me any solution...