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?
+8
Hi
Im having the same problem. Following this thread. Let me know if you post in Ideas Portal-- will upvote!
+2
Hi
Thanks
+8
+2
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).
div.ui-data-browser-controls-bar {display:none!important}
this then gave us this:
Hi
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!
+2
AMAZING! Thanks
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.
+6
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.
+4
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.
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.
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!
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.
Definitely going to use this method to track our CSS code. Thank you!
+4
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
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?
+6
#doc-widget-104 .ui-data-browser-controls-bar {
display:none !important;
}
#doc-widget-105 .ui-data-browser-controls-bar {
display:none !important;
}
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.
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.
+4
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.
Enter your email address or username and password below to log in to Docebo Community. No account yet? Create an account
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.