I am undertaking multi-label classification and also have a text-input. These are the two view ids which form my block. I am then moving the options around my UI using the style tag, i.e. something like this below
However this results in the options overlapping with the text input box, which I unable to move. This looks as follows:
Hi! How does it look without the styles applied, and what's your intended result?
Setting position: absolute on the option containers will position them absolutely but relative to the first parent element that sets position: relative – this case, the wrapper around the choice block. Since all of its children now have absolute positions, its height is essentially 0. With the options being absolute positioned and overlaying everything else, this results in the layout you see in the screenshot.
If you're trying to achieve a column layout, you ideally want to just style the container element and make it a grid or flex container, instead of manually aligning each child. I've posted and example for a column layout here:
Yes, you can use grid-template-columns to define your grid columns (e.g. 3 columns) and then use grid-column-start / grid-column-end (or grid-column) and grid-row-start / grid-row-end (or grid-row) on each element to define its position in the grid.
The problem here is that the text of the options can't break (because it's one word). So you can either give the whole thing more space by setting a larger cardMaxWidth in your "custom_theme", or you can force the text to break by setting word-wrap: break-word, use a smaller font size/less spacing etc. (depends on what looks better).