Skip to main content
Best Answer

Hide Completed courses within a channel widget (display stream)

  • 12 September 2022
  • 23 replies
  • 215 views

Hi,

we are using the channel widget on our Dashboard and we would like to hide the completed courses from the widget, so that they only see courses that they have started or need to start..

I tried to do this with CSS but then I have an empty spot on the list

 

I used the following CSS Code:

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

We do not use the “Courses and Learning plan” widget, because we have multiple content categories and the “Courses and Learning plan” widget shows all assigned courses (so can’t be divided into categories).

Does anybody have an idea how we can hide completed courses from the channel widget?

23 replies

gstager
Rank
Userlevel 7
Badge +6

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.

Greg
gstager
Rank
Userlevel 7
Badge +6

@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…?

Greg
Stephen.Barton
Rank
Userlevel 6
Badge +2

I see what you mean about the gaps @Johfra 

without CSS code

 

with CSS code

 

Johfra
Rank
Userlevel 4
Badge

@gstager 

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

Yes, the filter option would be a workaround!

Cheers,

Johfra

gstager
Rank
Userlevel 7
Badge +6

@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.

Greg
gstager
Rank
Userlevel 7
Badge +6

OK - Give this a try.

I am excited about this one because it was a perfect situation to test out a relatively new CSS selector

:has()

It appears to have worked. Test this out and let me know how it does for you.

/** Hide completed items from the channel **/
/** Oh - and remove the gap while at it **/

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

Here is the before

Here is the after

 

Greg
Johfra
Rank
Userlevel 4
Badge

@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!

gstager
Rank
Userlevel 7
Badge +6

@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

Greg
gstager
Rank
Userlevel 7
Badge +6

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.

Greg
dwilburn
Rank
Userlevel 6
Badge +2

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

gstager
Rank
Userlevel 7
Badge +6

@Johfra - where are we sitting with this?

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

Greg
Bfarkas
Rank
Userlevel 7
Badge +4

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

https://caniuse.com/css-has

Johfra
Rank
Userlevel 4
Badge

@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 

gstager
Rank
Userlevel 7
Badge +6

@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.

Greg
Bfarkas
Rank
Userlevel 7
Badge +4

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

Johfra
Rank
Userlevel 4
Badge

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

@gstager many thanks for your support!!!

Johfra
Rank
Userlevel 4
Badge

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...

gstager
Rank
Userlevel 7
Badge +6

Good news!

Sounds like you have another puzzle to solve now.

Greg
Bfarkas
Rank
Userlevel 7
Badge +4

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

Johfra
Rank
Userlevel 4
Badge

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:

 

Bfarkas
Rank
Userlevel 7
Badge +4

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. 

sfrost
Rank
Userlevel 4
Badge +3

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? 

Stephen.Barton
Rank
Userlevel 6
Badge +2

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;

}

 

 

Reply


Terms & ConditionsCookie settings