how to give space between checkbox and choice value

ghanashyamm0005

Certified Lead Developer

over 1 year ago

Hi Champ,

I have a requirement where I need to have some space between the checkbox and the choice label. Is it possible ?

For example, I need to have some space between the checkbox and text "abc"

Discussion posts and replies are publicly visible

Top Replies

Stefan Helzle over 1 year ago +2 verified
Certified Lead Developer

Sure. Use char(160) to add some non-breaking spaces.
Sanchit Gupta (Xebia) over 1 year ago +1
Certified Lead Developer

No it is not possible, if you try to add spaces they will be trimmed automatically. I would suggest giving a try to "CARDS" choiceStyle.

Parents

0 Swetha Pokuri

Certified Senior Developer

over 1 year ago

Try with check box choice label as empty and add your labels in the Separate Rich text display field from that you can achieve space between check box and labels .

{
  a!sideBySideLayout(
    items: {
      a!sideBySideItem(
        item: a!checkboxField(
          label: "Checkboxes",
          labelPosition: "COLLAPSED",
          choiceLabels: {
            ""
          },
          choiceValues: {
           1
          },
          saveInto: {},
          validations: {},
          align:"RIGHT"
        ),
        width:"1X"
      ),
      a!sideBySideItem(
        item: a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: {
            
            a!richTextItem(
              text:"ABC"
            )
          }
        )
      ),
      a!sideBySideItem(
        item: a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: {}
        )
      ),
      a!sideBySideItem(
        item: a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: {}
        )
      ),
      a!sideBySideItem(
        item: a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: {}
        )
      ),
      a!sideBySideItem(
        item: a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: {}
        )
      ),
      a!sideBySideItem(
        item: a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: {}
        )
      ),
      a!sideBySideItem(
        item: a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: {}
        )
      ),
      a!sideBySideItem(
        item: a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: {}
        )
      ),
      a!sideBySideItem(
        item: a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: {}
        )
      ),
      a!sideBySideItem(
        item: a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: {}
        )
      ),
      a!sideBySideItem(
        item: a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: {}
        )
      ),
      a!sideBySideItem(
        item: a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: {}
        )
      ),
      a!sideBySideItem(
        item: a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: {}
        )
      ),
      a!sideBySideItem(
        item: a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: {}
        )
      ),
      a!sideBySideItem(
        item: a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: {}
        )
      ),
      
    }
  ),
  
}

Reply

0 Swetha Pokuri

Certified Senior Developer

over 1 year ago

Try with check box choice label as empty and add your labels in the Separate Rich text display field from that you can achieve space between check box and labels .

{
  a!sideBySideLayout(
    items: {
      a!sideBySideItem(
        item: a!checkboxField(
          label: "Checkboxes",
          labelPosition: "COLLAPSED",
          choiceLabels: {
            ""
          },
          choiceValues: {
           1
          },
          saveInto: {},
          validations: {},
          align:"RIGHT"
        ),
        width:"1X"
      ),
      a!sideBySideItem(
        item: a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: {
            
            a!richTextItem(
              text:"ABC"
            )
          }
        )
      ),
      a!sideBySideItem(
        item: a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: {}
        )
      ),
      a!sideBySideItem(
        item: a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: {}
        )
      ),
      a!sideBySideItem(
        item: a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: {}
        )
      ),
      a!sideBySideItem(
        item: a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: {}
        )
      ),
      a!sideBySideItem(
        item: a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: {}
        )
      ),
      a!sideBySideItem(
        item: a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: {}
        )
      ),
      a!sideBySideItem(
        item: a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: {}
        )
      ),
      a!sideBySideItem(
        item: a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: {}
        )
      ),
      a!sideBySideItem(
        item: a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: {}
        )
      ),
      a!sideBySideItem(
        item: a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: {}
        )
      ),
      a!sideBySideItem(
        item: a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: {}
        )
      ),
      a!sideBySideItem(
        item: a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: {}
        )
      ),
      a!sideBySideItem(
        item: a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: {}
        )
      ),
      a!sideBySideItem(
        item: a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: {}
        )
      ),
      
    }
  ),
  
}

Children

No Data