Search code examples
user-interfacefieldmarginseclipse-scout

Scout Eclipse Neon margin on fields

Is it possible to set a margin around fields.

For example in image :

Current screenshot

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

Desired screenshot

Marko

Solution

  • Start by inspecting the HTML code (with Chrome).

    Inspect Scout Field 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;
}

    Scout CheckBox Red Background

    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>