Grouped buttons are not displayed correctly if some of them are hidden

NikitOS

Well-known member
Licensed customer
Affected version
Any
To be clear, in XenForo out of the box there are no problems with this, since the only use case is grouping always visible buttons:
1723294973608.webp
But I needed to hide some buttons by default and display them via JS. And there is a problem: if the first or last button is hidden, the next or previous ones will have non-rounded borders:
1723295137399.webp

To get around this problem, I wrote the following LESS:
Less:
.fixedButtonGroup
{
    display: inline-block;
    vertical-align: top;
    .m-clearFix();

    &.buttonGroup--aligned
    {
        vertical-align: middle;
    }

    > .button
    {
        float: left;

        &:not(.is-hidden)
        {
            ~ .button,
            ~ .buttonGroup-buttonWrapper > .button
            {
                border-left: none;
                .m-borderLeftRadius(0);
            }
        }

        &:has(~ .button:not(.is-hidden)),
        &:has(~ .buttonGroup-buttonWrapper > .button:not(.is-hidden))
        {
            .m-borderRightRadius(0);
        }
    }

    > .buttonGroup-buttonWrapper
    {
        float: left;

        &:has(.button:not(.is-hidden))
        {
            ~ .button,
            ~ .buttonGroup-buttonWrapper > .button
            {
                border-left: none;
                .m-borderLeftRadius(0);
            }
        }

        &:has(~ .button:not(.is-hidden)) > .button,
        &:has(~ .buttonGroup-buttonWrapper > .button:not(.is-hidden)) > .button
        {
            .m-borderRightRadius(0);
        }
    }
}
There may be a better solution, but I'm not a CSS developer.
 
Back
Top Bottom