Hide Completed courses within a channel widget (display stream)

Give this a shot and be sure to test for any glitches.

/** Hide a completed course from a channel **/

#doc-page-97 doc-widget-channels ui-card.ui-card-status-done {
    display: none;
}

Also - you may offer filtering as an option if you allow showing in on your widget. Then the user can filter out their completed courses.

Hope this helps.

@Johfra - I went back and tested your code and it seems to work fine on my platform.

Mine only offers - perhaps some extra specificity at best.

To be fair - the image you provided does not show any completed courses so … 

Maybe a hard refresh…?

I see what you mean about the gaps @Johfra 

without CSS code

with CSS code

@gstager 

Unfortunately this didn’t work, I still have the empty area :-(

Yes, the filter option would be a workaround!

Cheers,

Johfra

@Stephen.Barton - that pic really helps

@Johfra - my apologies - I totally missed the part about the gaps.

When I tested on my platform - I only had completed ones listed.

I will go back to the drawing board and see if I can discover anything.

@gstager 

I tried it but unfortunately without a positive result. The completed course is still shown (so no empty gap, the completed course is still visible).

I first tried it without “!important” and then with it, but both didn’t do anything. Interesting to know why it works on your side and not on our side...

Code:

#doc-page-97 ui-carousel-item:has(.ui-card-status-done) {
    display: none !important;
}

Many thanks for thinking along!

@Johfra What browser?

I suppose it is possible that the :has() selector still does not have full browser support.

I am using Brave - which is a derivative of Chrome

Perhaps test another browser or two if you can.
Clear cache
Hard refresh

As an afterthought - also make sure that you don’t have some other code downstream that is overriding.

Sometimes folks will try multiple things - which is fine - just gotta remember to delete the old stuff that didn’t work right.

Very interesting. Something like this would be a great feature. A check box or such to hide completed.

@Johfra - where are we sitting with this?

Did you get a chance to try another browser or two?

Looks like this one is on the cusp of usability for broad browser support:

https://caniuse.com/css-has

@gstager,

yes I tried it with other browsers, but it still pops up. I checked the specificity and when I hover over the element, the tool displays that it has a specificity of 1, 2, 1

I checked the specificity of other Elements, and they all have a lower specificity (e.g. 0, 1, 0 or 1, 1, 0). I also opened the debugger and tried to find the specificity of the element, but it isn’t shown in the debugger.

I am no CSS specialist but I understand code quite well (CSS, HTML 5) but I do not know what this “1, 2, 1” means. Do you know this?

Kr,

Johfra 

@Johfra 

When multiple rules in that big list of CSS code touch the same element - the rule with the highest specificity should take priority.

The comma separated values are an indication of how that specificity is broken down and calculated.

In a value such as 1,2,1 

There would be 1 ID reference (value 100 each or 1,0,0)

There would be 2 class, pseudo, or attribute references (value 10 each or 0,2,0)

There would be 1 element reference (value 1 each or 0,0,1)

This is then rendered as 1,2,1

An inline style would have a value of 1000 (1,0,0,0)

!important would override all.

In cases where the specificity is the same - the rule which comes later is applied.

Hopefully that makes sense.

The code does seem to work - so I am less inclined to suggest a browser issue so it seems to me that you perhaps have something else that is winning the specificity battle in your code where that is not a conflict in mine.

Can confirm it works over here too Greg, so most likely a conflict of other customizations.

I already checked the code but I will go through it again, to see if I missed anything. 

@gstager many thanks for your support!!!

I have no clue why, but since today the code seems to work. The funny thing is that I did not change the code 🤣

The only difference is that I am using a different computer...

Good news!

Sounds like you have another puzzle to solve now.

Sounds like a cache load issue potentially. Happens to folks while making changes and testing.

Puzzle solved, my organisation didn’t update Chrome browser, after updating it, the completed courses are hidden.

Within Firefox the :has selector needs to be activated manually within the about:config. After enabling the :has selector within Firefox I tried it again and it only removed the first one. The second one is still there and within the channel the completed courses are also not hidden.

I also checked the behavior in Edge and also here, all completed courses hidden, so only within Firefox the code doesn’t work properly.

Browser that support the :has selector:

yup, like I said above it’s on the cusp of being usable but I don’t know I’d go crazy just yet with it. 

I tried this and it’s not working for me… :( My test users has completed the content… but it’s still showing in the carosel.

Any ideas whats happening? 

Hello, 

Until a few months ago this was working amazingly well, but something has obviously changed in the system. if @Bfarkas or someone has any suggestions to offer, I’d be most grateful.

/** Hide completed items from the channel **/

/** Oh - and remove the gap while at it **/

#doc-page-64 ui-carousel-item:has(.ui-card-status-done) {

    display: none;

}