Forum Discussion

StephenB's avatar
StephenB
Executive
8 years ago

Hiding option in search granularity with CSS, but it still displays on IE

Hi everyone,

 

I've run into a little issue and am hoping someone can provide some insight.

 

Our community has the TKB feature enabled, however we are not using it at the moment (nor have we set it up).

 

I was able to hide the "Knowledge Base" option from the search drop down list with the following CSS, which hides it when using Google Chrome, however the option still appears when using IE11 & Firefox v51.0.1.

 

#lia-body .lia-content select.lia-search-form-granularity.search-granularity option[title="Knowledge Base"] { display: none; }

Any information or suggestions would be greatly appreciated!

 

Thanks,

Stephen

  • cike's avatar
    cike
    Champion
    8 years ago

    Hi StephenB,

     

    from a birds view your CSS definition looks correct. Maybe IE11 and FF have some troubles with the space in your title value.

     

    We did something similiar in our community in the past. But we used the title attribute instead of the value attribute for our selection:

     

    #lia-body .lia-content select.lia-search-form-granularity.search-granularity option[value="tkb|tkb"] { display: none; }

    Regards,

    Christian

    • StephenB's avatar
      StephenB
      Executive
      8 years ago

      Thanks cike.

       

      I tried your suggestion, however Firefox & IE still show the tkb option. I also tried setting the visibility property to hidden, but that didn't work either. After some more digging online, it would seem that I'm not the only one experiencing this.

      • cike's avatar
        cike
        Champion
        8 years ago

        Well, I also saw some other posts on this topic. It seems that IE doesn't support display settings on <option>-tags.

         

        As an alternative, you can add small JavaScript/jQuery snippet which hides/removes the TKB option from the DOM:

         

        $('#lia-body .lia-content select.lia-search-form-granularity.search-granularity option[value="tkb|tkb"]').hide();

        You may take a look at the remove and/or detach methods of jQuery.