Best Answer

Hide the catalog search/filter/sort bar

  • 7 June 2021
  • 8 replies
  • 302 views

Userlevel 5
Badge +2

Hi everyone,

I am designing a page that has 3 areas on it depending on what a learner wants to do (attend an ILT, sit on demand eLearning or browse resources).  I am wondering if there is a way to hide the search / filter / sort bar so that there’s not a huge gap between the custom image and the courses appearing:

Is this even possible?

icon

Best answer by nick.tosto 7 June 2021, 17:36

View original

8 replies

Userlevel 7
Badge +6

Hi @np11 some widgets have this option but unfortunately I do not see one for the catalogue widget. It may be possible to do using CSS updates. A good one for the Ideas Submission portal.

Userlevel 2
Badge +1

Im having the same problem. Following this thread. Let me know if you post in Ideas Portal-- will upvote!

Userlevel 5
Badge +2

Hi @np11 some widgets have this option but unfortunately I do not see one for the catalogue widget. It may be possible to do using CSS updates. A good one for the Ideas Submission portal.

Thanks @lrnlab.  Hopefully someone will know how I could hide them using CSS (we have a lot already, but all given to us by others!)

Userlevel 7
Badge +6

@np11 of you know a little about CSS and HTML you can test out some options in development mode on your browser. It takes a little time to figure out exactly what code to suppress but in this mode you can test safely. 

Userlevel 5
Badge +2

@np11 of you know a little about CSS and HTML you can test out some options in development mode on your browser. It takes a little time to figure out exactly what code to suppress but in this mode you can test safely. 

That’s a great idea.  My brain isn’t working today (I blame it on the fact it is Monday!).  I have isolated the DIV and hidden it in the CSS.  The downside is that it will obviously now be hidden for all catalogs and channels (not a problem for us though).

 

@nichole.chandler I used the following code in CSS:  

div.ui-data-browser-controls-bar {display:none!important}

this then gave us this:

 

Userlevel 5
Badge +1

Hi @np11, hiding the bar that appears above the catalog widget should definitely be possible with a little CSS.

If you want the bar to be hidden across all catalog widgets, the following code should work:

doc-widget-course-catalog .ui-data-browser-controls-bar {
display:none !important;
}

However, if you would only like to hide the bars on those two specific catalog widgets, you can do so by targeting those widgets by their ID, which can be found if you right click and inspect element on the widget:

#doc-widget-104 .ui-data-browser-controls-bar {
display:none !important;
}

#doc-widget-105 .ui-data-browser-controls-bar {
display:none !important;
}

Sometimes it can be a little tricky to find but you should eventually be able to see something that looks like this: 

 

You’ll want to replace #doc-widget-104/5 in the CSS above with your own widget IDs.

 

Quick disclaimer - I think this code should work today but with periodic changes to the UI of the LMS, there’s no guarantee that it will work forever. I recommend that you monitor all of the areas that you’ve modified with CSS to ensure that they continue to behave.

 

Hope this helps! 

Userlevel 5
Badge +2

AMAZING!  Thanks @nick.tosto!

Userlevel 2

Thanks for the quick tutorial! This helped clean up our page layout. We’re using a catalog as a “Featured Content” section on our hub page. We’ll rotate these out periodically and only keep 6 courses/Learning Plans in this catalog so there’s no need for a search or filter function in this widget in this use case. We keep it for all other catalogs!

Reply