Collapsible Node Categories

[ioneti]

I have the same problem as @gogo and @Nicolas FR
Did you find a solution? (V2.2.12)

Edit:
I ended up using the solution of @Brettflan
This is actually even better

Which solution?

 

[Brettflan]

Which solution?

I'm guessing the CSS change of icons to chevrons, posted back here:

Collapsible Node Categories

Steve F submitted a new resource: Collapsible Node Categories - Simple collapsible nodes for your users Here we have a simple way to give your users the ability to collapse nodes they are not interested in. Their choices are saved so when they refresh the page or re-visit your site the nodes...

xenforo.com

 

[Joan1211]

Yes, that's correct. Change icons to chevrons.

But it would be very nice if someone could find a solution to fix the issue without having to change the button design.

 

[Joan1211]

@ioneti
Problem solved. I have commented margin-right of &is-active:before

Here is the complete code to have original buttons (not chevrons ones)

/* Node Collapse */
.block--category
{
    .collapseTrigger
    {
        opacity: 0.5;
        transition: opacity 0.3s;
        margin-right: 10px;

        &.is-active:before
        {
            content: "\f205";
            transform: scale(-1, 1);
            //margin-right: -8px;
        }
        &:before
        {
            content: "\f205";
            font-size: 80%;
        }
    }
    .block-container:hover .collapseTrigger
    {
        opacity: 1;
    }
}


.collapsible-nodes
{
        .block-header
        {
            display: flex;
        }
        .block-header--left
        {
            margin-right: auto;
            max-width: 100%;
        }
}
.block-body.block-body--collapsible
{
    transition: all 0.3s cubic-bezier(0.43, 0.01, 0.5, 1.5);
    -webkit-transition-property: all, -xf-opacity;
    transition-property: all, -xf-opacity;
    overflow-y: hidden;
    height: 0;
    -webkit-transition-property: all, -xf-height;
    transition-property: all, -xf-height;
}

 

[ioneti]

@ioneti
Problem solved. I have commented margin-right of &is-active:before

Here is the complete code to have original buttons (not chevrons ones)

/* Node Collapse */
.block--category
{
    .collapseTrigger
    {
        opacity: 0.5;
        transition: opacity 0.3s;
        margin-right: 10px;

        &.is-active:before
        {
            content: "\f205";
            transform: scale(-1, 1);
            //margin-right: -8px;
        }
        &:before
        {
            content: "\f205";
            font-size: 80%;
        }
    }
    .block-container:hover .collapseTrigger
    {
        opacity: 1;
    }
}


.collapsible-nodes
{
        .block-header
        {
            display: flex;
        }
        .block-header--left
        {
            margin-right: auto;
            max-width: 100%;
        }
}
.block-body.block-body--collapsible
{
    transition: all 0.3s cubic-bezier(0.43, 0.01, 0.5, 1.5);
    -webkit-transition-property: all, -xf-opacity;
    transition-property: all, -xf-opacity;
    overflow-y: hidden;
    height: 0;
    -webkit-transition-property: all, -xf-height;
    transition-property: all, -xf-height;
}

Un extra.less?

 

[Joan1211]

Un extra.less?

yes you put this code in extra.less

 

[ioneti]

yes you put this code in extra.less

This works on mobile?

 

[Joan1211]

This works on mobile?

Nope

 

[ioneti]

Nope

in my style, dimension from xenfocus, doesnt work on pc