Style TreeView <li>

[Walter]

What is the best way to have all the red boxes (see pix) aligned to the right of the containing div? No success with floats or flexbox. Trying to mimic ClickOnce app in web SPA. Here's the app.component.sccs at the moment:

#treecontainer { width: 400px; border: 5px dotted black; overflow:hidden; }

div { border: 2px solid blue; }
span { border: 3px solid green; }
span:nth-of-type(3) {border: 3px solid red; float:right;}

[Walter]

https://jsfiddle.net/waltsully/uw1em4rn/ 

A little closer, now need to find the kendo class for the <li> 
I'm still open for suggestions.

[Dimiter Topalov]

Hi Walter,

The most straight-forward approach to right-align the mentioned span elements in the context of the TreeView, seems to utilize the component's templates to provide the desired markup for the nodes:

https://www.telerik.com/kendo-angular-ui/components/treeview/node-template/

... and use the following CSS rules to overwrite the built-in styling:

styles: [`
    >>> .k-treeview-lines .k-mid .k-in {
      width: 100%
    }

    >>> .k-treeview-lines .k-mid .k-in .custom-right {
      position: absolute;
      right: 5px;
    }
  `]

Here is a runnable example demonstrating the described approach:

https://plnkr.co/edit/GuO2OKORQyGIaxUPralE?p=preview

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Walter]

Dimiter,

Awesome! Thanks for the elegant solution and fasssssssssssst response.  

 

:)