Remove space between Label and field

Certified Senior Developer

Hello All, 

I want to remove the space between the Label and field values (Screenshot below). Is there any way I can achieve that?

Please let me know if anyone knows how to do that. 

Thanks in advance.

  Discussion posts and replies are publicly visible

  • 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 Slight smile

    Regards,

    Acacio B.

  • 0
    Certified Senior Developer
    in reply to Acacio Barrado

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

  • 0
    Certified Senior Developer
    in reply to Acacio Barrado

    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.

  • 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"