Question

Hiding global search tabs

  • 2 December 2022
  • 6 replies
  • 66 views
L
Rank
Userlevel 2

Hello all, I would like to be able to remove some of the tab options from the global search.  Does anyone know of the CSS code that I could use?  

Thank you in advance.

Lisa

6 replies

I
Rank
Userlevel 5
Badge +2

Hey there! Give this a try.

Right-click the element you want to remove and click inspect.

 

On the inspector, click the ellipsis and select copy selector.

 

You’ll get something that looks like this.

#doc-layout-page-content > ng-component > lrn-global-search > dcb-ui-tabs-horizontal > div > dcb-ui-tabs-horizontal-header > div > div:nth-child(3) > dcb-ui-tabs-horizontal-header-item:nth-child(4)

Then use can use the following CSS to remove it.

#doc-layout-page-content > ng-component > lrn-global-search > dcb-ui-tabs-horizontal > div > dcb-ui-tabs-horizontal-header > div > div:nth-child(3) > dcb-ui-tabs-horizontal-header-item:nth-child(4) {
    display: none;
}

 

Annarose.Peterson
Rank
Userlevel 7
Badge +5

Thank you for sharing this @IanMonk , so if for example, we wanted to only have the Course Catalog tab show up on global search, we could possibly use something like:

/*test to remove tabs on global search*/
#doc-layout-page-content > ng-component > lrn-global-search > dcb-ui-tabs-horizontal > div > dcb-ui-tabs-horizontal-header > div > div:nth-child(3) > dcb-ui-tabs-horizontal-header-item:nth-child(1) {
    display: none;
}

#doc-layout-page-content > ng-component > lrn-global-search > dcb-ui-tabs-horizontal > div > dcb-ui-tabs-horizontal-header > div > div:nth-child(3) > dcb-ui-tabs-horizontal-header-item:nth-child(2) {
    display: none;
}

#doc-layout-page-content > ng-component > lrn-global-search > dcb-ui-tabs-horizontal > div > dcb-ui-tabs-horizontal-header > div > div:nth-child(3) > dcb-ui-tabs-horizontal-header-item:nth-child(3) {
    display: none;
}

#doc-layout-page-content > ng-component > lrn-global-search > dcb-ui-tabs-horizontal > div > dcb-ui-tabs-horizontal-header > div > div:nth-child(3) > dcb-ui-tabs-horizontal-header-item:nth-child(5) {
    display: none;
}

#doc-layout-page-content > ng-component > lrn-global-search > dcb-ui-tabs-horizontal > div > dcb-ui-tabs-horizontal-header > div > div:nth-child(3) > dcb-ui-tabs-horizontal-header-item:nth-child(6) {
    display: none;
}

Or is there a better way to concatenate that?

Annarose Peterson (She/Her)
I
Rank
Userlevel 5
Badge +2

I’m not a CSS expert, but that’s where I’d start. I might include a comment for each indicating exactly what each tab the CSS is targeting and removing. 

 

I’m not sure if this a better way to concatenate, but you could group your selectors like this too.

#doc-layout-page-content > ng-component > lrn-global-search > dcb-ui-tabs-horizontal > div > dcb-ui-tabs-horizontal-header > div > div:nth-child(3) > dcb-ui-tabs-horizontal-header-item:nth-child(6),#doc-layout-page-content > ng-component > lrn-global-search > dcb-ui-tabs-horizontal > div > dcb-ui-tabs-horizontal-header > div > div:nth-child(3) > dcb-ui-tabs-horizontal-header-item:nth-child(5), #doc-layout-page-content > ng-component > lrn-global-search > dcb-ui-tabs-horizontal > div > dcb-ui-tabs-horizontal-header > div > div:nth-child(3) > dcb-ui-tabs-horizontal-header-item:nth-child(4) {
    display: none;
}


Here I am simply combining the selectors on a single line and separating them by a comma:

#selector1, #selector2, #selector3 {
    display: none;
}


I find this harder to read and comment on. Someone with more CSS background could probably identify a better way. 

Bfarkas
Rank
Userlevel 7
Badge +3

Word of warning, those identifiers are deep and based on not one but two relative classes (the nth-child() ones). If Docebo releases an update that moves the tab order, adds new tabs, etc. this will begin hiding the wrong tabs and showing the hidden ones again.

 

 

Annarose.Peterson
Rank
Userlevel 7
Badge +5

Word of warning, those identifiers are deep and based on not one but two relative classes (the nth-child() ones). If Docebo releases an update that moves the tab order, adds new tabs, etc. this will begin hiding the wrong tabs and showing the hidden ones again.

Thank you @Bfarkas, it’s good to know of potential issues like this!

Annarose Peterson (She/Her)
Bfarkas
Rank
Userlevel 7
Badge +3

I have not tried it, but just looking at the block, you could probably trim each entry down to just this, which limits the risk level since far fewer classes and only one relative entry instead of two:

.dcb-ui-tabs-horizontal-header-item:nth-child(4) {
    display: none;
}

 

Reply


Terms & ConditionsCookie settings