Overlapping Blocks when moving options around

[stokio]

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:

How do I move the free text box to be below the multi-label boxes? I have naively added a style dictionary to my text input block in an attempt to move it around, but this didn't work.

[ines (Ines Montani)]

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:

Display choice options in columns

With the new global_css option in v1.7, you should be able to add this pretty easily. The options container doesn’t have a human-readable class name at the moment, but you can find the current compiled one by opening your browser’s developer tools: [54] If you’re using a modern browser, the following CSS should be all you need: .c01132 { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; } This will display the contents of that container (i.e. the options) using CSS …

[stokio]

Without the styles, all the options are stacked. I am after columns where labels are in specific columns based on the high level category which they belong to.

I have removed the style from the options and have adjusted to the column format you suggested. This looks better.

Is it possible to determine where the labels sit in this grid? I need an uneven placement, e.g. 2 labels in the first column, 4 in the second, and 3 in a third column.

[stokio]

I actually need 4 columns and have just encountered the following output:

[ines (Ines Montani)]

@stokio

Is it possible to determine where the labels sit in this grid? I need an uneven placement, e.g. 2 labels in the first column, 4 in the second, and 3 in a third column.

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.

Here's an code example that illustrates the idea: Line-based placement (Also, this guide on CSS grid explains it all in more detail.)

@stokio

I actually need 4 columns and have just encountered the following output:

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).

[stokio]

I am sorry that this has deteriorated to me asking CSS questions, but all of the labels are the same class so how would I specify the position? I must be missing something obvious. Thank you!

[stokio]

Ahh I think I have cracked it. The id can be used. Thank you for the help!

[ines (Ines Montani)]

Glad you got it working! (Another option could be to use the :nth-child pseudo class.)