# Overlapping Blocks when moving options around **URL:** \ **Category:** Uncategorized\ **Tags:** custom, front-end, solved\ **Created:** [February 26, 2020, 1:37pm UTC](https://support.prodi.gy/t/overlapping-blocks-when-moving-options-around/2588 "2020-02-26T13:37:35Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![stokio](https://avatars.discourse-cdn.com/v4/letter/s/e8c25b/32.png) [@stokio](https://support.prodi.gy/u/stokio)\ **Post date:** [February 26, 2020, 1:37pm UTC](https://support.prodi.gy/t/overlapping-blocks-when-moving-options-around/2588/1 "2020-02-26T13:37:36Z")
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 ![Screen Shot 2020-02-26 at 10.42.43](https://us1.discourse-cdn.com/flex020/uploads/prodigy/original/2X/9/90efc8b5f0951e61c23eafc557d45ce2d1abd8ae.png) However this results in the options overlapping with the text input box, which I unable to move. This looks as follows: ![Screen Shot 2020-02-26 at 10.37.04](https://us1.discourse-cdn.com/flex020/uploads/prodigy/original/2X/e/e8935e0c3c1fa7425232b3ca28c91a7df366d51c.png) 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. ---
**Author:** ![ines](https://sea2.discourse-cdn.com/flex020/user_avatar/support.prodi.gy/ines/32/3_2.png) [@ines](https://support.prodi.gy/u/ines)\ **Post date:** [February 26, 2020, 2:22pm UTC](https://support.prodi.gy/t/overlapping-blocks-when-moving-options-around/2588/2 "2020-02-26T14:22:16Z")
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](https://support.prodi.gy/t/display-choice-options-in-columns/496/5): > > 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: 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 …](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) ---
**Author:** ![stokio](https://avatars.discourse-cdn.com/v4/letter/s/e8c25b/32.png) [@stokio](https://support.prodi.gy/u/stokio)\ **Post date:** [February 26, 2020, 3:07pm UTC](https://support.prodi.gy/t/overlapping-blocks-when-moving-options-around/2588/3 "2020-02-26T15:07:53Z")
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. ![Screen Shot 2020-02-26 at 15.03.46](https://us1.discourse-cdn.com/flex020/uploads/prodigy/original/2X/a/a66d01a4bb5adccf9ed6fb3833dc5cb7d6fd88a5.png) 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. ---
**Author:** ![stokio](https://avatars.discourse-cdn.com/v4/letter/s/e8c25b/32.png) [@stokio](https://support.prodi.gy/u/stokio)\ **Post date:** [February 26, 2020, 3:19pm UTC](https://support.prodi.gy/t/overlapping-blocks-when-moving-options-around/2588/4 "2020-02-26T15:19:24Z")
I actually need 4 columns and have just encountered the following output: ![Screen Shot 2020-02-26 at 15.18.52](https://us1.discourse-cdn.com/flex020/uploads/prodigy/original/2X/c/c992baabedcaab4990d61b5bb529ca6de193e887.png) ---
**Author:** ![ines](https://sea2.discourse-cdn.com/flex020/user_avatar/support.prodi.gy/ines/32/3_2.png) [@ines](https://support.prodi.gy/u/ines)\ **Post date:** [February 26, 2020, 3:28pm UTC](https://support.prodi.gy/t/overlapping-blocks-when-moving-options-around/2588/5 "2020-02-26T15:28:15Z")
> [@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](https://gridbyexample.com/examples/example2/) (Also, [this guide on CSS grid](https://css-tricks.com/snippets/css/complete-guide-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"`](https://prodi.gy/docs/api-web-app#themes), 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). ---
**Author:** ![stokio](https://avatars.discourse-cdn.com/v4/letter/s/e8c25b/32.png) [@stokio](https://support.prodi.gy/u/stokio)\ **Post date:** [February 26, 2020, 4:04pm UTC](https://support.prodi.gy/t/overlapping-blocks-when-moving-options-around/2588/6 "2020-02-26T16:04:02Z")
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! ---
**Author:** ![stokio](https://avatars.discourse-cdn.com/v4/letter/s/e8c25b/32.png) [@stokio](https://support.prodi.gy/u/stokio)\ **Post date:** [February 26, 2020, 4:48pm UTC](https://support.prodi.gy/t/overlapping-blocks-when-moving-options-around/2588/7 "2020-02-26T16:48:18Z")
Ahh I think I have cracked it. The id can be used. Thank you for the help! ---
**Author:** ![ines](https://sea2.discourse-cdn.com/flex020/user_avatar/support.prodi.gy/ines/32/3_2.png) [@ines](https://support.prodi.gy/u/ines)\ **Post date:** [February 27, 2020, 2:12pm UTC](https://support.prodi.gy/t/overlapping-blocks-when-moving-options-around/2588/8 "2020-02-27T14:12:05Z")
Glad you got it working! 🙂 (Another option could be to use the [`:nth-child` pseudo class](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child).)