How to reduce blank space to left of ADJACENT text field label?

Ryan Daniels 11 months ago

I have a column layout (shown below with dividers) with text fields with adjacent labels. I need this column layout to be more narrow, but when I make it more narrow, it tries to preserve the spacing to the left of the text field labels and shrinks the text field values. I want the opposite. I need to reduce the blank space to the left labels and keep the size of the text fields.

How can I get rid of the wasted blank space on the left?

Discussion posts and replies are publicly visible

Top Replies

Stefan Helzle 11 months ago +2
Certified Lead Developer

The default components do not support that. You could toy around with a rich text display field, hide the label, and format the text as needed.

Parents

0 Konduru Chaitanya

Certified Senior Developer

11 months ago

Hello Ryan Daniels,

I don't think there is much that you can do for that. May a side by side layout with the input fields having "JUSTIFIED" as label position would do a little. But I am not sure if what you are asking is 100% achievable using Text fields.

May be a Rich text Display field as Stefan suggested would work great!

Below is a small reference how it might appear.

{
  a!columnsLayout(
    columns: {
      a!columnLayout(
        contents: {
          a!richTextDisplayField(
            value: {
              a!richTextItem(text: "LABEL 1 NAME: ", style: "STRONG"),
              char(32),
              a!richTextItem(text: "VALUE 1 HERE", ),
              REPEAT(2, CHAR(10)),
              a!richTextItem(text: "LABEL 2 NAME: ", style: "STRONG"),
              char(32),
              a!richTextItem(text: "VALUE 2 HERE", ),
              REPEAT(2, CHAR(10)),
              a!richTextItem(text: "LABEL 3 NAME: ", style: "STRONG"),
              char(32),
              a!richTextItem(text: "VALUE 3 HERE", ),
              REPEAT(2, CHAR(10)),
              a!richTextItem(text: "LABEL 4 NAME: ", style: "STRONG"),
              char(32),
              a!richTextItem(text: "VALUE 4 HERE", ),
              REPEAT(2, CHAR(10)),

            }
          )
        }
      ),
      a!columnLayout(contents: {})
    }
  )
}

Reply

0 Konduru Chaitanya

Certified Senior Developer

11 months ago

Hello Ryan Daniels,

{
  a!columnsLayout(
    columns: {
      a!columnLayout(
        contents: {
          a!richTextDisplayField(
            value: {
              a!richTextItem(text: "LABEL 1 NAME: ", style: "STRONG"),
              char(32),
              a!richTextItem(text: "VALUE 1 HERE", ),
              REPEAT(2, CHAR(10)),
              a!richTextItem(text: "LABEL 2 NAME: ", style: "STRONG"),
              char(32),
              a!richTextItem(text: "VALUE 2 HERE", ),
              REPEAT(2, CHAR(10)),
              a!richTextItem(text: "LABEL 3 NAME: ", style: "STRONG"),
              char(32),
              a!richTextItem(text: "VALUE 3 HERE", ),
              REPEAT(2, CHAR(10)),
              a!richTextItem(text: "LABEL 4 NAME: ", style: "STRONG"),
              char(32),
              a!richTextItem(text: "VALUE 4 HERE", ),
              REPEAT(2, CHAR(10)),

            }
          )
        }
      ),
      a!columnLayout(contents: {})
    }
  )
}

Children

No Data