Home / Community & Support / Developer Productivity Tools Forums / Telerik MVC Extensions (superseded) > PanelBar > Treeview in PanelBarItem - Using code behind

• Mikkel

  Posted on Jan 13, 2012 (permalink)

  Hi there,
  
  I am building a PanelBar with a TreeView inside each PanelBarItem, using code behind in a custom class.
  
  It all works fine, except when I set the Url property for a TreeViewItem, css styles of the TreeView seem to mess up (both in IE8 and FF6) - see attached image.
  
  I can see that in your telerik.common.min.css, the style below is responsible for the wide left margin, however it does not account for the rest of the messed up layout - am I doing something wrong, or is this a "css bug"?
  
  

  .t-panelbar .t-group .t-group .t-link{padding-left:2em}

  
  
  

  Attached files

  • Sample.jpg

• Dimo Dimo

  Posted on Jan 16, 2012 (permalink)

  Hello Mikkel,
  
  The common CSS code does not support all possible nesting scenarios, because this will increase the stylesheet size too much with no real benefit for the majority of developers. In your case, please add the following rule to override the padding for the TreeView items:
  
  

  .t-panelbar .t-group .t-group .t-treeview .t-link{padding-left:0}

  
  
  Regards,
  Dimo
  the Telerik team

  If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now

• Mikkel

  Posted on Jan 16, 2012 (permalink)

  I tried that, but it is not enough - the TreeViewItems are still "jumping around" when I hover the mouse over them...
  

• Dimo Dimo

  Posted on Jan 16, 2012 (permalink)

  Hello MIkkel,
  
  You should adjust (reenforce)  the hover / selected states in a similar fashion. Please use the following code instead of the one provided before.
  
  
  

  .t-panelbar .t-group .t-group .t-treeview .t-in

  {

      padding: 2px 4px 2px 3px;

  }

   

  .t-panelbar .t-group .t-group .t-treeview .t-state-hover,

  .t-panelbar .t-group .t-group .t-treeview .t-state-selected

  {

      border-style: solid;

      border-width: 1px;

      padding: 1px 3px 1px 2px;

  }

  
  
  All the best,
  Dimo
  the Telerik team

  If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / Telerik MVC Extensions (superseded) > PanelBar > Treeview in PanelBarItem - Using code behind