Hello! I need help from specialists.
There is a section with three blocks. A container is added to each block via Input (which contains an icon and text). These containers are added from top to bottom and as soon as the first block is filled, the filling goes to the next block. As soon as the third block is filled, there is no possibility to add and the message “Stop, no more will fit.”) The section and the blocks have fixed sizes.
How do I move the input to the next block?
How do I block input when the third block is full?
The way I would implement it is by storing the list of blocks into an array, and checking its length. If this length is more than a threshold, then prevent the user from adding a new one in a workflow.
To check the fillings of each block, you could also check the length of the text inside the previous block.
Creating a list of blocks will not work, because in the beginning there is a template text, but further the user changes it and it can be more or less than that in the template. I’m initially planning to limit the input to 80 characters, but if less characters are entered, it may leave an empty space. And to start, I’m thinking of figuring out how to move the container to the next column. But how?
You could use a wrap on a flexbox container, then, by setting a specific height to the blocks and the container, each new block will wrap to the next column
I tried fixing containers, unfortunately it doesn’t work that way. Fixing blocks with text is not possible, because there will be a lot of space left or the text will be on the text.
Because Vertical in Webweb’s Layout does not support Warp, only Horizontal supports it, so Warp cannot be realized in vertical layout, but CSS actually supports it. (I’m confused why it’s not supported )
)