Custom styling update from MX7 to MX8

0
Hello all! I have a problem with my custom styling with upgrading from mendix 7 to mendix 8. We have a schedule page on mobile phones tha look like the pictures. We have a header where the title and location are visible. Sometimes, de title is too long and we wrap it wit three dots, but when we open the groupbox we want it to be fully visible. In mendix 7, we created our own 'groupbox' with a boolean attribute that shows a container (or not). That container has a class .item-info-extra and when that class is visible, we detect that in our CSS and make things fully visible (see first 2 screenshots). In mendix 8, we can't use this 'hack' anymore so I decided to use a groupbox instead. However, we still need the title to become fully visible when the groupbox is expanded. I wanted to do that with te .collapsed class in the same way, but it won't work. This is the code: .item-onderwerp + script + .smart-groupbox:not(.collapsed){ overflow: visible; span{ white-space: normal; } } Can someone help me to fix this? Thanks in advance!
asked
2 answers
1

Hi Lisa,

Perhaps the following code will work for you:

.item-onderwerp ~ .smart-groupbox {
    overflow: visible;
    span {
        white-space: normal;
    }
}

.item-onderwerp ~ .smart-groupbox.collapsed {
    overflow: hidden;
    span {
        white-space: <your-value>;
    }
}

I’ve replaced the + script + with the ~ sign. Which is the subsequent-sibling element selector.

So instead of overwriting it when it is not collapsed, I would suggest to overwrite when it is collapsed.

Cheers,

Jeffrey

answered
0

Hi Jeffrey,

Thanks for replying. I see that he can find the class now, but I need to change the class within .item-onderwerp and now I got the groupbox class selected, how to get within the .item-onderwerp class?

Thanks!
Lisa

answered