Minimize button will not display when box contained in other box

[duanyu5871]

Hello,
I find minimize button will not display when box is maximized both for the box you clicked and box contained in it. Is any method to avoid influence for other box?

Really need your help, Thanks

[DivadNojnarg]

Hi,

This behavior comes from the card binding JavaScript, when the card has an id:

if (isMaximized) {
      $(el)
        .find("[data-card-widget = 'collapse']")
        .hide();
}

This means that when the card is maximized, the collapse button is hidden, which makes sense because no one would like to collapse a card in this situation.

In your case, since you have nested cards, this also applies for the nested card: under the hood, the find method returns all elements having the following attribute [data-card-widget = 'collapse'] within the parent card. So if you had 5 nested cards, you would get 6 elements (5 + the parent collapse icon).

I could technically fix it by only selecting the first element corresponding to the parent card:

$(el).find("[data-card-widget = 'collapse']")[0] ...

Beyond this, I would not recommend nesting cards as it creates confusing user experience and unexpected effects like the one above. Instead you can use tabBox() or accordions/collapsible elements.

Any thoughts @JohnCoene ?

[DivadNojnarg]

Closing as this does not align with design best practices (nested cards). I don't want to encourage this approach.

[duanyu5871]

OK, Thank you anyway. I will try to handle it by myself.