[Solved] Treeview in PanelBar weirdness in IE8 and IIS7

[Donna Stewart]

I have a panelbar with 2 treeviews as panelbar items.  I have the htmlattribute set on each treeview as style = height:550px.  This works great in IE8 with Cassini and in Firefox with IIS7.  But in IE8 with IIS7, the top treeview is blowing out of the panel, listing all of the nodes down the screen, writing over the bottom of the panelbar and the other treeview.  The bottom treeview does the same - just lists every node down the page, with no regard to the height setting.  I've tried setting overflow:auto and using max-height instead of height.  Nothing seems to work.  Does anyone have any ideas as to how to fix this?  I have attached some screen shots to show what I'm talking about.

Thanks for any help!
Donna

Here is the code:

<%Html.Telerik().PanelBar.Name("UsersAndUserGroups").ExpandMode(PanelBarExpandMode.Single) _
            .Items(Function(pitem) pitem.Add().Text("Users") _
            .Content(Sub()
        %><%Html.Telerik().TreeView().Name("Users").ShowCheckBox(True).HtmlAttributes(New With {.style = "max-height:550px;"}) _
            .ClientEvents(Function(evt) evt.OnSelect("loginWebsiteAsUser")) _
                    .ClientEvents(Function(evt) evt.OnLoad("setUserContextMenu")) _
                    .ClientEvents(Function(evt) evt.OnDataBound("setUserContextMenu")) _
                    .ClientEvents(Function(evt) evt.OnCollapse("updateUserTreeViewState")) _
                    .ClientEvents(Function(evt) evt.OnExpand("updateUserTreeViewState")) _
                    .BindTo(CType(Model.userList, IEnumerable(Of UserClass)),
                        Sub(mappings)
                            mappings.For(Of UserClass)(
                            Sub(binding)
                                binding _
                                .ItemDataBound(
                                Sub(item, usr)
                                    Dim isExpanded As Boolean = DirectCast(ViewData("UserExpandedNodes"), String()).Contains(usr.userKey)
                                    If isExpanded Then
                                        item.Text = "<span class='expanded'></span>" + usr.userDisplayName
                                    Else
                                        item.Text = usr.userDisplayName
                                    End If
                                    item.Value = usr.userKey
                                    item.LoadOnDemand = True
                                    item.Encoded = False
                                End Sub)
                            End Sub)
                        End Sub) _
           .DataBinding(Function(dataBinding) dataBinding.Ajax().Select("GetGroupsForUser", "User")).Render()%><%
      End Sub)) _
      .Items(Function(pitem) pitem.Add().Text("User Groups") _
            .Content(Sub()
                %><%Html.Telerik().TreeView().Name("UserGroupNames").ShowCheckBox(True).HtmlAttributes(New With {.style = "max-height:550px;"}) _
                            .ClientEvents(Function(evt) evt.OnLoad("setUserGroupContextMenu")) _
                            .ClientEvents(Function(evt) evt.OnDataBound("setUserGroupContextMenu")) _
                            .ClientEvents(Function(evt) evt.OnCollapse("updateUserGroupTreeViewState")) _
                            .ClientEvents(Function(evt) evt.OnExpand("updateUserGroupTreeViewState")) _
                            .BindTo(CType(Model.userGroupList, IEnumerable(Of SelectListItem)),
                                Sub(mappings)
                                    mappings.For(Of SelectListItem)(
                                     Sub(binding)
                                         binding _
                                         .ItemDataBound(
                                         Sub(item, userGroup)
                                             Dim isExpanded As Boolean = DirectCast(ViewData("UserGroupExpandedNodes"), String()).Contains(userGroup.Value)
                                             If isExpanded Then
                                                 item.Text = "<span class='expanded'></span>" + userGroup.Text
                                             Else
                                                 item.Text = userGroup.Text
                                             End If
                                             item.Value = userGroup.Value
                                             item.LoadOnDemand = True
                                             item.Encoded = False
                                         End Sub)
                                     End Sub)
                                End Sub) _
            .DataBinding(Function(dataBinding) dataBinding.Ajax().Select("GetUsersForGroup", "User")).Render()%><%
      End Sub)).Render()%>

[Dimo]

Hi Donna,

It looks like IE8 switches to Compatibility mode when you run your project under IIS. As a result, a known IE7- bug is triggered, namely - positioned elements inside a scrollable container behave as elements with a position:fixed style.

The workaround is to set a position:relative style to the scrollable container. PanelBar items normally have such style applied, so I suspect that you are using another scrollable container inside.

If you need further assistance, please send us a simple runnable demo or a live URL, so that we can take a look.

Kind regards,
Dimo
the Telerik team

[Donna Stewart]

Dimo,

Setting the style position:relative works!  Thank you so much!

Donna