Treelist Menu Navigation Icons

I have created a custom made sliding menu navigation panel, for which I have built navigation arrows for the .x-treelist-item-expander elements that are supposed to point to the right before an item is selected, and down when the item is hovered over or clicked on. I have the right pointing arrows in place, however, when I hover over them, the down pointing arrows appear above the right pointing arrows instead of in place of them. Screenshots are attached.

Here is the code for the right pointing arrow that appears when the menu is first triggered:

/*right pointing arrow*/
.x-treelist-nav .x-treelist-row .x-treelist-item-expander:before {
display: inline-block !important;
width: 0;
height: 0;
margin-left: .255em !important;
vertical-align: .255em !important;
margin-top: 15px;
content: "" !important;
border-bottom: .3em solid transparent !important;
border-left: .3em solid !important;
border-right: 0 !important;
border-top: .3em solid transparent !important;
}


And here is the code for the down pointing arrow:

/*down pointing arrow*/
.x-treelist-nav .x-treelist-row:hover .x-treelist-item-expander{
display: inline-block !important;
width: 0 !important;
height: 0 !important;
margin-left: .255em !important;
margin-top: 20px;
vertical-align: .255em !important;
content: "" !important;
border-top: .3em solid !important;
border-right: .3em solid transparent !important;
border-bottom: 0 !important;
border-left: .3em solid transparent !important;
}

I have tried playing with the margins and padding of the arrows, but that just pushes the right pointing arrow down a bit while still being visible. Any help or insight would be greatly appreciated!

Hello @rymac, and welcome to Ext.NET forums!

Would you be so kind as to format your post (edit it) and wrap the CSS code blocks in [code][/code] tags?

Then, we'd also need a simple example we could reproduce the issue you're facing in our side. A good starting point for your test case could be the simple TreeList component example in our examples explorer.

To help you understand what we expect from the test case, we have put together three threads with nice tips on doing so. I hope you don't mind spending some time to read thru them:

- Tips for creating simplified code samples
- More Information Required
- Forum Guidelines

In general, I believe your issue is just about double checking how the current CSS settings are done and adapting the classes accordingly to get the result you want; but to be more precise, the above would be required.

Looking forward to your follow-up!

Please find below my reformatted code:

Code:

---


/*right pointing arrow*/
 .x-treelist-nav .x-treelist-row .x-treelist-item-expander:before {
display: inline-block !important;
width: 0;
height: 0;
margin-left: .255em !important;
vertical-align: .255em !important;
margin-top: 15px;
content: "" !important;
border-bottom: .3em solid transparent !important;
border-left: .3em solid !important;
border-right: 0 !important;
border-top: .3em solid transparent !important;
 }

/*down pointing arrow*/
 .x-treelist-nav .x-treelist-row:hover .x-treelist-item-expander{
display: inline-block !important;
width: 0 !important;
height: 0 !important;
margin-left: .255em !important;
margin-top: 20px;
vertical-align: .255em !important;
content: "" !important;
border-top: .3em solid !important;
border-right: .3em solid transparent !important;
border-bottom: 0 !important;
border-left: .3em solid transparent !important;
 }

---

Here is the CSHTML code it corresponds with:

Code:

---


@model MenuBarModel

@{
    string staticMenu = string.Format("<p class='staticMenuOpts'>User Profile</p>" +
        "<p class='staticMenuOpts'>Sign Out</p>");
}

@(Html.X().Panel()
        .ID("pnlSlide")
        .Width(500)
        .Floating(true)
        .Shadow(false)
        .Scrollable(ScrollableOption.Both)
        .LayoutConfig(new VBoxLayoutConfig() { Align = VBoxAlign.Stretch })
        .BaseCls("menuBarItemColor")
        .Items(
            Html.X().TreeList()
                .ID("TreeList1")
                .SingleExpand(true)
                .ExpanderOnly(false)
                .ExpanderFirst(true)
                .BaseCls("topMenuOpts")
                .CtCls("treelist-with-nav")
                .UIName("nav")
                .Listeners(li =>
                {
                    li.SelectionChange.Fn = "handleMenuSelect";
                })
                .Store(
                    Html.X().TreeStore()
                        .ID("storemnu")
                        .AutoLoad(true)
                        .Proxy(
                            Html.X().AjaxProxy().Url(Url.Action("_MenuBar_GetChildren", "MenuBar", new { area = "" }))
                        )
                        .Parameters(p =>
                        {
                            p.Add(new StoreParameter("root", "Standard", ParameterMode.Value));
                        })
                        .Root(
                            Html.X().Node()
                                .Expanded(true)
                                .Children(children =>
                                {
                                    foreach (MenuBar topItem in Model.TopLevelMenuItems)
                                    {
                                        if (!topItem.IsLeaf)
                                        {
                                            children.Add(
                                                Html.X().Node()
                                                    .Text(topItem.DisplayName)
                                                    .Leaf(topItem.IsLeaf)
                                                    .NodeID(topItem.NodeID)
                                            );
                                        }

                                        if (topItem.IsURL)
                                        {
                                            children.Add(
                                                Html.X().Node()
                                                    .Text(topItem.DisplayName)
                                                    .Leaf(topItem.IsLeaf)
                                                    .NodeID(topItem.NodeID)
                                                    .Href(topItem.URL)
                                            );
                                        }

                                        if (topItem.IsMVC)
                                        {
                                            children.Add(
                                                Html.X().Node()
                                                    .Text(topItem.DisplayName)
                                                    .Leaf(topItem.IsLeaf)
                                                    .NodeID(topItem.NodeID)
                                                    .HrefTarget(Url.Content(topItem.Area == "" ? String.Format("~/{0}/{1}", topItem.Controller, topItem.ControllerMethod) : String.Format("~/{0}/{1}/{2}", topItem.Area, topItem.Controller, topItem.ControllerMethod)))
                                            );
                                        }
                                    }
                                })
                        )
                ),
            Html.X().ToolbarFill(),
            Html.X().Panel()
                .ID("staticOpts")
                .BaseCls("staticOptsStyle")
                .Html(staticMenu)
                )
        .Listeners(li =>
        {
            li.BoxReady.Fn = "initSlidePanel";
        })
        .Plugins(
            Html.X().MouseDistanceSensor()
                .Opacity(false)
                .Threshold(25)
                .Listeners(l =>
                {
                    l.Far.Handler = "this.component.el.alignTo(document.getElementById('menuBtn'), 'tl-tr', [0 - App.pnlSlide.getWidth() - 50, 55], true); menuCollapsed = true;";
                })
        )
)

---

I have reviewed the treelist code documentation several times, but can't pinpoint exactly what is producing the right facing and down facing arrows.

@Fabricio

I work with Ryan. He is new to EXT.NET, and didn't realize that this question is in the wrong area. We are currently working in EXT 4.7.1 (not 5.0). I'll try to monitor this thread in case you ask something he may not be entirely familiar with. If it can be moved to the 4.0 forums, please feel free. Or if you'd like us to close this thread and ask over there, we'd be happy to oblige that as well.

Update: Thread was moved to the 4.x forums.

Thank you for moving the discussion Geoffrey.

Ultimately, what Ryan is trying to achieve is building a navigation menu that looks just like the MVC4 TreeList example. We are dynamically adding the nodes based on values stored in our SQL database. We have the functionality working exactly how we want. But we are having issues getting the glyph (expander) to render. We want it to point outward when a node isn't expanded, point down if a node is expanded and just not appear if the node is a leaf (the same look at feel that the example has). He has found the css properties that are setting some of them, but the demo doesn't have to override them, so I am thinking that we are missing something. The rest of the UI looks how we want.

We really appreciate any help you guys can give.

Craig

I was able to get this working by doing the following. However, I'm not sure why the control wasn't doing this natively since the demo did.

Code:

---

.x-treelist-item-expander {
    color: #fff !important;
    font-size: 16px !important;
    width: 18px !important;
    filter: none !important;
}

.x-treelist-item-expanded > * > * > .x-treelist-item-expander::after {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
}

.x-treelist-item-collapsed > * > * > .x-treelist-item-expander::after {
    display: inline-block !important;
    width: 0;
    height: 0;
    margin-left: .255em !important;
    vertical-align: .255em !important;
    margin-top: 15px;
    content: "" !important;
    border-bottom: .3em solid transparent !important;
    border-left: .3em solid !important;
    border-right: 0 !important;
    border-top: .3em solid transparent !important;
}

---

Hello @craigthames and rymac!

Thanks for sharing the outcome, what worked for you, craigthames!

What I was confident about when I seen the example was that only CSS inspection could tell wy exactly the glyphs were not in the expected place; and that the fix would be further trimming CSS to fulfill the layout requirements; which seems to be exactly what you've done.

Quote:

---

Originally Posted by craigthames

I'm not sure why the control wasn't doing this natively since the demo did.

---

Well, if I understand well, you're trying to customize the arrows shown so, it shouldn't be doing it natively (or else you could just 'enable' or something like it... no? And I'm not sure which demo that did implement the arrows you're talking about. If it was the TreeList Overview example, it does not have custom arrows at all. Uses "stock" ones. The only thing it required was to wrap the font awesome if using other theme that does not include the font by default.

Thanks one more time for your feedback and for sharing the solution that works for you! We really appreciate it!