Hi folks,
On the Knowledge search page /sp?id=kb_view2, I need to collapse the side bar menu by default so that when the user loads the page, the sidebar menus are collapsed already.
I know that I need to work on the widget Knowledge Query Facet.
In the Html, I can see that the class collapse is used together with the data-target attribute.
From my understanding, it should already collapse the menu by default when the page loads.
Since it does not work as expected, I found a workaround and changed the collapse to collapsing. Now after loading the page, the menus are collapsed but if the user wants to uncollapse the menu, he needs to click on the "-" icon twice while, he should only clicks once.
Could someone helps me with that? I tried to use the link function of the widget but nothing seems to work.
Here is the boostrap documentation I worked with
https://getbootstrap.com/docs/4.0/components/collapse/
default HTML of widget Knowledge Query Facet:
<div ng-show="c.visible">
<div class="kb-facet-block_{{::options.instanceid}} hidden-xs hidden-sm" ng-class="$root.showFacet && !$root.showLanguageFacet ? 'show-this' : 'show-not'">
<div class="panel panel-{{::options.color}}" id="panel_{{::data.instanceid}}" ng-class="{'remove-bottom-border':c.collapse}">
<div class="panel-heading" data-toggle="collapse" data-target="#collapse_{{::data.instanceid}}">
<span class="panel-title">
<button class="transparent-button" id="f_header_{{::data.instanceid}}" aria-label="${Collapse Facet} {{::options.title}}" data-toggle="collapse" data-target="#collapse_{{::data.instanceid}}" aria-label="{{::options.title}} {{data.messages.FILTER_LABEL}} {{data.messages.OPTIONS_LABEL}}">
<span ng-if="::options.glyph"><fa name="{{::options.glyph}}" />
</span><span ng-bind="::options.title"></span>
</button>
</span>
<span class="float-left">
<button class="clear-all transparent-button" ng-show="c.clear" ng-keypress="c.clearSelections($event)" ng-click="c.clearSelections($event)" aria-label="${Clear {{::options.title}} {{data.messages.FILTER_LABEL}}}">${Clear}</button>
<span class="toggle-icon"><i class="fa" id="collapse_icon_{{::data.instanceid}}" ng-class="{'fa-minus-square-o':!c.collapse,'fa-plus-square-o':c.collapse}" aria-hidden="true"></i></span>
</span>
</div>
<div class="collapse" ng-class="::{'in' : !$root.isMobile}" id="collapse_{{::data.instanceid}}">
<div class="facet-template">
<div ng-include="c.data.template" />
</div>
<div ng-if="!c.valid_facet" class="invalid-field">${Error} : {{c.error_text}}</div>
</div>
</div>
</div>
</div>
<style>
/*
* Note: @media only screen doesnt work appropriately, when placed in css secion.
* Considered, html {font-size:10px}
*/
@media only screen and (max-width: 991px) {
.kb-facet-block_{{::options.instanceid}} .facet-query-padding {
padding: 0.9rem 0 0 1.5rem;
border-bottom : 0.1rem solid #DDDDDD;
height : 4rem;
}
}
@media only screen and (max-width: 991px) {
.kb-facet-block_{{::options.instanceid}} .check-icon {
float : right;
font-size: 1.8rem;
display: inline-flex;
padding-right : 1.5rem;
padding-top : 0.2rem;
display:block;
}
}
@media only screen and (min-width: 991px) {
.kb-facet-block_{{::options.instanceid}} .facet-detail{
max-height: 17rem;
padding-top : 0.4rem;
padding-bottom : 0.4rem;
}
}
</style>
Thank you in advance,
Maron
Hi Maron,
you also need to adjust the following highlighted section in the client script:
I hope this helps you further.
Best regards,
Greta
