Queue: Alternate Row Colors

  • 1
  • Question
  • Updated 3 years ago
  • Answered
Is it possible to set the rows in the queue to alternate colors?
Photo of Scott

Scott

  • 2,722 Points 2k badge 2x thumb

Posted 4 years ago

  • 1
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
Hi Scott,

So I got bored and ventured a try.  I tried pure CSS but could not get it to completely work.  

.nx-list-contents div:nth-child(odd) {
    background-color: aliceblue;
}
.nx-list-contents div:nth-child(even) {
    background-color: cornsilk;
}

Next, I tried an inline JavaScript and it works as long as the script is executed at the right time.  I am not quite sure what event to subscribe to?  Any way, try this:

(function(skuid){
	var $ = skuid.$;
	$('body').on('tabshow', function(event){
       $(".nx-list-contents .nx-item:odd").css("background-color", "aliceblue");
       $(".nx-list-contents .nx-item:even").css("background-color", "cornsilk");
	});
})(skuid);
(Edited)
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
Hi again,

Try this CSS:

.nx-list-contents .nx-item:nth-child(odd) {    background-color: aliceblue;
}
.nx-list-contents .nx-item:nth-child(even) {
    background-color: cornsilk;
}
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
nice work, Irvin!