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