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.

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

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

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

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! 

AMAZING!  Thanks @nick.tosto!

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!

While playing around with CSS is fun, it’s not 100% practical in the sense that things break. Last time I attempted inputting CSS, I managed to hide everything in the backend (I was laughing on the inside)…

Having a simple show/hide option in the widget area should be implemented as this will make life a lot easier and more practical.

Has something changed in Docebo? This does not work for me.

Hmm… I see you have 1700+ lines of custom CSS

Any chance you have something touching that selector with greater specificity earlier on…?

Or perhaps a missing bracket or something that breaks this code?

You could perhaps troubleshoot the second idea by placing that block at the top.

As a side note - I always reserve a space at the top of the CSS window for testing. When I am happy that something works - I will move it to the bottom and comment the start and end of each block with an explanation of what it does.

Placing it at the top means I don’t have to scroll through several hundred lines to find what I am currently testing with.

This is also a reason I end up managing these in an excel sheet that calculates most of it out for me, Things related to same components are obvious and can’t really get in the way. I’m making a note for a potential write up as it comes up from time to time. 

Thank you!! I added the code to the top and it seems to work now. I will have to take a deeper dive into the existing code. Thanks again!

Definitely going to use this method to track our CSS code. Thank you!

It is ESPECIALLY useful if you are doing code applying to multiple custom pages. Basically I end up with a table of the page ID’s and which I just have a column for each grouping of customizations, put an X in the column for the page ID and it auto concatenates the proper series of classes and IDs without fear of mistakes, typos, or missing a page. Little effortful to setup, but super useful when making changes, tracking issues, and adding/removing pages.

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! 

Hi, I would like to know what does it mean?

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

Unfortunately the idea has been closed. It is rather cumbersome to manage everything via CSS especially when you may want the filters on some page and off on others. 

Can everyone on this post up vote and comment on the idea to try to get it reconsidered? 

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

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

@Lydia_Chung - In the sample that @nick.tosto posted -  #doc-widget-104  is an example of an ID used in HTML/CSS. This is shown by the use of the hashtag which refers to an ID.

Each platform widget should have an ID similar to the one shown in the example but you would have to determine what the ID would be for your own widget you desire to modify. They will be numbered differently based on how many you have and what order you made them in and they will all be unique.

Hope that helps.

Hmm, for those that aren’t as comfortable with CSS or don’t have a management system for them so lose track or cause issues on updates, how useful would a wizard be to generate a block of it for you? I do this to a degree for my excel doc I manage in but this thread is making me think of making a version with easier management and inputs and does the formatting for you? This hiding would be an example of a prebuilt option/element.