Remove space between Label and field

RE: Remove space between Label and field

Aparajita Singh — Mon, 09 Aug 2021 09:48:35 GMT

If the label positions are unable to provide the correct alignment you can try using side by side layout, with one one item as rich text field containing the label and other item as the field without any label. Keep label position as "Collapsed"

RE: Remove space between Label and field

Acacio Barrado — Mon, 09 Aug 2021 03:40:33 GMT

Hi there,

In relation of align of objects in the UI there is no right answer for it, and you achieve the look an feel that you are looking for in many different ways, you can play with the numbers of columns, width, use side by side, all this sort of things. If you are looking for a two columns more dense you can try side by side, it is not my favorite but you can get some ideas from the code below:

a!localVariables(
  local!homeIn,
  local!mthsHomeIn,
  local!mogIn,
  local!mthsMorg,
  {
  a!columnsLayout(
    alignVertical: "MIDDLE",
    columns: {
      a!columnLayout(
        contents: {
   
          a!sideBySideLayout(
            alignVertical: "MIDDLE",
            items: {
              
              a!sideBySideItem(
                item: a!richTextDisplayField(
                  align: "RIGHT",
                  labelPosition: "COLLAPSED",
                  value: {
                    a!richTextItem(
                      style: "STRONG",
                      text: "1. Homeowner's Insurance Premium"
                    )
                  }
                )
              ),
              a!sideBySideItem(
                item: a!integerField(
                  labelPosition: "COLLAPSED",
                  align: "RIGHT",
                  saveInto: local!homeIn,
                  value: local!homeIn,
                  refreshAfter: "UNFOCUS",
                  validations: {}
                )
              )
            }
          ),
          a!sideBySideLayout(
            alignVertical: "MIDDLE",
            items: {

              a!sideBySideItem(
                item: a!richTextDisplayField(
                  align: "RIGHT",
                  labelPosition: "COLLAPSED",
                  value: {
                    a!richTextItem(
                      style: "STRONG",
                      text: "2. Mortgage Insurance Premium"
                    )
                  }
                )
              ),
              a!sideBySideItem(
                item: a!integerField(
                  labelPosition: "COLLAPSED",
                  align: "RIGHT",
                  saveInto: local!mogIn,
                  value: local!mogIn,
                  refreshAfter: "UNFOCUS",
                  validations: {}
                )
              )
            }
          )
        }
      ),
      a!columnLayout(
        contents: {
          a!sideBySideLayout(
            alignVertical: "MIDDLE",
            items: {
              a!sideBySideItem(
                /*width: "1X",*/
                item: a!richTextDisplayField(
                  align: "RIGHT",
                  labelPosition: "COLLAPSED",
                  value: {
                    a!richTextItem(
                      style: "STRONG",
                      text: "mnts"
                    )
                  }
                )
              ),
              a!sideBySideItem(
                width: "3X",
                item: a!integerField(
                  labelPosition: "COLLAPSED",
                  align: "RIGHT",
                  value: local!mthsHomeIn,
                  saveInto: local!mthsHomeIn,
                  refreshAfter: "UNFOCUS",
                  validations: {}
                )
              ),
              a!sideBySideItem(
                width: "2X",
              )
            }
          ),
          a!sideBySideLayout(
            alignVertical: "MIDDLE",
            items: {
              a!sideBySideItem(
                item: a!richTextDisplayField(
                  align: "RIGHT",
                  labelPosition: "COLLAPSED",
                  value: {
                    a!richTextItem(
                      style: "STRONG",
                      text: "mnts"
                    )
                  }
                )
              ),
              a!sideBySideItem(
                width: "3X",
                item: a!integerField(
                  labelPosition: "COLLAPSED",
                  align: "RIGHT",
                  value: local!mthsMorg,
                  saveInto: local!mthsMorg,
                  refreshAfter: "UNFOCUS",
                  validations: {}
                )
              ),
              a!sideBySideItem(
                width: "2X",
              )
            }
          ),

        }
      ),
      a!columnLayout(
        width: "EXTRA_NARROW"
      )
    }
  )
  }
)

Once again, there is many different to align your UI and is all about following the definitions of your project and try around different approaches.

RE: Remove space between Label and field

sharathp0002 — Mon, 09 Aug 2021 00:22:55 GMT

Hi, I have tried "ADJACENT". But this is giving space before the field label.

As per the requirement, we do not need space either before or after the label.

Sorry for not giving enough information in my previous response.

RE: Remove space between Label and field

Acacio Barrado — Mon, 09 Aug 2021 00:05:13 GMT

Could you please try ADJACENT:

        a!integerField(
          label: "mnts",
          labelPosition: "ADJACENT",
          align: "LEFT",
          saveInto: {},
          refreshAfter: "UNFOCUS",
          validations: {}
        ),

RE: Remove space between Label and field

sharathp0002 — Mon, 09 Aug 2021 00:00:37 GMT

Hi Acacio, Thanks for the response. Please see the code below.

I am using a column layout. I would like to remove the space between the Field label and value. Please let me know if you need more information.

a!columnLayout(
contents: {
a!integerField(
label: "mnts",
labelPosition: "JUSTIFIED",
saveInto: {},
refreshAfter: "UNFOCUS",
validations: {}
)

}
)

RE: Remove space between Label and field

Acacio Barrado — Sun, 08 Aug 2021 23:43:53 GMT

Hi there,

The solution to remove the space highlighted depends of how the Sail was implemented is it possible for you to share that piece of the code?

Just looking to the screenshot I don't see how you could insert that gap using a normal text field, perhaps you have an side by side layout, but whatever I say would be only a guess without the code.

If you share more context, I can try to provide a better advise 🙂

Regards,

Acacio B.