Check Box Option Arrangement

关注

Andrew Runyan

• 2022年04月11日 20:01

We have a check box control in our form with several options. We want to arrange the options horizontally, but this selection puts them side-by-side until each row is filled. Our problem with this is that the check boxes are not aligned.

Is there a way to define the number of options in each row, such as having 3 options per row so that the check boxes are aligned vertically down each row?

0

• 

  Krishna Kumar R

  • 2022年04月13日 10:55

  Hi Andrew,

  Unfortunately, there isn’t an OOTB feature to define the number of options in each row of the checkbox control. However, I achieved the same by using the below CSS snippet:

  .previewCtrlHolder.occupiedControl > .control > .checkboxInput {
       display: grid;
       grid-template-columns: 1fr 1fr 1fr; /* This defines that checkboxes are arranged in 3 columns per row. You can increase/ decrease the column definition based on need. */
       align-items: center;
  }

  Note: The above CSS might not hold well for mobile devices as the options of the checkbox control might get distorted.
  
  Reference Links:
  https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
  https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
  
  

  Preview of the form before providing the CSS:

  

  Preview of the form after providing the CSS:

  

  Hope this helps.

  Thanks

  1

  评论操作 固定链接
• 

  Andrew Runyan

  • 2022年04月14日 15:06

  It might be better for us to keep it as-is, then.

  Thanks for the info, Krishna!

  0

  评论操作 固定链接

请先登录再写评论。