Margin in Forms in V7

Support
#1

Hi
I am trying to use the form in screens where I want to keep some margin like below that I have done in the legacy screen.

    //2. Field Group Style for Border
 .field_group_style2 {
    margin-right : 10px
  }

and Used in FieldGroups which is resulting in the margins as below:

image

I tried to use the same cssStyle but it throws an exception. Thanks for sharing some tips to get the same in using the form.

#3

Hi,

Could you clarify the following:

  1. Do you use two form components or a single with two columns?
  2. What exception do you have?

In case of using two columns in a single Form, they already have 10px spacing.

If you use two Form components, then you can enable spacing in the parent component (or in the root layout).

Regards,
Gleb

#5

Hi Gleb
The objective is to make the screen responsive to different screen size. Therefore I won’t use more than 1 column since it will not fit in small devices. Rather many forms, depending on how many components are in the screen.

I have used cssLayout as parent container of the forms (in legacy screen FieldGroup) so that those small forms are rearranged within the cssLayout automatically based on screen size. There I need space between forms. Thanks for additional inputs, if any and how that can be done.

#6

In case of cssLayout you need to use custom styles. It seems that you missed ; in your styles. That’s why you get an exception.

#7

Hi Gleb
I have added missing “;” in the Style but still getting the exception.

Here is the style:

//3. CSSLayout Style for Border
 .csslayout_margin_style {
    margin-right : 10px;
  }

Here is the screen xml

<cssLayout id="cssLayout" css="csslayout_margin_style">

Here is the exception:

  java.lang.IllegalArgumentException: Incorrect CSS string: csslayout_margin_style
	at com.haulmont.cuba.web.gui.components.HtmlAttributesImpl.applyCss(HtmlAttributesImpl.java:99)
	at com.haulmont.cuba.gui.xml.layout.loaders.AbstractComponentLoader.loadCss(AbstractComponentLoader.java:220)
	at com.haulmont.cuba.gui.xml.layout.loaders.CssLayoutLoader.loadComponent(CssLayoutLoader.java:49)
	at com.haulmont.cuba.gui.xml.layout.loaders.ContainerLoader.loadSubComponents(ContainerLoader.java:37)

As an alternative, used the css code directly to the cssLayout as follows, now there no error but getting no margin.

<cssLayout id="cssLayout" css="margin-right : 10px">

#8

You’re setting CSS class name to the attribute that accepts CSS properties. Use the className attribute instead.

#9

Worked! Here is how I applied

 <form id="form1" dataContainer="purchaseRequisitionDc" stylename="form_margin_style">

Css style

//3. Style for Border
    .form_margin_style {
        margin-right : 10px;
      }