Remove space between Label and field

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.

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: {}
)

}
)

Could you please try ADJACENT:

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

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.

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.

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.