Fieldgroup border

Support
#1

Please i need some help with this. I can’t seem tofind out how to add the css class.

The border attribute can be set either to hidden or visible . Default is hidden . If set to visible , the fieldGroup component is highlighted with a border. In the web implementation of the component, displaying a border is done by adding the cuba-fieldgroup-border CSS class.

Any help please?
Regards
Lloys

#3

Hi @LloydS,

You don’t need to add a cuba-fieldgroup-border class yourself. In order to set the borders for the FieldGroup component you need to add border attribute in the XML descriptor or in screen controller and the CUBA platform will add the necessary cuba-fieldgroup-border class.

You can set the value for border attribute in XML descriptor or in screen controller:

  • XML descriptor
<fieldGroup id="fieldGroup" datasource="customerDs" border="visible">
    <column width="250px">
        <field property="name"/>
    </column>
</fieldGroup>
  • Screen Controller
public class CustomerEdit extends AbstractEditor<Customer> {

    @Inject
    private FieldGroup fieldGroup;

    @Override
    public void init(Map<String, Object> params) {
        super.init(params);

        fieldGroup.setBorderVisible(true);
    }
}
  • Result
    %D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5

Regards,
Gleb

#5

thank Gleb,

But i’m using cuba 7.1
“boder” is not allowed.

Lloyd

#7

Hi @LloydS,

If you use CUBA 7.1, then you probably meant the Form component instead of the FieldGroup component. The Form component does not have a pre-defined style for border.

If you use a Form component you need to follow several steps:

  1. Extending an Existing Theme link
  2. Add the new style definition to the hover_ext.scss file
@mixin com_company_sample-hover-ext {
  .form-border {
    border: valo-border();
    border-radius: $v-border-radius;
    margin: 0;
    padding: round($v-unit-size/3);
  }
}
  1. Add the attribute stylename for component Form 
<form id="form" dataContainer="customerDc" stylename="form-border">
    <column width="250px">
        <textField id="nameField" property="name"/>
    </column>
</form>

Result:
image

Regards,
Gleb