Scout Eclipse Neon margin on fields

Question

Scout Eclipse Neon margin on fields

220 Views Asked by Marko Zadravec At 02 April 2025 at 23:00

Is it possible to set a margin around fields.

For example in image :

If I want to set lower (separated) checkBox in line with above once, is there a way to do it?

Marko

Original Q&A

There are 2 best solutions below

Arthur On 18 February 2016 at 08:53

You can always use custom CSS: Let your field implement IStyleable and use setCssClass() to apply an appropriate CSS class. I'd try to avoid using such pixel pushing approaches as much as possible.

**Jmini** · Accepted Answer

Start by inspecting the HTML code (with Chrome).

The code corresponding to the Checkbox Field is something like that:

  <div class="form-field check-box-field" 
      data-modelclass="org.eclipse.scout.widgets.client.ui.forms.CheckboxFieldForm$MainBox$ConfigurationBox$CheckboxField"
      data-classid="CheckboxField_org.eclipse.scout.widgets.client.ui.forms.CheckboxFieldForm"
      id="scout.CheckBoxField[1-49]" 
      style="left: 0px; top: 14px; width: 1598px; height: 30px;"
    >
    <div class="field has-inner-alignment halign-left valign-top" style=
    "left: 148px; top: 0px; width: 1420px; height: 30px;">
      <div class="check-box" tabindex="0"></div>
      <div class="label">
        Checkbox
      </div>
    </div>
  </div>

With CSS you can do anything possible:

.check-box-field {
    background-color: red;
}

Now because you do not want to add some custom CSS style for all CheckBox Fields, you can define a custom Css-Class in your CheckBox:

  @Order(4)
  public class UnknownCheckBox extends AbstractBooleanField {

    @Override
    protected String getConfiguredCssClass() {
      return "checkbox-under-listbox";
    }
    // ... Some Code ...
  }

And now you add this CSS code:

.checkbox-under-listbox {
    margin-left: 20px;
}

I have realized this example with the Widgets Demo Application (org.eclipse.scout.docs repository, releases/5.2.x branch). I added my css code in this file: org.eclipse.scout.widgets.ui.html/src/main/js/widgets/main.css (It is probably not the best approach to have everything in main.css).

You can deduce from this example how you can add an additional CSS/LESS module and macro to your application. This post: Inclusion of additional icons from font-awesome might also be usefull. You will have a main.css instead of a font.css.

WARNING: this is not state of the art.

At the end this is normal HTML development (single page application of course), so you can do what you want...

If you do not want to use the LESS compiler and the File preprocessor, you can simpelly add a normal CSS file in the folder:

<your_project>.ui.html/src/main/resources/WebContent

Let say:

<your_project>.ui.html/src/main/resources/WebContent/my_custom.css

Do not forget to include your CSS File between the <head> and </head> tags in the HTML index file:

<your_project>.ui.html/src/main/resources/WebContent/index.html

Something like:

<head>
  <!-- some code -->
  <link rel="stylesheet" type="text/css" href="my_custom.css">
  <scout:stylesheet src="res/scout-module.css" />
  <!-- some code -->
</head>

Scout Eclipse Neon margin on fields

There are 2 best solutions below

Related Questions in USER-INTERFACE

Related Questions in FIELD

Related Questions in MARGINS

Related Questions in ECLIPSE-SCOUT

Trending Questions

Popular # Hahtags

Popular Questions