Make a label’s border surround the cell, not just the label text? (CSS)

Arthur

How can I use CSS to have the border on a form label be on the outer edge of the cell containing the label, rather than closely bordering the text of the label?

The below screenshot shows what I’m trying to achieve:

ClaytonM_Decisions

You can create a CSS document to format the border how you’d like, and apply it to the ‘Label Holder Css Class’ of the label, rather than the ‘Css Class’ of the label.

See the below CSS text file for example:

.ExampleLabelCSS

{

        border: 1px solid black;

    Border-radius: 5px;

    color: black;

    font-size: 14px;

   text-align: center;

}

1- In Decisions, go to Settings > Designers > Css > then click ‘Add’

2- Name and upload your CSS text file

3- In the designer form properties, under ‘Style’, check the box next to your CSS file you just uploaded

4- Click on the label you’d like to apply the border to, then within the label’s properties under ‘View’ select the CSS file from the ‘Label Holder Css Class’ dropdown.

5- Your border will surround the label’s containing cell

You can also apply the CSS file to both the ‘Label Holder Css Class’ and ‘Css Class’ at the same time:

For more information on CSS and how to use it with forms in Decisions, please see the below documentation:

Uploading CSS: https://documentation.decisions.com/v8/docs/uploading-css

CSS Examples: https://documentation.decisions.com/docs/pre-defined-css-classes-for-forms

Using CSS in Forms: https://documentation.decisions.com/docs/using-css-in-forms

CSS Properties on Form Controls:

https://documentation.decisions.com/docs/css-properties-on-form-controls