1
0
-1

Hello,

 I have a Repeat component wrapped in a block. The goal is to limit the size of the block to 300 px once the user adds more than 3 instances of the repeat component and show a scrollbar. So I created a Shared Style with the following CSS:

form[name='form'] {
.showscroll-36529 {
                 max-height: 300px;
                overflow-y: scroll;
}
}

This works fine if I set the shared style at design time and preview; however, what I want to do is have the style applied only when the instance count is greater than 2.

So I added a Dynamic Class rule:

console.log('Number of repeats is ' + data.repeat.length);
if(data.repeat.length>2) return 'showscroll-36529'

However, my class is never applied (I tried many variations for the class naming). I suspect that the shared style is not setup as a CSS class selector but not sure how to proceed.

How can I dynamically apply a shared style to my Block component?

Thank you

 

    CommentAdd your comment...

    1 answer

    1.  
      1
      0
      -1

      You cannot apply shared styles dynamically. The dynamic class rule needs to return the name of a genuine CSS class that you define yourself.

        CommentAdd your comment...