UI should update alternate row colors

[netniV]

When you select items that inject more items via show() or hide() the coloring of rows is often out of sync and makes different options appear to combine making it look like a single one. This will likely be a longer term issue to address since it affects a lot of the UI.

[cigamit]

Yea, it's always been a thought. Could be done in theme UI, but it's not a priority to 1.1.36.

[netniV]

a demo of this is available here but it is still work in progress.

[luismrsilva]

I would suggest just using the :nth-child() selector to color odd and even rows/items, like this example. That would eliminate the need for "manually" having to add oddand even class to each row/item and it would update automatically when items are added or removed.

Note that, in the example:

• :nth-child(odd) is equivalent to :nth-child(2n+1);
• :nth-child(even) is equivalent to :nth-child(2n);
• oddand even here are not classes.

[TheWitness]

We've been debating this for a while. It's not a super high priority at the moment, but it's something that is not closed for a reason ;)

[netniV]

I would suggest just using the :nth-child() selector to color odd and even rows/items, like this example. That would eliminate the need for "manually" having to add oddand even class to each row/item and it would update automatically when items are added or removed.

Note that, in the example:

• :nth-child(odd) is equivalent to :nth-child(2n+1);
• :nth-child(even) is equivalent to :nth-child(2n);
• oddand even here are not classes.

I believe I tried something like that, but way back when I first reported the issue, I think rows that existed with either hidden or no height, cause the alternative colouring to still be applied to them, resulting in some random results. But I do prefer using CSS since that takes a lot of work away from manually setting which type it is.

[netniV]

Thinking more, I think it was also from cascade styles and the way some historical HTML layouts have been done.

[luismrsilva]

Thank you for your replies.

I think rows that existed with either hidden or no height, cause the alternative colouring to still be applied to them

I did not think of that (did not know there were "hidden" elements). It does complicate the matter, unfortunately.

[netniV]

Yeah, unfortunately, it's part of the filtering that occurs with jQuery tables. But I am pretty sure my mods would have corrected that by updating the "odd" and "even" row tags. However, that's likely a 1.3 change (I might try and sneak it in early ;-) )

[netniV]

Actually, thinking about this more, we should probably just expand the CSS selectors to not include hidden elements? Not sure if it'll handle that complexity but it's a thought...

[luismrsilva]

Giving it some thought:

• The :nth-child() selector selects based on the index relative to the element's parent, so it also considers hidden elements. .row:not(.hidden):nth-child(2n) does not do the trick. It will simply not style the hidden element, but will still consider it while counting.

• The :nth-of-type() is kind-of the same thing, except it only counts elements of a given type. Unfortunately, "type" does not refer to another selector (which we could use to exclude hidden elements), but to the element's tag, according to my experiments. So it does not work either.

Solutions:

1. One way to use :nth-of-type() would be to wrap the "element to hide" inside a wrapper of another type, so the selector would not consider it in the count. Not sure if <a> is the best tag for a wrapper, but just for the demo: https://jsfiddle.net/bqfz2e31/ Of course this is slightly more complicated than just toggling a class to hide the element, but it's certainly better in terms of performance than having to update odd and even classes on all rows, as it affects less elements; although...

2. It's pretty easy to update odd and even classes using querySelectorAll(), e.g.:

document.querySelectorAll(".row:not(.hidden)").forEach((e, i) => {
	if (i % 2 == 0) {
		e.classList.add("even");
		e.classList.remove("odd");
	} else {
		e.classList.add("odd");
		e.classList.remove("even");
	}
});

Demo: https://jsfiddle.net/egvx2a1f/

Hope this is useful :)

I would do a PR, but I don't have much time and don't know exactly where rows are being shown/hidden.

[luismrsilva]

@netniV is this (solution 2 above) what you meant with "expand the CSS selectors"?

[netniV]

No, I was more thinking of basing it on the class (if there is one) that jQueryUI assigns to elements it hides. But with what you’ve posted not sure that is possible.

[netniV]

A prime place to see this in action is anywhere custom options appear due to a change of another option. One place is SNMP options, depending on if you are v1, v2 or v3, different options are made available.

[netniV]

I tried to have a play with this tonight but unfortunately, when I removed the 'odd' and 'even' row classes from the 'formRow' div elements, applying nth-child or nth-type-of failed to work purely with classes. I tried to achieve that by removing the 'formRow' class when hiding the snmp options which was achieved by changing the layout.js function from $('<row_id>').hide() to $('<row_id>').removeClass('formRow').hide();

Whilst it did remove the formRow class, my CSS selector didn't alter the styling for the element before and after it using:

.cactiTable div.formRow:nth-of-type(odd) { <styling here> }
.cactiTable div.formRow:nth-of-type(even) { <styling here> }

If someone else manages to figure that out I'd be interested to know. Unfortunately, nth-of-type(odd of div.formRow) isn't a valid selector yet as css4 isn't supported by the browsers.

[TheWitness]

This is resolved now.