[Solved] Displaying Issue of the TreeView in the Telerik PanelBar in IE7

[Wai Kei]

Hi Telerik,

   Currently I have a page in which I am display a telerik treeview control inside the telerik PanelBar. It works fine in all browsers IE8, Chrome, FF 3.6. The issue is with IE7, in which the content area of the panelbar would "spill" out from its size if it contains the treeview control. Please see the attachment for screenshot. Please notice that the PanelBar resides within the Telerik Window but I am not sure if it makes a difference.

   <% Html.Telerik().PanelBar()
        .Name("ToolBar")
        .ExpandMode(PanelBarExpandMode.Multiple)
        .HighlightPath(false)
        .Items(items =>
        {
            items.Add()
                    .Text(Constants.CODING)
                    .Content(() =>
                    {%>
                      <div id="treeArea">
                            <% Html.RenderPartial("~/Views/Shared/List/ucTree.ascx", (Model.Tree)); %>
                        </div>
                      </div>
                <%}).Expanded(true);
            }

Thanks,

Wai

[Dimo]

Hello Wai,

The problem is caused by a browser bug, related to displaying positioned elements inside a scrollable container. The positioned elements behave as if they have a position:fixed style applied.

In your case, the panelbar items are positioned relatively by design with:

.t-panelbar .t-link
{
          position:relative;
}

In order to overcome the problem, please apply a position:relative style to the scrollable container.

Best wishes,
Dimo
the Telerik team

[Wai Kei]

Hi Dimo,

   Thanks for your proposed solution to the browser issue. I tried to apply the style to the telerik window (which is the scrollable container I believe). Unfortunately, it did not fix the problem. Am I doing it correctly? The ucTreeInput.ascx contains other div's as well as the panelBar described in the first message.

    <% Html.Telerik().Window()
        .Name("Window")       
        .Title(" ")
        .Draggable(false)
        .Scrollable(true)
        .Modal(false)
        .Content(() =>
            {%>
            <div style="position:relative">
            <% Html.RenderPartial("~/Views/Shared/Input/ucTreeInput.ascx", Model); %>
            </div>
            <%})
        .Buttons(b => b.Maximize())
        .Width(800)
        .Height(400)
        .Render(); %>

Thank you.

[Dimo]

Hi Wai Kei,

Adding a new <div> will not do any good, because this is not the scrollable element. Scrollable elements have an overflow:auto or overflow:scroll styles applied - you can see them in Firebug or a similar browser tool.

If the scrollable container is a Window component, then use the following CSS rule:

.t-window-content
{
        position:relative;
}

Best wishes,
Dimo
the Telerik team

[Wai Kei]

Hi Dimo,

    Thanks this time after I applied the css it looks so much better! The panelbar control is now within the window component without spilling out. There is still a very minor issue with the treeview content spilling out from the panel bar. I've attached a screenshot. I am not sure which style causes the issue. Is it the treeview or the panelbar? I tried to modify the t-panelbar-content but without any improvement.

   Thanks so much.

[Dimo]

Hello Wai Kei,

By default TreeView item content does not wrap. You can add a scrolling capability to the TreeView container (which is part of the PanelBar) like this:

1. Add a custom CSS class to the "Coding" PanelBar item:

item.Add()
     .....
     .HtmlAttributes(new { @class = "scrollable" })

2. Apply an overflow style to the custom CSS class:

.scrollable  .t-group
{
       overflow:auto;
}


All the best,
Dimo
the Telerik team

[Wai Kei]

Wonderful! Thank you. The issue has been completely resolved!