Alignment issues

Qodly Qodly Studio
1

i’ve got a couple of alignment issues that i probably need some help resolving:

  1. in the screenshots, below, notice in the editor how the labels “Number” and “Date” align in the editor but not in the preview.
  2. how do i get the labels for the fields to align with the label for the select box, and how do i get the bottoms of the fields to line up with the bottom of the select box? since each component is a style box, obviously i’m not sure how to get the elements within the styleboxes to align.

Screenshot 2023-12-09 at 16.10.27

Screenshot 2023-12-09 at 16.10.38

2

Hello Mikey!

You’ll have to play around with each component’s css properties in order to make them look-alike (padding, height, flex…)

image
image1157×100 4.43 KB

image
image1769×118 5.36 KB

3

Hello, Fadwa!
the first issue relates to the appearance not being the same, once we are in preview - it looks correct, in the editor, but different, once i am in preview.
i think you are saying, on the second issue, that the only option is to do it manually, due to the way css works, right?

4

The best way I found is to use a Stylebox including the texts, with Flex alignment.

5

the problem is that each of these components are already styleboxes with components inside of them. i’m trying to get the components within the styleboxes to align relative to the elements in another stylebox.
(the first issue, though, is a bug - the form renders one way in studio, but differently in preview)

6

If all your Styleboxes have the same height, you can use Flex at each level and align everything. Or align your styleboxes on top for each box, and use inherit setting.

7

that’s kind-of what i thought @fadwa was saying - gotta do it manually