The customizing of font color with Fancytree's "extraClasses" feature is not being properly applied

Question

The customizing of font color with Fancytree's "extraClasses" feature is not being properly applied

In my web application, I have a tree that utilizes fancytree. Everything is functioning properly, except for the fact that I need to set the font color to red for certain nodes. I have implemented the use of extraClasses in my JSON, which is successfully applying to the correct nodes as confirmed through the browser's debugger.

While I am able to easily apply CSS attributes such as font-style and background-color, for some reason the font color is not being applied to the base span.fancytree-title. Instead, all nodes are appearing in black.

CSS:

span.OrgDataTreeNotChecked
{
    background-color: #EFFAFA;
    color: red !important;
    font-style: italic;
}

The C# code generating the relevant extraClasses:

if (org.Status == "NotChecked")
    item.extraClasses = "OrgDataTreeNotChecked";

Upon inspection in the browser debugger, the color attribute is clearly present:

Yet, when I inspect the span.fancytree-title, the color is being overridden and displayed in black instead.

Various attempts have been made to solve the issue, such as trying to override the color for those nodes in jQuery within the .init event of the Fancy tree and within the document ready function:

$(".OrgDataTreeNotChecked").closest(".fancytree-title").css({ "color": "red" });

Even the brute force method of setting the color for all .fancytree-title elements was attempted:

$(".fancytree-title").css({ "color": "red" });

However, these attempts proved to be ineffective. I am at a loss for solutions. The font color simply refuses to apply, while all other attributes function correctly. Assistance is greatly appreciated!

jquery css fancytree

Answer 1

Answer №1

After numerous attempts and experimenting with Chrome's "Inspect element" feature, I finally discovered a solution that worked for me:

span.OrgDataTreeNotChecked > span.fancytree-title {
    background-color: #EFFAFA;
    color: red!important;
    font-style: italic;
}

It appears that the additional class specified in the extraClasses parameter is applied to a fancytree-node span that encloses a fancytree-title span, so using the right angle bracket operator was the key to success.

Answer 2

After numerous attempts and experimenting with Chrome's "Inspect element" feature, I finally discovered a solution that worked for me:

span.OrgDataTreeNotChecked > span.fancytree-title {
    background-color: #EFFAFA;
    color: red!important;
    font-style: italic;
}

It appears that the additional class specified in the extraClasses parameter is applied to a fancytree-node span that encloses a fancytree-title span, so using the right angle bracket operator was the key to success.

Answer 3

Answer №2

After much effort, I finally managed to crack it. It may not be the most flawless solution, but it gets the job done.

The nodes don't show up in the DOM until each parent node is expanded, so the collection within $(".OrgDataTreeNotChecked") is actually empty during the tree's init event and the document's ready function.

However, the tree does have an expand event that triggers as each node is expanded. This event initially populates the DOM with the child nodes. To handle this, I had to add the following event handler to the tree:

expand: function(data) {
    $(".OrgDataTreeNotChecked").children(".fancytree-title").css({ 'color': 'red' });
},
...

This code then turns everything red. The reason why I consider it not ideal is because the text briefly appears black on each load before turning red as intended.

It will suffice for now, but if there are any better suggestions out there, please share :)

Answer 4

After much effort, I finally managed to crack it. It may not be the most flawless solution, but it gets the job done.

The nodes don't show up in the DOM until each parent node is expanded, so the collection within $(".OrgDataTreeNotChecked") is actually empty during the tree's init event and the document's ready function.

However, the tree does have an expand event that triggers as each node is expanded. This event initially populates the DOM with the child nodes. To handle this, I had to add the following event handler to the tree:

expand: function(data) {
    $(".OrgDataTreeNotChecked").children(".fancytree-title").css({ 'color': 'red' });
},
...

This code then turns everything red. The reason why I consider it not ideal is because the text briefly appears black on each load before turning red as intended.

It will suffice for now, but if there are any better suggestions out there, please share :)

Answer 5

Answer №3

To customize the style of your tree node in CSS, you can use the following code snippet:

span.fancytree-node.OrgDataTreeNotChecked > span.fancytree-title,
span.fancytree-node.OrgDataTreeNotChecked > span.fancytree-title:hover {
    color: red;
}

Make sure to add your custom class to the li element like this:

<li class="folder expanded">Override CSS style per node
    <ul>
        <li class="OrgDataTreeNotChecked">item</li>
        <li class="folder OrgDataTreeNotChecked">item</li>
    </ul>

You can see a working example of this implementation here:

Answer 6

To customize the style of your tree node in CSS, you can use the following code snippet:

span.fancytree-node.OrgDataTreeNotChecked > span.fancytree-title,
span.fancytree-node.OrgDataTreeNotChecked > span.fancytree-title:hover {
    color: red;
}

Make sure to add your custom class to the li element like this:

<li class="folder expanded">Override CSS style per node
    <ul>
        <li class="OrgDataTreeNotChecked">item</li>
        <li class="folder OrgDataTreeNotChecked">item</li>
    </ul>

You can see a working example of this implementation here:

Answer 7

Answer №4

Perhaps attempting a different approach may resolve the issue at hand.

span.fancytree-title.OrgDataTreeNotChecked
{
background-color: #EFFAFA;
color:red !important;
font-style: italic;
}

Answer 8

Perhaps attempting a different approach may resolve the issue at hand.

span.fancytree-title.OrgDataTreeNotChecked
{
background-color: #EFFAFA;
color:red !important;
font-style: italic;
}

The customizing of font color with Fancytree's "extraClasses" feature is not being properly applied

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

When inline elements are positioned right next to block elements

Display endless data within a set window size

Tips for aligning a Bootstrap row in the center

Issue with Jquery Ajax

Making a JavaScript script compatible with select drop down menus that can handle multiple selections

Uploading and previewing multiple images on a canvas

A jQuery component with built-in event triggers

Missing CSS in dynamically loaded content on IE

The functionality of cloning an object is experiencing issues on a webpage containing jQuery code generated by a PHP script

Styling the navigation bar using CSS and positioning a <div> element underneath

What is the reason the text does not have a border around it?

Is there a way to modify Bootstrap tabs when they are hovered over?

What is the reason for the consistency in the effects of vertical align: text bottom and vertical align: bottom?

Retrieve the input value closest to the selected row

Issue encountered with the triggerWord <input> and JavaScript

Retrieving a variable value from an AJAX call for external use

What is the solution for fixing scrolling while keeping the header fixed and ensuring that the widths of headers and cells are equal?

Acquire Table Element Using Javascript

The $_POST variable is not filled with the information displayed in the payload

Is it a jQuery photo gallery that showcases images sourced directly from a database?