You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@myfaces.apache.org by lo...@apache.org on 2018/08/14 21:26:09 UTC

[myfaces-tobago] branch master updated: TOBAGO-1908: LabelLayout attributes gridLeft, gridRight, gridTop and gridBottom

This is an automated email from the ASF dual-hosted git repository.

lofwyr pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git


The following commit(s) were added to refs/heads/master by this push:
     new d566189  TOBAGO-1908: LabelLayout attributes gridLeft, gridRight, gridTop and gridBottom
d566189 is described below

commit d566189799549681cd6d7eb9ab588f269cdc146e
Author: Udo Schnurpfeil <lo...@apache.org>
AuthorDate: Tue Aug 14 23:24:23 2018 +0200

    TOBAGO-1908: LabelLayout attributes gridLeft, gridRight, gridTop and gridBottom
---
 .../myfaces/tobago/component/LabelLayout.java      |  46 ++++++-
 .../internal/component/AbstractUIGridLayout.java   |  68 ++++++----
 .../renderer/LabelLayoutRendererBase.java          |  27 +++-
 .../org/apache/myfaces/tobago/layout/GridSpan.java |   4 +-
 tobago-core/src/main/resources/scss/_tobago.scss   |  28 +---
 .../30-concept/16-layout/50-grid/grid-layout.xhtml |  28 ++--
 .../grid-layout-label-horizontal.test.js           | 148 +++++++++++++++++++++
 .../grid-layout-label-horizontal.xhtml             | 102 ++++++++++++++
 .../grid-layout-label-vertical.test.js             |  38 ++++++
 .../grid-layout-label-vertical.xhtml               |  36 +++++
 .../40-test/4600-gridLayout/grid-layout.xhtml      |  27 ++++
 .../tobago-theme-charlotteville/rebuild-theme.txt  |  34 ++---
 .../tobago-bootstrap/_version/css/bootstrap.css    |  28 +---
 .../_version/css/bootstrap.css.map                 |   2 +-
 .../_version/css/bootstrap.min.css                 |   2 +-
 .../_version/css/bootstrap.min.css.map             |   2 +-
 .../tobago-theme-roxborough/rebuild-theme.txt      |  30 ++---
 .../tobago-bootstrap/_version/css/bootstrap.css    |  28 +---
 .../_version/css/bootstrap.css.map                 |   2 +-
 .../_version/css/bootstrap.min.css                 |   2 +-
 .../_version/css/bootstrap.min.css.map             |   2 +-
 .../tobago-theme-scarborough/rebuild-theme.txt     |  22 +--
 .../tobago-bootstrap/_version/css/bootstrap.css    |  28 +---
 .../_version/css/bootstrap.css.map                 |   2 +-
 .../_version/css/bootstrap.min.css                 |   2 +-
 .../_version/css/bootstrap.min.css.map             |   2 +-
 .../tobago-theme-speyside/rebuild-theme.txt        |  36 ++---
 .../tobago-bootstrap/_version/css/bootstrap.css    |  28 +---
 .../_version/css/bootstrap.css.map                 |   2 +-
 .../_version/css/bootstrap.min.css                 |   2 +-
 .../_version/css/bootstrap.min.css.map             |   2 +-
 .../tobago-theme-standard/rebuild-theme.txt        |  34 ++---
 .../tobago-bootstrap/_version/css/bootstrap.css    |  28 +---
 .../_version/css/bootstrap.css.map                 |   2 +-
 .../_version/css/bootstrap.min.css                 |   2 +-
 .../_version/css/bootstrap.min.css.map             |   2 +-
 .../resources/tobago/test/tobago-test-tool.js      |  48 ++++++-
 37 files changed, 647 insertions(+), 279 deletions(-)

diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/component/LabelLayout.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/component/LabelLayout.java
index 69256c5..b6cfc22 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/component/LabelLayout.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/component/LabelLayout.java
@@ -19,13 +19,13 @@
 
 package org.apache.myfaces.tobago.component;
 
+import javax.faces.component.UIComponent;
 import javax.faces.context.FacesContext;
 
 public enum LabelLayout {
 
   /**
-   * do not render the label
-   * same behavior as component without label attribute
+   * do not render the label - same behavior as component without label attribute
    */
   none,
 
@@ -67,7 +67,27 @@ public enum LabelLayout {
   /**
    * skip rendering the surrounding container.
    */
-  skip;
+  skip,
+
+  /**
+   * grid layout: let the label be on the left cell and the input on the right cell. It uses 2 cells instead of one.
+   */
+  gridLeft,
+
+  /**
+   * grid layout: let the label be on the right cell and the input on the left cell. It uses 2 cells instead of one.
+   */
+  gridRight,
+
+  /**
+   * grid layout: let the label be on the top cell and the input on the bottom cell. It uses 2 cells instead of one.
+   */
+  gridTop,
+
+  /**
+   * grid layout: let the label be on the bottom cell and the input on the top cell. It uses 2 cells instead of one.
+   */
+  gridBottom;
 
   private static final String SEGMENT_TO_RENDER_KEY = LabelLayout.class.getName();
 
@@ -89,4 +109,24 @@ public enum LabelLayout {
   public static void removeSegment(final FacesContext facesContext) {
     facesContext.getAttributes().remove(SEGMENT_TO_RENDER_KEY);
   }
+
+  public static boolean isGridLeft(final UIComponent component) {
+    return component instanceof SupportsLabelLayout
+        && ((SupportsLabelLayout) component).getLabelLayout() == LabelLayout.gridLeft;
+  }
+
+  public static boolean isGridRight(final UIComponent component) {
+    return component instanceof SupportsLabelLayout
+        && ((SupportsLabelLayout) component).getLabelLayout() == LabelLayout.gridRight;
+  }
+
+  public static boolean isGridTop(final UIComponent component) {
+    return component instanceof SupportsLabelLayout
+        && ((SupportsLabelLayout) component).getLabelLayout() == LabelLayout.gridTop;
+  }
+
+  public static boolean isGridBottom(final UIComponent component) {
+    return component instanceof SupportsLabelLayout
+        && ((SupportsLabelLayout) component).getLabelLayout() == LabelLayout.gridBottom;
+  }
 }
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUIGridLayout.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUIGridLayout.java
index 47d2ca9..bba45c5 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUIGridLayout.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUIGridLayout.java
@@ -21,10 +21,12 @@ package org.apache.myfaces.tobago.internal.component;
 
 import org.apache.myfaces.tobago.apt.annotation.Preliminary;
 import org.apache.myfaces.tobago.component.Attributes;
+import org.apache.myfaces.tobago.component.LabelLayout;
 import org.apache.myfaces.tobago.component.RendererTypes;
 import org.apache.myfaces.tobago.component.UIPanel;
 import org.apache.myfaces.tobago.component.UIStyle;
 import org.apache.myfaces.tobago.component.Visual;
+import org.apache.myfaces.tobago.internal.util.StyleRenderUtils;
 import org.apache.myfaces.tobago.layout.GridSpan;
 import org.apache.myfaces.tobago.layout.MeasureList;
 import org.apache.myfaces.tobago.util.ComponentUtils;
@@ -159,27 +161,49 @@ public abstract class AbstractUIGridLayout extends AbstractUILayoutBase
     for (final UIComponent component : components) {
       final Map<String, Object> attributes = component.getAttributes();
 
-      UIStyle style = ComponentUtils.findChild(component, UIStyle.class);
-      if (style == null) {
-        style = (UIStyle) ComponentUtils.createComponent(
+      final int gridColumn = (Integer) attributes.get(Attributes.gridColumn.getName());
+      final Integer columnSpan = (Integer) attributes.get(Attributes.columnSpan.getName());
+      final int gridRow = (Integer) attributes.get(Attributes.gridRow.getName());
+      final Integer rowSpan = (Integer) attributes.get(Attributes.rowSpan.getName());
+      final boolean labeledLeft = LabelLayout.isGridLeft(component);
+      final boolean labeledRight = LabelLayout.isGridRight(component);
+      final boolean labeledHorizontal = labeledLeft || labeledRight;
+      final boolean labeledTop = LabelLayout.isGridTop(component);
+      final boolean labeledBottom = LabelLayout.isGridBottom(component);
+      final boolean labeledVertical = labeledTop || labeledBottom;
+      final boolean labeled = labeledHorizontal || labeledVertical;
+
+      // field style
+
+      UIStyle fieldStyle = ComponentUtils.findChild(component, UIStyle.class);
+      if (fieldStyle == null) {
+        fieldStyle = (UIStyle) ComponentUtils.createComponent(
             facesContext, UIStyle.COMPONENT_TYPE, RendererTypes.Style, null);
-        component.getChildren().add(style);
+        component.getChildren().add(fieldStyle);
       }
       // Style must be transient to avoid creating a new instance of GridSpan while restore state
       // https://issues.apache.org/jira/browse/TOBAGO-1909
-      style.setTransient(true);
+      fieldStyle.setTransient(true);
 
-      final Integer gridColumn = (Integer) attributes.get(Attributes.gridColumn.getName());
-      final Integer columnSpan = (Integer) attributes.get(Attributes.columnSpan.getName());
-      if (gridColumn != null) {
-        style.setGridColumn(GridSpan.valueOf(gridColumn, columnSpan));
-      }
+      fieldStyle.setGridColumn(
+          GridSpan.valueOf(labeledLeft ? gridColumn + 1 : gridColumn, labeledHorizontal ? columnSpan - 1 : columnSpan));
+      fieldStyle.setGridRow(
+          GridSpan.valueOf(labeledTop ? gridRow + 1 : gridRow, labeledVertical ? rowSpan - 1 : rowSpan));
 
-      final Integer gridRow = (Integer) attributes.get(Attributes.gridRow.getName());
-      final Integer rowSpan = (Integer) attributes.get(Attributes.rowSpan.getName());
-      if (gridRow != null) {
-        style.setGridRow(GridSpan.valueOf(gridRow, rowSpan));
+      // label style
+
+      if (labeled) {
+        final UIStyle labelStyle = (UIStyle) ComponentUtils.createComponent(
+            facesContext, UIStyle.COMPONENT_TYPE, RendererTypes.Style, null);
+        component.getChildren().add(labelStyle);
+        labelStyle.setTransient(true);
+        labelStyle.setSelector(StyleRenderUtils.encodeIdSelector(
+            component.getClientId(facesContext) + ComponentUtils.SUB_SEPARATOR + "label"));
+
+        labelStyle.setGridColumn(GridSpan.valueOf(labeledRight ? gridColumn + columnSpan - 1 : gridColumn, null));
+        labelStyle.setGridRow(GridSpan.valueOf(labeledBottom ? gridRow + rowSpan - 1 : gridRow, null));
       }
+
     }
 
     return cells;
@@ -201,14 +225,12 @@ public abstract class AbstractUIGridLayout extends AbstractUILayoutBase
     UIComponent[][] cells = initialCells;
 
     final Map<String, Object> attributes = component.getAttributes();
-    Integer rowSpan = (Integer) attributes.get(Attributes.rowSpan.getName());
-    if (rowSpan == null) {
-      rowSpan = 1;
-    }
-    Integer columnSpan = (Integer) attributes.get(Attributes.columnSpan.getName());
-    if (columnSpan == null) {
-      columnSpan = 1;
-    }
+    int rowSpan = ComponentUtils.getIntAttribute(component, Attributes.rowSpan,
+        LabelLayout.isGridTop(component) || LabelLayout.isGridBottom(component) ? 2 : 1);
+    ComponentUtils.setAttribute(component, Attributes.rowSpan, rowSpan);
+    int columnSpan = ComponentUtils.getIntAttribute(component, Attributes.columnSpan,
+        LabelLayout.isGridLeft(component) || LabelLayout.isGridRight(component) ? 2 : 1);
+    ComponentUtils.setAttribute(component, Attributes.columnSpan, columnSpan);
 
     // the span area
     for (int j = row; j < rowSpan + row; j++) {
@@ -221,7 +243,7 @@ public abstract class AbstractUIGridLayout extends AbstractUILayoutBase
         if (j >= cells.length) {
           cells = expand(cells, j + STEP);
         }
-        if (j == row && i == column) {
+        if (j == row && i == column) { // position
           cells[j][i] = component;
           attributes.put(Attributes.gridRow.getName(), j + 1);
           attributes.put(Attributes.gridColumn.getName(), i + 1);
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/LabelLayoutRendererBase.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/LabelLayoutRendererBase.java
index 75548bc..15d9178 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/LabelLayoutRendererBase.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/LabelLayoutRendererBase.java
@@ -126,9 +126,13 @@ public abstract class LabelLayoutRendererBase extends DecodingInputRendererBase
     }
 
     writer.startElement(HtmlElements.DIV);
-    writer.writeIdAttribute(clientId);
+    if (labelLayout == LabelLayout.gridLeft || labelLayout == LabelLayout.gridRight
+        || labelLayout == LabelLayout.gridTop || labelLayout == LabelLayout.gridBottom) {
+      writer.writeIdAttribute(clientId + ComponentUtils.SUB_SEPARATOR + "label");
+    } else {
+      writer.writeIdAttribute(clientId);
+    }
     writer.writeAttribute(DataAttributes.MARKUP, JsonUtils.encode(markup), false);
-
     writer.writeClassAttribute(
         flex ? TobagoClass.FLEX_LAYOUT : null,
         flex ? BootstrapClass.D_FLEX : null,
@@ -152,6 +156,25 @@ public abstract class LabelLayoutRendererBase extends DecodingInputRendererBase
       default:
         encodeLabel(facesContext, component, writer, labelLayout);
     }
+
+    switch (labelLayout) {
+      case gridLeft:
+      case gridRight:
+      case gridTop:
+      case gridBottom:
+        writer.endElement(HtmlElements.DIV);
+
+        writer.startElement(HtmlElements.DIV);
+        writer.writeIdAttribute(clientId);
+        writer.writeAttribute(DataAttributes.MARKUP, JsonUtils.encode(markup), false);
+        writer.writeClassAttribute(
+            TobagoClass.LABEL__CONTAINER,
+            BootstrapClass.FORM_GROUP,
+            ComponentUtils.getBooleanAttribute(component, Attributes.required) ? TobagoClass.REQUIRED : null,
+            markup != null && markup.contains(Markup.SPREAD) ? TobagoClass.SPREAD : null);
+        break;
+      default:
+    }
   }
 
   protected void encodeEndSurroundingLabel(final FacesContext facesContext, final UIComponent component)
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/layout/GridSpan.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/layout/GridSpan.java
index 3233ae7..9ab21ba 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/layout/GridSpan.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/layout/GridSpan.java
@@ -59,13 +59,13 @@ public class GridSpan {
 
   public String encode() {
     if (start != null) {
-      if (span != null) {
+      if (span != null && span != 1) {
         return start + "/span " + span;
       } else {
         return start.toString();
       }
     } else {
-      if (span != null) { // XXX "auto" not supported by MS IE
+      if (span != null && span != 1) { // XXX "auto" not supported by MS IE
         return "auto/span " + span;
       } else {
         return "auto";
diff --git a/tobago-core/src/main/resources/scss/_tobago.scss b/tobago-core/src/main/resources/scss/_tobago.scss
index e301aa7..8fe3429 100644
--- a/tobago-core/src/main/resources/scss/_tobago.scss
+++ b/tobago-core/src/main/resources/scss/_tobago.scss
@@ -295,35 +295,15 @@ XXX workaround for Bootstrap with datetimepicker needed for popups
 .tobago-gridLayout {
   display: -ms-grid;
   display: grid;
-  /*
-      border-spacing: 5px;
-      border-collapse: separate;
-  */
   border-spacing: 0;
   border-collapse: collapse;
+  grid-column-gap: $spacer-x; // old
+  column-gap: $spacer-x;
 }
 
-table.tobago-gridLayout > tbody {
-  > tr > td {
-    vertical-align: top;
-    padding: 0;
-    border-left: 5px solid transparent;
-    border-top: 5px solid transparent;
+.tobago-label-container > {
+  .tobago-textarea, .tobago-selectOneChoice, .tobago-selectManyListbox, .tobago-selectManyShuttle {
     height: 100%;
-    /* needed for Firefox */
-
-    > * {
-      height: 100%;
-      width: 100%;
-    }
-  }
-
-  > tr > td:first-child {
-    border-left: 0;
-  }
-
-  > tr:first-child > td {
-    border-top: 0;
   }
 }
 
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/16-layout/50-grid/grid-layout.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/16-layout/50-grid/grid-layout.xhtml
index a808273..bdbc4f9 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/16-layout/50-grid/grid-layout.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/16-layout/50-grid/grid-layout.xhtml
@@ -41,31 +41,33 @@
   </p>
 
   <tc:box label="Personal Information">
-    <tc:gridLayout columns="1fr 2fr" rows="auto auto auto auto auto 1fr">
+    <tc:gridLayout columns="100px 1fr 100px 2fr" rows="auto auto auto auto auto 1fr">
       <tc:style minHeight="600px"/>
 
-      <tc:selectOneChoice label="Salutation">
+      <tc:selectOneChoice label="Salutation" labelLayout="gridLeft">
         <f:selectItem itemLabel="none"/>
         <f:selectItem itemLabel="Mr."/>
         <f:selectItem itemLabel="Mrs."/>
       </tc:selectOneChoice>
-      <tc:panel/>
+      <tc:panel>
+        <tc:gridLayoutConstraint columnSpan="2"/>
+      </tc:panel>
 
-      <tc:in label="First Name"/>
-      <tc:in label="Last Name"/>
+      <tc:in label="First Name" labelLayout="gridLeft"/>
+      <tc:in label="Last Name" labelLayout="gridLeft"/>
 
-      <tc:in label="c/o">
-        <tc:gridLayoutConstraint columnSpan="2"/>
+      <tc:in label="c/o" labelLayout="gridLeft">
+        <tc:gridLayoutConstraint columnSpan="4"/>
       </tc:in>
 
-      <tc:in label="Street"/>
-      <tc:in label="No"/>
+      <tc:in label="Street" labelLayout="gridLeft"/>
+      <tc:in label="No" labelLayout="gridLeft"/>
 
-      <tc:in label="ZIP"/>
-      <tc:in label="City"/>
+      <tc:in label="ZIP" labelLayout="gridLeft"/>
+      <tc:in label="City" labelLayout="gridLeft"/>
 
-      <tc:textarea label="Note">
-        <tc:gridLayoutConstraint columnSpan="2"/>
+      <tc:textarea label="Note" labelLayout="gridLeft">
+        <tc:gridLayoutConstraint columnSpan="4"/>
       </tc:textarea>
     </tc:gridLayout>
   </tc:box>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/4600-gridLayout/10-label-horizontal/grid-layout-label-horizontal.test.js b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/4600-gridLayout/10-label-horizontal/grid-layout-label-horizontal.test.js
new file mode 100644
index 0000000..fb0a74a
--- /dev/null
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/4600-gridLayout/10-label-horizontal/grid-layout-label-horizontal.test.js
@@ -0,0 +1,148 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+QUnit.test("test CSS of the fields and labels of 'first1'", function (assert) {
+
+  assert.expect(8);
+
+  var $field = jQueryFrame("#page\\:mainForm\\:first1");
+  var $label = jQueryFrame("#page\\:mainForm\\:first1\\:\\:label");
+
+  TobagoTestTool.checkGridCss(assert, $field, "2", "auto", "3", "auto");
+  TobagoTestTool.checkGridCss(assert, $label, "1", "auto", "3", "auto");
+});
+
+QUnit.test("test CSS of the fields and labels of 'last1'", function (assert) {
+
+  assert.expect(8);
+
+  var $field = jQueryFrame("#page\\:mainForm\\:last1");
+  var $label = jQueryFrame("#page\\:mainForm\\:last1\\:\\:label");
+
+  TobagoTestTool.checkGridCss(assert, $field, "3", "auto", "3", "auto");
+  TobagoTestTool.checkGridCss(assert, $label, "4", "auto", "3", "auto");
+});
+
+QUnit.test("test CSS of the fields and labels of 'first2'", function (assert) {
+
+  assert.expect(8);
+
+  var $field = jQueryFrame("#page\\:mainForm\\:first2");
+  var $label = jQueryFrame("#page\\:mainForm\\:first2\\:\\:label");
+
+  TobagoTestTool.checkGridCss(assert, $field, "1", "auto", "5", "auto");
+  TobagoTestTool.checkGridCss(assert, $label, "2", "auto", "5", "auto");
+});
+
+QUnit.test("test CSS of the fields and labels of 'last2'", function (assert) {
+
+  assert.expect(8);
+
+  var $field = jQueryFrame("#page\\:mainForm\\:last2");
+  var $label = jQueryFrame("#page\\:mainForm\\:last2\\:\\:label");
+
+  TobagoTestTool.checkGridCss(assert, $field, "4", "auto", "5", "auto");
+  TobagoTestTool.checkGridCss(assert, $label, "3", "auto", "5", "auto");
+});
+
+QUnit.test("test CSS of the fields and labels of 'first3'", function (assert) {
+
+  assert.expect(8);
+
+  var $field = jQueryFrame("#page\\:mainForm\\:first3");
+  var $label = jQueryFrame("#page\\:mainForm\\:first3\\:\\:label");
+
+  TobagoTestTool.checkGridCss(assert, $field, "2", "span 3", "7", "auto");
+  TobagoTestTool.checkGridCss(assert, $label, "1", "auto", "7", "auto");
+});
+
+QUnit.test("test CSS of the fields and labels of 'last3'", function (assert) {
+
+  assert.expect(8);
+
+  var $field = jQueryFrame("#page\\:mainForm\\:last3");
+  var $label = jQueryFrame("#page\\:mainForm\\:last3\\:\\:label");
+
+  TobagoTestTool.checkGridCss(assert, $field, "1", "span 3", "8", "auto");
+  TobagoTestTool.checkGridCss(assert, $label, "4", "auto", "8", "auto");
+});
+
+QUnit.test("test CSS of the fields and labels of 'first4'", function (assert) {
+
+  assert.expect(8);
+
+  var $field = jQueryFrame("#page\\:mainForm\\:first4");
+  var $label = jQueryFrame("#page\\:mainForm\\:first4\\:\\:label");
+
+  TobagoTestTool.checkGridCss(assert, $field, "2", "span 2", "10", "auto");
+  TobagoTestTool.checkGridCss(assert, $label, "1", "auto", "10", "auto");
+});
+
+QUnit.test("test CSS of the fields and labels of 'last4'", function (assert) {
+
+  assert.expect(8);
+
+  var $field = jQueryFrame("#page\\:mainForm\\:last4");
+  var $label = jQueryFrame("#page\\:mainForm\\:last4\\:\\:label");
+
+  TobagoTestTool.checkGridCss(assert, $field, "1", "span 2", "11", "auto");
+  TobagoTestTool.checkGridCss(assert, $label, "3", "auto", "11", "auto");
+});
+
+QUnit.test("test CSS of the fields and labels of 'first5'", function (assert) {
+
+  assert.expect(8);
+
+  var $field = jQueryFrame("#page\\:mainForm\\:first5");
+  var $label = jQueryFrame("#page\\:mainForm\\:first5\\:\\:label");
+
+  TobagoTestTool.checkGridCss(assert, $field, "3", "span 2", "13", "auto");
+  TobagoTestTool.checkGridCss(assert, $label, "2", "auto", "13", "auto");
+});
+
+QUnit.test("test CSS of the fields and labels of 'last5'", function (assert) {
+
+  assert.expect(8);
+
+  var $field = jQueryFrame("#page\\:mainForm\\:last5");
+  var $label = jQueryFrame("#page\\:mainForm\\:last5\\:\\:label");
+
+  TobagoTestTool.checkGridCss(assert, $field, "2", "span 2", "14", "auto");
+  TobagoTestTool.checkGridCss(assert, $label, "4", "auto", "14", "auto");
+});
+
+QUnit.test("test CSS of the fields and labels of 'first6'", function (assert) {
+
+  assert.expect(8);
+
+  var $field = jQueryFrame("#page\\:mainForm\\:first6");
+  var $label = jQueryFrame("#page\\:mainForm\\:first6\\:\\:label");
+
+  TobagoTestTool.checkGridCss(assert, $field, "2", "span 4", "16", "auto");
+  TobagoTestTool.checkGridCss(assert, $label, "1", "auto", "16", "auto");
+});
+
+QUnit.test("test CSS of the fields and labels of 'last6'", function (assert) {
+
+  assert.expect(8);
+
+  var $field = jQueryFrame("#page\\:mainForm\\:last6");
+  var $label = jQueryFrame("#page\\:mainForm\\:last6\\:\\:label");
+
+  TobagoTestTool.checkGridCss(assert, $field, "1", "span 4", "17", "auto");
+  TobagoTestTool.checkGridCss(assert, $label, "5", "auto", "17", "auto");
+});
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/4600-gridLayout/10-label-horizontal/grid-layout-label-horizontal.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/4600-gridLayout/10-label-horizontal/grid-layout-label-horizontal.xhtml
new file mode 100644
index 0000000..90a3f0a
--- /dev/null
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/4600-gridLayout/10-label-horizontal/grid-layout-label-horizontal.xhtml
@@ -0,0 +1,102 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<!--
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+-->
+
+<ui:composition template="/main.xhtml"
+                xmlns="http://www.w3.org/1999/xhtml"
+                xmlns:tc="http://myfaces.apache.org/tobago/component"
+                xmlns:ui="http://java.sun.com/jsf/facelets">
+
+  <tc:box id="box" label="Grid Layout with labelLayout left and right (horizontal)">
+    <tc:gridLayout id="grid" columns="150px 2fr 1fr 5fr">
+
+      <tc:in value="1fr" disabled="true"/>
+      <tc:in value="2fr" disabled="true"/>
+      <tc:in value="1fr" disabled="true"/>
+      <tc:in value="5fr" disabled="true"/>
+
+      <tc:separator label="gridLeft/gridRight with default span">
+        <tc:gridLayoutConstraint columnSpan="4"/>
+      </tc:separator>
+
+      <tc:in id="first1" label="First Name 1" labelLayout="gridLeft">
+      </tc:in>
+      <tc:in id="last1" label="Last Name 1" labelLayout="gridRight">
+      </tc:in>
+
+      <tc:separator label="gridRight/gridLeft with default span">
+        <tc:gridLayoutConstraint columnSpan="4"/>
+      </tc:separator>
+
+      <tc:in id="first2" label="First Name 2" labelLayout="gridRight">
+      </tc:in>
+      <tc:in id="last2" label="Last Name 2" labelLayout="gridLeft">
+      </tc:in>
+
+      <tc:separator label="gridLeft/gridRight with columnSpan=4">
+        <tc:gridLayoutConstraint columnSpan="4"/>
+      </tc:separator>
+
+      <tc:in id="first3" label="First Name 3" labelLayout="gridLeft">
+        <tc:gridLayoutConstraint columnSpan="4"/>
+      </tc:in>
+      <tc:in id="last3" label="Last Name 3" labelLayout="gridRight">
+        <tc:gridLayoutConstraint columnSpan="4"/>
+      </tc:in>
+
+      <tc:separator label="gridLeft/gridRight with columnSpan=3 and spacer right">
+        <tc:gridLayoutConstraint columnSpan="4"/>
+      </tc:separator>
+
+      <tc:in id="first4" label="First Name 4" labelLayout="gridLeft">
+        <tc:gridLayoutConstraint columnSpan="3"/>
+      </tc:in>
+      <tc:out value="spacer"/>
+      <tc:in id="last4" label="Last Name 4" labelLayout="gridRight">
+        <tc:gridLayoutConstraint columnSpan="3"/>
+      </tc:in>
+      <tc:out value="spacer"/>
+
+      <tc:separator label="gridLeft/gridRight with columnSpan=3 and spacer left">
+        <tc:gridLayoutConstraint columnSpan="4"/>
+      </tc:separator>
+
+      <tc:out value="spacer"/>
+      <tc:in id="first5" label="First Name 5" labelLayout="gridLeft">
+        <tc:gridLayoutConstraint columnSpan="3"/>
+      </tc:in>
+      <tc:out value="spacer"/>
+      <tc:in id="last5" label="Last Name 5" labelLayout="gridRight">
+        <tc:gridLayoutConstraint columnSpan="3"/>
+      </tc:in>
+
+      <tc:separator label="gridLeft/gridRight with columnSpan=5 (too much)">
+        <tc:gridLayoutConstraint columnSpan="4"/>
+      </tc:separator>
+
+      <tc:in id="first6" label="First Name 6" labelLayout="gridLeft">
+        <tc:gridLayoutConstraint columnSpan="5"/>
+      </tc:in>
+      <tc:in id="last6" label="Last Name 6" labelLayout="gridRight">
+        <tc:gridLayoutConstraint columnSpan="5"/>
+      </tc:in>
+
+    </tc:gridLayout>
+  </tc:box>
+
+</ui:composition>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/4600-gridLayout/20-label-vertical/grid-layout-label-vertical.test.js b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/4600-gridLayout/20-label-vertical/grid-layout-label-vertical.test.js
new file mode 100644
index 0000000..15644c6
--- /dev/null
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/4600-gridLayout/20-label-vertical/grid-layout-label-vertical.test.js
@@ -0,0 +1,38 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+QUnit.test("test CSS of the fields and labels of 'first1'", function (assert) {
+
+  assert.expect(8);
+
+  var $field = jQueryFrame("#page\\:mainForm\\:first1");
+  var $label = jQueryFrame("#page\\:mainForm\\:first1\\:\\:label");
+
+  TobagoTestTool.checkGridCss(assert, $field, "1", "auto", "2", "auto");
+  TobagoTestTool.checkGridCss(assert, $label, "1", "auto", "1", "auto");
+});
+
+QUnit.test("test CSS of the fields and labels of 'last1'", function (assert) {
+
+  assert.expect(8);
+
+  var $field = jQueryFrame("#page\\:mainForm\\:last1");
+  var $label = jQueryFrame("#page\\:mainForm\\:last1\\:\\:label");
+
+  TobagoTestTool.checkGridCss(assert, $field, "2", "auto", "1", "auto");
+  TobagoTestTool.checkGridCss(assert, $label, "2", "auto", "2", "auto");
+});
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/4600-gridLayout/20-label-vertical/grid-layout-label-vertical.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/4600-gridLayout/20-label-vertical/grid-layout-label-vertical.xhtml
new file mode 100644
index 0000000..6d4dd0a
--- /dev/null
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/4600-gridLayout/20-label-vertical/grid-layout-label-vertical.xhtml
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<!--
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+-->
+
+<ui:composition template="/main.xhtml"
+                xmlns="http://www.w3.org/1999/xhtml"
+                xmlns:tc="http://myfaces.apache.org/tobago/component"
+                xmlns:ui="http://java.sun.com/jsf/facelets">
+
+  <tc:box id="box" label="Grid Layout with lableLayout top and bottom (vertical)">
+    <tc:gridLayout id="grid" columns="1fr 2fr">
+
+      <tc:in id="first1" label="First Name 1" labelLayout="gridTop">
+      </tc:in>
+      <tc:in id="last1" label="Last Name 1" labelLayout="gridBottom">
+      </tc:in>
+
+    </tc:gridLayout>
+  </tc:box>
+
+</ui:composition>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/4600-gridLayout/grid-layout.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/4600-gridLayout/grid-layout.xhtml
new file mode 100644
index 0000000..1a9a000
--- /dev/null
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/4600-gridLayout/grid-layout.xhtml
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<!--
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+-->
+
+<ui:composition template="/main.xhtml"
+                xmlns:ui="http://java.sun.com/jsf/facelets">
+
+  <ui:param name="title" value="TODO"/>
+
+  TODO
+
+</ui:composition>
diff --git a/tobago-theme/tobago-theme-charlotteville/rebuild-theme.txt b/tobago-theme/tobago-theme-charlotteville/rebuild-theme.txt
index 6600d62..8f9c31a 100644
--- a/tobago-theme/tobago-theme-charlotteville/rebuild-theme.txt
+++ b/tobago-theme/tobago-theme-charlotteville/rebuild-theme.txt
@@ -84,7 +84,7 @@
 [INFO] 
 [WARNING] npm WARN bootstrap@4.1.1 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer dependencies yourself.
 [ERROR] 
-[INFO] added 1613 packages in 57.722s
+[INFO] added 1613 packages in 71.675s
 [INFO] 
 [INFO] --- frontend-maven-plugin:1.6:npm (step #8: npm run css-compile) @ tobago-theme-charlotteville ---
 [INFO] Running 'npm run css-compile' in __CURRENT__/tobago-theme-charlotteville/target/bootstrap
@@ -93,14 +93,14 @@
 [INFO] > node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss/bootstrap.scss dist/css/bootstrap.css && node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss/bootstrap-grid.scss dist/css/bootstrap-grid.css && node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss/bootstrap-reboot.scss dist/css/bootstrap-reboot.css
 [INFO] 
 [ERROR] Rendering Complete, saving .css file...
-[ERROR] Wrote Source Map to __CURRENT__/tobago-theme-charlotteville/target/bootstrap/dist/css/bootstrap.css.map
 [ERROR] Wrote CSS to __CURRENT__/tobago-theme-charlotteville/target/bootstrap/dist/css/bootstrap.css
+[ERROR] Wrote Source Map to __CURRENT__/tobago-theme-charlotteville/target/bootstrap/dist/css/bootstrap.css.map
 [ERROR] Rendering Complete, saving .css file...
-[ERROR] Wrote CSS to __CURRENT__/tobago-theme-charlotteville/target/bootstrap/dist/css/bootstrap-grid.css
 [ERROR] Wrote Source Map to __CURRENT__/tobago-theme-charlotteville/target/bootstrap/dist/css/bootstrap-grid.css.map
+[ERROR] Wrote CSS to __CURRENT__/tobago-theme-charlotteville/target/bootstrap/dist/css/bootstrap-grid.css
 [ERROR] Rendering Complete, saving .css file...
-[ERROR] Wrote Source Map to __CURRENT__/tobago-theme-charlotteville/target/bootstrap/dist/css/bootstrap-reboot.css.map
 [ERROR] Wrote CSS to __CURRENT__/tobago-theme-charlotteville/target/bootstrap/dist/css/bootstrap-reboot.css
+[ERROR] Wrote Source Map to __CURRENT__/tobago-theme-charlotteville/target/bootstrap/dist/css/bootstrap-reboot.css.map
 [INFO] 
 [INFO] --- frontend-maven-plugin:1.6:npm (step #9: npm run css-prefix) @ tobago-theme-charlotteville ---
 [INFO] Running 'npm run css-prefix' in __CURRENT__/tobago-theme-charlotteville/target/bootstrap
@@ -135,6 +135,10 @@
 [INFO] > npm-run-all --parallel js-compile-*
 [INFO] 
 [INFO] 
+[INFO] > bootstrap@4.1.1 js-compile-plugins __CURRENT__/tobago-theme-charlotteville/target/bootstrap
+[INFO] > cross-env PLUGINS=true babel js/src/ --out-dir js/dist/ --source-maps
+[INFO] 
+[INFO] 
 [INFO] > bootstrap@4.1.1 js-compile-standalone __CURRENT__/tobago-theme-charlotteville/target/bootstrap
 [INFO] > rollup --environment BUNDLE:false --config build/rollup.config.js --sourcemap
 [INFO] 
@@ -143,10 +147,6 @@
 [INFO] > rollup --environment BUNDLE:true --config build/rollup.config.js --sourcemap
 [INFO] 
 [INFO] 
-[INFO] > bootstrap@4.1.1 js-compile-plugins __CURRENT__/tobago-theme-charlotteville/target/bootstrap
-[INFO] > cross-env PLUGINS=true babel js/src/ --out-dir js/dist/ --source-maps
-[INFO] 
-[INFO] 
 [INFO] > bootstrap@4.1.1 js-compile-plugins-coverage __CURRENT__/tobago-theme-charlotteville/target/bootstrap
 [INFO] > cross-env PLUGINS=true NODE_ENV=test babel js/src/ --out-dir js/coverage/dist/ --source-maps
 [INFO] 
@@ -155,8 +155,8 @@
 [ERROR] 
 [ERROR] __CURRENT__/tobago-theme-charlotteville/target/bootstrap/js/src/index.js → dist/js/bootstrap.bundle.js...
 [INFO] 🎉  Successfully compiled 12 files with Babel.
-[ERROR] created dist/js/bootstrap.js in 9s
-[ERROR] created dist/js/bootstrap.bundle.js in 10s
+[ERROR] created dist/js/bootstrap.js in 9.2s
+[ERROR] created dist/js/bootstrap.bundle.js in 9.6s
 [INFO] 🎉  Successfully compiled 12 files with Babel.
 [INFO] 
 [INFO] > bootstrap@4.1.1 js-minify __CURRENT__/tobago-theme-charlotteville/target/bootstrap
@@ -167,15 +167,15 @@
 [INFO] > uglifyjs --compress typeofs=false --mangle --comments "/^!/" --source-map "content=dist/js/bootstrap.js.map,includeSources,url=bootstrap.min.js.map" --output dist/js/bootstrap.min.js dist/js/bootstrap.js
 [INFO] 
 [INFO] 
-[INFO] > bootstrap@4.1.1 js-minify-bundle __CURRENT__/tobago-theme-charlotteville/target/bootstrap
-[INFO] > uglifyjs --compress typeofs=false --mangle --comments "/^!/" --source-map "content=dist/js/bootstrap.bundle.js.map,includeSources,url=bootstrap.bundle.min.js.map" --output dist/js/bootstrap.bundle.min.js dist/js/bootstrap.bundle.js
-[INFO] 
-[INFO] 
 [INFO] > bootstrap@4.1.1 js-minify-docs __CURRENT__/tobago-theme-charlotteville/target/bootstrap
 [INFO] > uglifyjs --mangle --comments "/^!/" --output assets/js/docs.min.js assets/js/vendor/anchor.min.js assets/js/vendor/clipboard.min.js assets/js/vendor/holder.min.js "assets/js/src/*.js"
 [INFO] 
-[ERROR] INFO: Using input source map: dist/js/bootstrap.js.map
+[INFO] 
+[INFO] > bootstrap@4.1.1 js-minify-bundle __CURRENT__/tobago-theme-charlotteville/target/bootstrap
+[INFO] > uglifyjs --compress typeofs=false --mangle --comments "/^!/" --source-map "content=dist/js/bootstrap.bundle.js.map,includeSources,url=bootstrap.bundle.min.js.map" --output dist/js/bootstrap.bundle.min.js dist/js/bootstrap.bundle.js
+[INFO] 
 [ERROR] INFO: Using input source map: dist/js/bootstrap.bundle.js.map
+[ERROR] INFO: Using input source map: dist/js/bootstrap.js.map
 [INFO] 
 [INFO] --- maven-resources-plugin:2.7:resources (default-resources) @ tobago-theme-charlotteville ---
 [INFO] Using 'UTF-8' encoding to copy filtered resources.
@@ -219,6 +219,6 @@
 [INFO] ------------------------------------------------------------------------
 [INFO] BUILD SUCCESS
 [INFO] ------------------------------------------------------------------------
-[INFO] Total time: 02:31 min
-[INFO] Finished at: 2018-07-05T15:19:26+02:00
+[INFO] Total time: 02:38 min
+[INFO] Finished at: 2018-08-14T23:20:42+02:00
 [INFO] ------------------------------------------------------------------------
diff --git a/tobago-theme/tobago-theme-charlotteville/src/main/resources/META-INF/resources/tobago/charlotteville/tobago-bootstrap/_version/css/bootstrap.css b/tobago-theme/tobago-theme-charlotteville/src/main/resources/META-INF/resources/tobago/charlotteville/tobago-bootstrap/_version/css/bootstrap.css
index b62d73f..e8a7b91 100644
--- a/tobago-theme/tobago-theme-charlotteville/src/main/resources/META-INF/resources/tobago/charlotteville/tobago-bootstrap/_version/css/bootstrap.css
+++ b/tobago-theme/tobago-theme-charlotteville/src/main/resources/META-INF/resources/tobago/charlotteville/tobago-bootstrap/_version/css/bootstrap.css
@@ -9215,34 +9215,16 @@ XXX workaround for Bootstrap with datetimepicker needed for popups
 .tobago-gridLayout {
   display: -ms-grid;
   display: grid;
-  /*
-      border-spacing: 5px;
-      border-collapse: separate;
-  */
   border-spacing: 0;
   border-collapse: collapse;
+  grid-column-gap: 1rem;
+  -webkit-column-gap: 1rem;
+  -moz-column-gap: 1rem;
+  column-gap: 1rem;
 }
 
-table.tobago-gridLayout > tbody > tr > td {
-  vertical-align: top;
-  padding: 0;
-  border-left: 5px solid transparent;
-  border-top: 5px solid transparent;
-  height: 100%;
-  /* needed for Firefox */
-}
-
-table.tobago-gridLayout > tbody > tr > td > * {
+.tobago-label-container > .tobago-textarea, .tobago-label-container > .tobago-selectOneChoice, .tobago-label-container > .tobago-selectManyListbox, .tobago-label-container > .tobago-selectManyShuttle {
   height: 100%;
-  width: 100%;
-}
-
-table.tobago-gridLayout > tbody > tr > td:first-child {
-  border-left: 0;
-}
-
-table.tobago-gridLayout > tbody > tr:first-child > td {
-  border-top: 0;
 }
 
 /* header ----------------------------------------------------------- */
diff --git a/tobago-theme/tobago-theme-charlotteville/src/main/resources/META-INF/resources/tobago/charlotteville/tobago-bootstrap/_version/css/bootstrap.css.map b/tobago-theme/tobago-theme-charlotteville/src/main/resources/META-INF/resources/tobago/charlotteville/tobago-bootstrap/_version/css/bootstrap.css.map
index 6d416bf..7d1a308 100644
--- a/tobago-theme/tobago-theme-charlotteville/src/main/resources/META-INF/resources/tobago/charlotteville/tobago-bootstrap/_version/css/bootstrap.css.map
+++ b/tobago-theme/tobago-theme-charlotteville/src/main/resources/META-INF/resources/tobago/charlotteville/tobago-bootstrap/_version/css/bootstrap.css.map
@@ -1 +1 @@
-{"version":3,"sources":["bootstrap.css","../../scss/bootstrap.scss","../../scss/_custom.scss","../../scss/_root.scss","../../scss/_reboot.scss","../../scss/_variables.scss","../../scss/mixins/_hover.scss","../../scss/_type.scss","../../scss/mixins/_lists.scss","../../scss/_images.scss","../../scss/mixins/_image.scss","../../scss/mixins/_border-radius.scss","../../scss/_code.scss","../../scss/_grid.scss","../../scss/mixins/_grid.scss","../../scss/mixins/_breakpoints.scss","../../scss/mixi [...]
\ No newline at end of file
+{"version":3,"sources":["bootstrap.css","../../scss/bootstrap.scss","../../scss/_custom.scss","../../scss/_root.scss","../../scss/_reboot.scss","../../scss/_variables.scss","../../scss/mixins/_hover.scss","../../scss/_type.scss","../../scss/mixins/_lists.scss","../../scss/_images.scss","../../scss/mixins/_image.scss","../../scss/mixins/_border-radius.scss","../../scss/_code.scss","../../scss/_grid.scss","../../scss/mixins/_grid.scss","../../scss/mixins/_breakpoints.scss","../../scss/mixi [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-charlotteville/src/main/resources/META-INF/resources/tobago/charlotteville/tobago-bootstrap/_version/css/bootstrap.min.css b/tobago-theme/tobago-theme-charlotteville/src/main/resources/META-INF/resources/tobago/charlotteville/tobago-bootstrap/_version/css/bootstrap.min.css
index 954c9ca..f69d1f1 100644
--- a/tobago-theme/tobago-theme-charlotteville/src/main/resources/META-INF/resources/tobago/charlotteville/tobago-bootstrap/_version/css/bootstrap.min.css
+++ b/tobago-theme/tobago-theme-charlotteville/src/main/resources/META-INF/resources/tobago/charlotteville/tobago-bootstrap/_version/css/bootstrap.min.css
@@ -3,5 +3,5 @@
  * Copyright 2011-2018 The Bootstrap Authors
  * Copyright 2011-2018 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
- */:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545;--orange:#fd7e14;--yellow:#ffc107;--green:#28a745;--teal:#20c997;--cyan:#17a2b8;--white:#fff;--gray:#6c757d;--gray-dark:#343a40;--primary:#529696;--secondary:#b2a76d;--success:#abf5ff;--info:#389c30;--warning:#ff00be;--danger:#ff00be;--light:#ffffff;--dark:#529696;--breakpoint-xs:0;--breakpoint-sm:576px;--breakpoint-md:768px;--breakpoint-lg:992px;--breakpoint-xl:1200px;--font-family-sans-serif:-apple-s [...]
+ */:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545;--orange:#fd7e14;--yellow:#ffc107;--green:#28a745;--teal:#20c997;--cyan:#17a2b8;--white:#fff;--gray:#6c757d;--gray-dark:#343a40;--primary:#529696;--secondary:#b2a76d;--success:#abf5ff;--info:#389c30;--warning:#ff00be;--danger:#ff00be;--light:#ffffff;--dark:#529696;--breakpoint-xs:0;--breakpoint-sm:576px;--breakpoint-md:768px;--breakpoint-lg:992px;--breakpoint-xl:1200px;--font-family-sans-serif:-apple-s [...]
 /*# sourceMappingURL=bootstrap.min.css.map */
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-charlotteville/src/main/resources/META-INF/resources/tobago/charlotteville/tobago-bootstrap/_version/css/bootstrap.min.css.map b/tobago-theme/tobago-theme-charlotteville/src/main/resources/META-INF/resources/tobago/charlotteville/tobago-bootstrap/_version/css/bootstrap.min.css.map
index 4b6f53b..795d30c 100644
--- a/tobago-theme/tobago-theme-charlotteville/src/main/resources/META-INF/resources/tobago/charlotteville/tobago-bootstrap/_version/css/bootstrap.min.css.map
+++ b/tobago-theme/tobago-theme-charlotteville/src/main/resources/META-INF/resources/tobago/charlotteville/tobago-bootstrap/_version/css/bootstrap.min.css.map
@@ -1 +1 @@
-{"version":3,"sources":["../../scss/bootstrap.scss","../../scss/_root.scss","../../scss/_reboot.scss","dist/css/bootstrap.css","bootstrap.css","../../scss/mixins/_hover.scss","../../scss/_type.scss","../../scss/mixins/_lists.scss","../../scss/_images.scss","../../scss/mixins/_image.scss","../../scss/mixins/_border-radius.scss","../../scss/_code.scss","../../scss/_grid.scss","../../scss/mixins/_grid.scss","../../scss/mixins/_breakpoints.scss","../../scss/mixins/_grid-framework.scss","../. [...]
\ No newline at end of file
+{"version":3,"sources":["../../scss/bootstrap.scss","../../scss/_root.scss","../../scss/_reboot.scss","dist/css/bootstrap.css","bootstrap.css","../../scss/mixins/_hover.scss","../../scss/_type.scss","../../scss/mixins/_lists.scss","../../scss/_images.scss","../../scss/mixins/_image.scss","../../scss/mixins/_border-radius.scss","../../scss/_code.scss","../../scss/_grid.scss","../../scss/mixins/_grid.scss","../../scss/mixins/_breakpoints.scss","../../scss/mixins/_grid-framework.scss","../. [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-roxborough/rebuild-theme.txt b/tobago-theme/tobago-theme-roxborough/rebuild-theme.txt
index b6b7732..dba9f41 100644
--- a/tobago-theme/tobago-theme-roxborough/rebuild-theme.txt
+++ b/tobago-theme/tobago-theme-roxborough/rebuild-theme.txt
@@ -84,7 +84,7 @@
 [INFO] 
 [WARNING] npm WARN bootstrap@4.1.1 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer dependencies yourself.
 [ERROR] 
-[INFO] added 1613 packages in 57.788s
+[INFO] added 1613 packages in 71.348s
 [INFO] 
 [INFO] --- frontend-maven-plugin:1.6:npm (step #8: npm run css-compile) @ tobago-theme-roxborough ---
 [INFO] Running 'npm run css-compile' in __CURRENT__/tobago-theme-roxborough/target/bootstrap
@@ -93,11 +93,11 @@
 [INFO] > node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss/bootstrap.scss dist/css/bootstrap.css && node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss/bootstrap-grid.scss dist/css/bootstrap-grid.css && node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss/bootstrap-reboot.scss dist/css/bootstrap-reboot.css
 [INFO] 
 [ERROR] Rendering Complete, saving .css file...
-[ERROR] Wrote CSS to __CURRENT__/tobago-theme-roxborough/target/bootstrap/dist/css/bootstrap.css
 [ERROR] Wrote Source Map to __CURRENT__/tobago-theme-roxborough/target/bootstrap/dist/css/bootstrap.css.map
+[ERROR] Wrote CSS to __CURRENT__/tobago-theme-roxborough/target/bootstrap/dist/css/bootstrap.css
 [ERROR] Rendering Complete, saving .css file...
-[ERROR] Wrote Source Map to __CURRENT__/tobago-theme-roxborough/target/bootstrap/dist/css/bootstrap-grid.css.map
 [ERROR] Wrote CSS to __CURRENT__/tobago-theme-roxborough/target/bootstrap/dist/css/bootstrap-grid.css
+[ERROR] Wrote Source Map to __CURRENT__/tobago-theme-roxborough/target/bootstrap/dist/css/bootstrap-grid.css.map
 [ERROR] Rendering Complete, saving .css file...
 [ERROR] Wrote Source Map to __CURRENT__/tobago-theme-roxborough/target/bootstrap/dist/css/bootstrap-reboot.css.map
 [ERROR] Wrote CSS to __CURRENT__/tobago-theme-roxborough/target/bootstrap/dist/css/bootstrap-reboot.css
@@ -139,34 +139,30 @@
 [INFO] > rollup --environment BUNDLE:false --config build/rollup.config.js --sourcemap
 [INFO] 
 [INFO] 
-[INFO] > bootstrap@4.1.1 js-compile-bundle __CURRENT__/tobago-theme-roxborough/target/bootstrap
-[INFO] > rollup --environment BUNDLE:true --config build/rollup.config.js --sourcemap
+[INFO] > bootstrap@4.1.1 js-compile-plugins __CURRENT__/tobago-theme-roxborough/target/bootstrap
+[INFO] > cross-env PLUGINS=true babel js/src/ --out-dir js/dist/ --source-maps
 [INFO] 
 [INFO] 
 [INFO] > bootstrap@4.1.1 js-compile-plugins-coverage __CURRENT__/tobago-theme-roxborough/target/bootstrap
 [INFO] > cross-env PLUGINS=true NODE_ENV=test babel js/src/ --out-dir js/coverage/dist/ --source-maps
 [INFO] 
 [INFO] 
-[INFO] > bootstrap@4.1.1 js-compile-plugins __CURRENT__/tobago-theme-roxborough/target/bootstrap
-[INFO] > cross-env PLUGINS=true babel js/src/ --out-dir js/dist/ --source-maps
+[INFO] > bootstrap@4.1.1 js-compile-bundle __CURRENT__/tobago-theme-roxborough/target/bootstrap
+[INFO] > rollup --environment BUNDLE:true --config build/rollup.config.js --sourcemap
 [INFO] 
 [ERROR] 
 [ERROR] __CURRENT__/tobago-theme-roxborough/target/bootstrap/js/src/index.js → dist/js/bootstrap.js...
 [ERROR] 
 [ERROR] __CURRENT__/tobago-theme-roxborough/target/bootstrap/js/src/index.js → dist/js/bootstrap.bundle.js...
 [INFO] 🎉  Successfully compiled 12 files with Babel.
-[ERROR] created dist/js/bootstrap.js in 9.3s
-[ERROR] created dist/js/bootstrap.bundle.js in 9.7s
+[ERROR] created dist/js/bootstrap.js in 9.2s
+[ERROR] created dist/js/bootstrap.bundle.js in 9.9s
 [INFO] 🎉  Successfully compiled 12 files with Babel.
 [INFO] 
 [INFO] > bootstrap@4.1.1 js-minify __CURRENT__/tobago-theme-roxborough/target/bootstrap
 [INFO] > npm-run-all --parallel js-minify-*
 [INFO] 
 [INFO] 
-[INFO] > bootstrap@4.1.1 js-minify-standalone __CURRENT__/tobago-theme-roxborough/target/bootstrap
-[INFO] > uglifyjs --compress typeofs=false --mangle --comments "/^!/" --source-map "content=dist/js/bootstrap.js.map,includeSources,url=bootstrap.min.js.map" --output dist/js/bootstrap.min.js dist/js/bootstrap.js
-[INFO] 
-[INFO] 
 [INFO] > bootstrap@4.1.1 js-minify-bundle __CURRENT__/tobago-theme-roxborough/target/bootstrap
 [INFO] > uglifyjs --compress typeofs=false --mangle --comments "/^!/" --source-map "content=dist/js/bootstrap.bundle.js.map,includeSources,url=bootstrap.bundle.min.js.map" --output dist/js/bootstrap.bundle.min.js dist/js/bootstrap.bundle.js
 [INFO] 
@@ -174,6 +170,10 @@
 [INFO] > bootstrap@4.1.1 js-minify-docs __CURRENT__/tobago-theme-roxborough/target/bootstrap
 [INFO] > uglifyjs --mangle --comments "/^!/" --output assets/js/docs.min.js assets/js/vendor/anchor.min.js assets/js/vendor/clipboard.min.js assets/js/vendor/holder.min.js "assets/js/src/*.js"
 [INFO] 
+[INFO] 
+[INFO] > bootstrap@4.1.1 js-minify-standalone __CURRENT__/tobago-theme-roxborough/target/bootstrap
+[INFO] > uglifyjs --compress typeofs=false --mangle --comments "/^!/" --source-map "content=dist/js/bootstrap.js.map,includeSources,url=bootstrap.min.js.map" --output dist/js/bootstrap.min.js dist/js/bootstrap.js
+[INFO] 
 [ERROR] INFO: Using input source map: dist/js/bootstrap.bundle.js.map
 [ERROR] INFO: Using input source map: dist/js/bootstrap.js.map
 [INFO] 
@@ -219,6 +219,6 @@
 [INFO] ------------------------------------------------------------------------
 [INFO] BUILD SUCCESS
 [INFO] ------------------------------------------------------------------------
-[INFO] Total time: 02:31 min
-[INFO] Finished at: 2018-07-05T15:19:27+02:00
+[INFO] Total time: 02:38 min
+[INFO] Finished at: 2018-08-14T23:20:41+02:00
 [INFO] ------------------------------------------------------------------------
diff --git a/tobago-theme/tobago-theme-roxborough/src/main/resources/META-INF/resources/tobago/roxborough/tobago-bootstrap/_version/css/bootstrap.css b/tobago-theme/tobago-theme-roxborough/src/main/resources/META-INF/resources/tobago/roxborough/tobago-bootstrap/_version/css/bootstrap.css
index b800008..2d20aea 100644
--- a/tobago-theme/tobago-theme-roxborough/src/main/resources/META-INF/resources/tobago/roxborough/tobago-bootstrap/_version/css/bootstrap.css
+++ b/tobago-theme/tobago-theme-roxborough/src/main/resources/META-INF/resources/tobago/roxborough/tobago-bootstrap/_version/css/bootstrap.css
@@ -9246,34 +9246,16 @@ XXX workaround for Bootstrap with datetimepicker needed for popups
 .tobago-gridLayout {
   display: -ms-grid;
   display: grid;
-  /*
-      border-spacing: 5px;
-      border-collapse: separate;
-  */
   border-spacing: 0;
   border-collapse: collapse;
+  grid-column-gap: 1rem;
+  -webkit-column-gap: 1rem;
+  -moz-column-gap: 1rem;
+  column-gap: 1rem;
 }
 
-table.tobago-gridLayout > tbody > tr > td {
-  vertical-align: top;
-  padding: 0;
-  border-left: 5px solid transparent;
-  border-top: 5px solid transparent;
-  height: 100%;
-  /* needed for Firefox */
-}
-
-table.tobago-gridLayout > tbody > tr > td > * {
+.tobago-label-container > .tobago-textarea, .tobago-label-container > .tobago-selectOneChoice, .tobago-label-container > .tobago-selectManyListbox, .tobago-label-container > .tobago-selectManyShuttle {
   height: 100%;
-  width: 100%;
-}
-
-table.tobago-gridLayout > tbody > tr > td:first-child {
-  border-left: 0;
-}
-
-table.tobago-gridLayout > tbody > tr:first-child > td {
-  border-top: 0;
 }
 
 /* header ----------------------------------------------------------- */
diff --git a/tobago-theme/tobago-theme-roxborough/src/main/resources/META-INF/resources/tobago/roxborough/tobago-bootstrap/_version/css/bootstrap.css.map b/tobago-theme/tobago-theme-roxborough/src/main/resources/META-INF/resources/tobago/roxborough/tobago-bootstrap/_version/css/bootstrap.css.map
index 22a70eb..b36b8b8 100644
--- a/tobago-theme/tobago-theme-roxborough/src/main/resources/META-INF/resources/tobago/roxborough/tobago-bootstrap/_version/css/bootstrap.css.map
+++ b/tobago-theme/tobago-theme-roxborough/src/main/resources/META-INF/resources/tobago/roxborough/tobago-bootstrap/_version/css/bootstrap.css.map
@@ -1 +1 @@
-{"version":3,"sources":["bootstrap.css","../../scss/bootstrap.scss","../../scss/_custom.scss","../../scss/_root.scss","../../scss/_reboot.scss","../../scss/_variables.scss","../../scss/mixins/_hover.scss","../../scss/_type.scss","../../scss/mixins/_lists.scss","../../scss/_images.scss","../../scss/mixins/_image.scss","../../scss/mixins/_border-radius.scss","../../scss/_code.scss","../../scss/_grid.scss","../../scss/mixins/_grid.scss","../../scss/mixins/_breakpoints.scss","../../scss/mixi [...]
\ No newline at end of file
+{"version":3,"sources":["bootstrap.css","../../scss/bootstrap.scss","../../scss/_custom.scss","../../scss/_root.scss","../../scss/_reboot.scss","../../scss/_variables.scss","../../scss/mixins/_hover.scss","../../scss/_type.scss","../../scss/mixins/_lists.scss","../../scss/_images.scss","../../scss/mixins/_image.scss","../../scss/mixins/_border-radius.scss","../../scss/_code.scss","../../scss/_grid.scss","../../scss/mixins/_grid.scss","../../scss/mixins/_breakpoints.scss","../../scss/mixi [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-roxborough/src/main/resources/META-INF/resources/tobago/roxborough/tobago-bootstrap/_version/css/bootstrap.min.css b/tobago-theme/tobago-theme-roxborough/src/main/resources/META-INF/resources/tobago/roxborough/tobago-bootstrap/_version/css/bootstrap.min.css
index b718c8b..e3b48e4 100644
--- a/tobago-theme/tobago-theme-roxborough/src/main/resources/META-INF/resources/tobago/roxborough/tobago-bootstrap/_version/css/bootstrap.min.css
+++ b/tobago-theme/tobago-theme-roxborough/src/main/resources/META-INF/resources/tobago/roxborough/tobago-bootstrap/_version/css/bootstrap.min.css
@@ -3,5 +3,5 @@
  * Copyright 2011-2018 The Bootstrap Authors
  * Copyright 2011-2018 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
- */@font-face{font-family:Amaranth;font-style:normal;font-weight:400;src:url(../fonts/Amaranth-Regular.otf) format("opentype")}@font-face{font-family:Amaranth;font-style:normal;font-weight:700;src:url(../fonts/Amaranth-Bold.otf) format("opentype")}@font-face{font-family:Amaranth;font-style:italic;src:url(../fonts/Amaranth-Italic.otf) format("opentype")}@font-face{font-family:Amaranth;font-style:italic;font-weight:700;src:url(../fonts/Amaranth-BoldItalic.otf) format("opentype")}.tobago-bo [...]
+ */@font-face{font-family:Amaranth;font-style:normal;font-weight:400;src:url(../fonts/Amaranth-Regular.otf) format("opentype")}@font-face{font-family:Amaranth;font-style:normal;font-weight:700;src:url(../fonts/Amaranth-Bold.otf) format("opentype")}@font-face{font-family:Amaranth;font-style:italic;src:url(../fonts/Amaranth-Italic.otf) format("opentype")}@font-face{font-family:Amaranth;font-style:italic;font-weight:700;src:url(../fonts/Amaranth-BoldItalic.otf) format("opentype")}.tobago-bo [...]
 /*# sourceMappingURL=bootstrap.min.css.map */
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-roxborough/src/main/resources/META-INF/resources/tobago/roxborough/tobago-bootstrap/_version/css/bootstrap.min.css.map b/tobago-theme/tobago-theme-roxborough/src/main/resources/META-INF/resources/tobago/roxborough/tobago-bootstrap/_version/css/bootstrap.min.css.map
index 3f43915..7bbc2c6 100644
--- a/tobago-theme/tobago-theme-roxborough/src/main/resources/META-INF/resources/tobago/roxborough/tobago-bootstrap/_version/css/bootstrap.min.css.map
+++ b/tobago-theme/tobago-theme-roxborough/src/main/resources/META-INF/resources/tobago/roxborough/tobago-bootstrap/_version/css/bootstrap.min.css.map
@@ -1 +1 @@
-{"version":3,"sources":["../../scss/bootstrap.scss","../../scss/_custom.scss","../../scss/_root.scss","../../scss/_reboot.scss","dist/css/bootstrap.css","bootstrap.css","../../scss/mixins/_hover.scss","../../scss/_type.scss","../../scss/mixins/_lists.scss","../../scss/_images.scss","../../scss/mixins/_image.scss","../../scss/mixins/_border-radius.scss","../../scss/_code.scss","../../scss/_grid.scss","../../scss/mixins/_grid.scss","../../scss/mixins/_breakpoints.scss","../../scss/mixins/_ [...]
\ No newline at end of file
+{"version":3,"sources":["../../scss/bootstrap.scss","../../scss/_custom.scss","../../scss/_root.scss","../../scss/_reboot.scss","dist/css/bootstrap.css","bootstrap.css","../../scss/mixins/_hover.scss","../../scss/_type.scss","../../scss/mixins/_lists.scss","../../scss/_images.scss","../../scss/mixins/_image.scss","../../scss/mixins/_border-radius.scss","../../scss/_code.scss","../../scss/_grid.scss","../../scss/mixins/_grid.scss","../../scss/mixins/_breakpoints.scss","../../scss/mixins/_ [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-scarborough/rebuild-theme.txt b/tobago-theme/tobago-theme-scarborough/rebuild-theme.txt
index ee0a020..aec3bb2 100644
--- a/tobago-theme/tobago-theme-scarborough/rebuild-theme.txt
+++ b/tobago-theme/tobago-theme-scarborough/rebuild-theme.txt
@@ -84,7 +84,7 @@
 [INFO] 
 [WARNING] npm WARN bootstrap@4.1.1 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer dependencies yourself.
 [ERROR] 
-[INFO] added 1613 packages in 57.859s
+[INFO] added 1613 packages in 71.573s
 [INFO] 
 [INFO] --- frontend-maven-plugin:1.6:npm (step #8: npm run css-compile) @ tobago-theme-scarborough ---
 [INFO] Running 'npm run css-compile' in __CURRENT__/tobago-theme-scarborough/target/bootstrap
@@ -139,24 +139,24 @@
 [INFO] > rollup --environment BUNDLE:false --config build/rollup.config.js --sourcemap
 [INFO] 
 [INFO] 
-[INFO] > bootstrap@4.1.1 js-compile-plugins-coverage __CURRENT__/tobago-theme-scarborough/target/bootstrap
-[INFO] > cross-env PLUGINS=true NODE_ENV=test babel js/src/ --out-dir js/coverage/dist/ --source-maps
+[INFO] > bootstrap@4.1.1 js-compile-bundle __CURRENT__/tobago-theme-scarborough/target/bootstrap
+[INFO] > rollup --environment BUNDLE:true --config build/rollup.config.js --sourcemap
 [INFO] 
 [INFO] 
 [INFO] > bootstrap@4.1.1 js-compile-plugins __CURRENT__/tobago-theme-scarborough/target/bootstrap
 [INFO] > cross-env PLUGINS=true babel js/src/ --out-dir js/dist/ --source-maps
 [INFO] 
 [INFO] 
-[INFO] > bootstrap@4.1.1 js-compile-bundle __CURRENT__/tobago-theme-scarborough/target/bootstrap
-[INFO] > rollup --environment BUNDLE:true --config build/rollup.config.js --sourcemap
+[INFO] > bootstrap@4.1.1 js-compile-plugins-coverage __CURRENT__/tobago-theme-scarborough/target/bootstrap
+[INFO] > cross-env PLUGINS=true NODE_ENV=test babel js/src/ --out-dir js/coverage/dist/ --source-maps
 [INFO] 
 [ERROR] 
-[ERROR] __CURRENT__/tobago-theme-scarborough/target/bootstrap/js/src/index.js → dist/js/bootstrap.bundle.js...
-[ERROR] 
 [ERROR] __CURRENT__/tobago-theme-scarborough/target/bootstrap/js/src/index.js → dist/js/bootstrap.js...
+[ERROR] 
+[ERROR] __CURRENT__/tobago-theme-scarborough/target/bootstrap/js/src/index.js → dist/js/bootstrap.bundle.js...
 [INFO] 🎉  Successfully compiled 12 files with Babel.
-[ERROR] created dist/js/bootstrap.js in 9.3s
-[ERROR] created dist/js/bootstrap.bundle.js in 9.9s
+[ERROR] created dist/js/bootstrap.js in 9.2s
+[ERROR] created dist/js/bootstrap.bundle.js in 9.7s
 [INFO] 🎉  Successfully compiled 12 files with Babel.
 [INFO] 
 [INFO] > bootstrap@4.1.1 js-minify __CURRENT__/tobago-theme-scarborough/target/bootstrap
@@ -219,6 +219,6 @@
 [INFO] ------------------------------------------------------------------------
 [INFO] BUILD SUCCESS
 [INFO] ------------------------------------------------------------------------
-[INFO] Total time: 02:31 min
-[INFO] Finished at: 2018-07-05T15:19:27+02:00
+[INFO] Total time: 02:38 min
+[INFO] Finished at: 2018-08-14T23:20:41+02:00
 [INFO] ------------------------------------------------------------------------
diff --git a/tobago-theme/tobago-theme-scarborough/src/main/resources/META-INF/resources/tobago/scarborough/tobago-bootstrap/_version/css/bootstrap.css b/tobago-theme/tobago-theme-scarborough/src/main/resources/META-INF/resources/tobago/scarborough/tobago-bootstrap/_version/css/bootstrap.css
index e874298..b8a149d 100644
--- a/tobago-theme/tobago-theme-scarborough/src/main/resources/META-INF/resources/tobago/scarborough/tobago-bootstrap/_version/css/bootstrap.css
+++ b/tobago-theme/tobago-theme-scarborough/src/main/resources/META-INF/resources/tobago/scarborough/tobago-bootstrap/_version/css/bootstrap.css
@@ -9249,34 +9249,16 @@ XXX workaround for Bootstrap with datetimepicker needed for popups
 .tobago-gridLayout {
   display: -ms-grid;
   display: grid;
-  /*
-      border-spacing: 5px;
-      border-collapse: separate;
-  */
   border-spacing: 0;
   border-collapse: collapse;
+  grid-column-gap: 1rem;
+  -webkit-column-gap: 1rem;
+  -moz-column-gap: 1rem;
+  column-gap: 1rem;
 }
 
-table.tobago-gridLayout > tbody > tr > td {
-  vertical-align: top;
-  padding: 0;
-  border-left: 5px solid transparent;
-  border-top: 5px solid transparent;
-  height: 100%;
-  /* needed for Firefox */
-}
-
-table.tobago-gridLayout > tbody > tr > td > * {
+.tobago-label-container > .tobago-textarea, .tobago-label-container > .tobago-selectOneChoice, .tobago-label-container > .tobago-selectManyListbox, .tobago-label-container > .tobago-selectManyShuttle {
   height: 100%;
-  width: 100%;
-}
-
-table.tobago-gridLayout > tbody > tr > td:first-child {
-  border-left: 0;
-}
-
-table.tobago-gridLayout > tbody > tr:first-child > td {
-  border-top: 0;
 }
 
 /* header ----------------------------------------------------------- */
diff --git a/tobago-theme/tobago-theme-scarborough/src/main/resources/META-INF/resources/tobago/scarborough/tobago-bootstrap/_version/css/bootstrap.css.map b/tobago-theme/tobago-theme-scarborough/src/main/resources/META-INF/resources/tobago/scarborough/tobago-bootstrap/_version/css/bootstrap.css.map
index 9287940..9dbe00a 100644
--- a/tobago-theme/tobago-theme-scarborough/src/main/resources/META-INF/resources/tobago/scarborough/tobago-bootstrap/_version/css/bootstrap.css.map
+++ b/tobago-theme/tobago-theme-scarborough/src/main/resources/META-INF/resources/tobago/scarborough/tobago-bootstrap/_version/css/bootstrap.css.map
@@ -1 +1 @@
-{"version":3,"sources":["bootstrap.css","../../scss/bootstrap.scss","../../scss/_custom.scss","../../scss/_root.scss","../../scss/_reboot.scss","../../scss/_variables.scss","../../scss/mixins/_hover.scss","../../scss/_type.scss","../../scss/mixins/_lists.scss","../../scss/_images.scss","../../scss/mixins/_image.scss","../../scss/mixins/_border-radius.scss","../../scss/_code.scss","../../scss/_grid.scss","../../scss/mixins/_grid.scss","../../scss/mixins/_breakpoints.scss","../../scss/mixi [...]
\ No newline at end of file
+{"version":3,"sources":["bootstrap.css","../../scss/bootstrap.scss","../../scss/_custom.scss","../../scss/_root.scss","../../scss/_reboot.scss","../../scss/_variables.scss","../../scss/mixins/_hover.scss","../../scss/_type.scss","../../scss/mixins/_lists.scss","../../scss/_images.scss","../../scss/mixins/_image.scss","../../scss/mixins/_border-radius.scss","../../scss/_code.scss","../../scss/_grid.scss","../../scss/mixins/_grid.scss","../../scss/mixins/_breakpoints.scss","../../scss/mixi [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-scarborough/src/main/resources/META-INF/resources/tobago/scarborough/tobago-bootstrap/_version/css/bootstrap.min.css b/tobago-theme/tobago-theme-scarborough/src/main/resources/META-INF/resources/tobago/scarborough/tobago-bootstrap/_version/css/bootstrap.min.css
index f66d0cc..34b7463 100644
--- a/tobago-theme/tobago-theme-scarborough/src/main/resources/META-INF/resources/tobago/scarborough/tobago-bootstrap/_version/css/bootstrap.min.css
+++ b/tobago-theme/tobago-theme-scarborough/src/main/resources/META-INF/resources/tobago/scarborough/tobago-bootstrap/_version/css/bootstrap.min.css
@@ -3,5 +3,5 @@
  * Copyright 2011-2018 The Bootstrap Authors
  * Copyright 2011-2018 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
- */:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545;--orange:#fd7e14;--yellow:#ffc107;--green:#28a745;--teal:#20c997;--cyan:#17a2b8;--white:#fff;--gray:#6c757d;--gray-dark:#343a40;--primary:#007bff;--secondary:#6c757d;--success:#28a745;--info:#17a2b8;--warning:#ffc107;--danger:#dc3545;--light:#f8f9fa;--dark:#343a40;--breakpoint-xs:0;--breakpoint-sm:576px;--breakpoint-md:768px;--breakpoint-lg:992px;--breakpoint-xl:1200px;--font-family-sans-serif:-apple-s [...]
+ */:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545;--orange:#fd7e14;--yellow:#ffc107;--green:#28a745;--teal:#20c997;--cyan:#17a2b8;--white:#fff;--gray:#6c757d;--gray-dark:#343a40;--primary:#007bff;--secondary:#6c757d;--success:#28a745;--info:#17a2b8;--warning:#ffc107;--danger:#dc3545;--light:#f8f9fa;--dark:#343a40;--breakpoint-xs:0;--breakpoint-sm:576px;--breakpoint-md:768px;--breakpoint-lg:992px;--breakpoint-xl:1200px;--font-family-sans-serif:-apple-s [...]
 /*# sourceMappingURL=bootstrap.min.css.map */
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-scarborough/src/main/resources/META-INF/resources/tobago/scarborough/tobago-bootstrap/_version/css/bootstrap.min.css.map b/tobago-theme/tobago-theme-scarborough/src/main/resources/META-INF/resources/tobago/scarborough/tobago-bootstrap/_version/css/bootstrap.min.css.map
index d8415f0..1254348 100644
--- a/tobago-theme/tobago-theme-scarborough/src/main/resources/META-INF/resources/tobago/scarborough/tobago-bootstrap/_version/css/bootstrap.min.css.map
+++ b/tobago-theme/tobago-theme-scarborough/src/main/resources/META-INF/resources/tobago/scarborough/tobago-bootstrap/_version/css/bootstrap.min.css.map
@@ -1 +1 @@
-{"version":3,"sources":["../../scss/bootstrap.scss","../../scss/_root.scss","../../scss/_reboot.scss","dist/css/bootstrap.css","bootstrap.css","../../scss/mixins/_hover.scss","../../scss/_type.scss","../../scss/mixins/_lists.scss","../../scss/_images.scss","../../scss/mixins/_image.scss","../../scss/mixins/_border-radius.scss","../../scss/_code.scss","../../scss/_grid.scss","../../scss/mixins/_grid.scss","../../scss/mixins/_breakpoints.scss","../../scss/mixins/_grid-framework.scss","../. [...]
\ No newline at end of file
+{"version":3,"sources":["../../scss/bootstrap.scss","../../scss/_root.scss","../../scss/_reboot.scss","dist/css/bootstrap.css","bootstrap.css","../../scss/mixins/_hover.scss","../../scss/_type.scss","../../scss/mixins/_lists.scss","../../scss/_images.scss","../../scss/mixins/_image.scss","../../scss/mixins/_border-radius.scss","../../scss/_code.scss","../../scss/_grid.scss","../../scss/mixins/_grid.scss","../../scss/mixins/_breakpoints.scss","../../scss/mixins/_grid-framework.scss","../. [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-speyside/rebuild-theme.txt b/tobago-theme/tobago-theme-speyside/rebuild-theme.txt
index f6ca5ad..e57a729 100644
--- a/tobago-theme/tobago-theme-speyside/rebuild-theme.txt
+++ b/tobago-theme/tobago-theme-speyside/rebuild-theme.txt
@@ -84,7 +84,7 @@
 [INFO] 
 [WARNING] npm WARN bootstrap@4.1.1 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer dependencies yourself.
 [ERROR] 
-[INFO] added 1613 packages in 58.006s
+[INFO] added 1613 packages in 71.586s
 [INFO] 
 [INFO] --- frontend-maven-plugin:1.6:npm (step #8: npm run css-compile) @ tobago-theme-speyside ---
 [INFO] Running 'npm run css-compile' in __CURRENT__/tobago-theme-speyside/target/bootstrap
@@ -96,11 +96,11 @@
 [ERROR] Wrote CSS to __CURRENT__/tobago-theme-speyside/target/bootstrap/dist/css/bootstrap.css
 [ERROR] Wrote Source Map to __CURRENT__/tobago-theme-speyside/target/bootstrap/dist/css/bootstrap.css.map
 [ERROR] Rendering Complete, saving .css file...
-[ERROR] Wrote CSS to __CURRENT__/tobago-theme-speyside/target/bootstrap/dist/css/bootstrap-grid.css
 [ERROR] Wrote Source Map to __CURRENT__/tobago-theme-speyside/target/bootstrap/dist/css/bootstrap-grid.css.map
+[ERROR] Wrote CSS to __CURRENT__/tobago-theme-speyside/target/bootstrap/dist/css/bootstrap-grid.css
 [ERROR] Rendering Complete, saving .css file...
-[ERROR] Wrote CSS to __CURRENT__/tobago-theme-speyside/target/bootstrap/dist/css/bootstrap-reboot.css
 [ERROR] Wrote Source Map to __CURRENT__/tobago-theme-speyside/target/bootstrap/dist/css/bootstrap-reboot.css.map
+[ERROR] Wrote CSS to __CURRENT__/tobago-theme-speyside/target/bootstrap/dist/css/bootstrap-reboot.css
 [INFO] 
 [INFO] --- frontend-maven-plugin:1.6:npm (step #9: npm run css-prefix) @ tobago-theme-speyside ---
 [INFO] Running 'npm run css-prefix' in __CURRENT__/tobago-theme-speyside/target/bootstrap
@@ -135,10 +135,6 @@
 [INFO] > npm-run-all --parallel js-compile-*
 [INFO] 
 [INFO] 
-[INFO] > bootstrap@4.1.1 js-compile-standalone __CURRENT__/tobago-theme-speyside/target/bootstrap
-[INFO] > rollup --environment BUNDLE:false --config build/rollup.config.js --sourcemap
-[INFO] 
-[INFO] 
 [INFO] > bootstrap@4.1.1 js-compile-bundle __CURRENT__/tobago-theme-speyside/target/bootstrap
 [INFO] > rollup --environment BUNDLE:true --config build/rollup.config.js --sourcemap
 [INFO] 
@@ -150,19 +146,27 @@
 [INFO] > bootstrap@4.1.1 js-compile-plugins __CURRENT__/tobago-theme-speyside/target/bootstrap
 [INFO] > cross-env PLUGINS=true babel js/src/ --out-dir js/dist/ --source-maps
 [INFO] 
-[ERROR] 
-[ERROR] __CURRENT__/tobago-theme-speyside/target/bootstrap/js/src/index.js → dist/js/bootstrap.js...
+[INFO] 
+[INFO] > bootstrap@4.1.1 js-compile-standalone __CURRENT__/tobago-theme-speyside/target/bootstrap
+[INFO] > rollup --environment BUNDLE:false --config build/rollup.config.js --sourcemap
+[INFO] 
 [ERROR] 
 [ERROR] __CURRENT__/tobago-theme-speyside/target/bootstrap/js/src/index.js → dist/js/bootstrap.bundle.js...
+[ERROR] 
+[ERROR] __CURRENT__/tobago-theme-speyside/target/bootstrap/js/src/index.js → dist/js/bootstrap.js...
 [INFO] 🎉  Successfully compiled 12 files with Babel.
-[ERROR] created dist/js/bootstrap.js in 9s
-[ERROR] created dist/js/bootstrap.bundle.js in 9.4s
+[ERROR] created dist/js/bootstrap.js in 9.1s
+[ERROR] created dist/js/bootstrap.bundle.js in 9.7s
 [INFO] 🎉  Successfully compiled 12 files with Babel.
 [INFO] 
 [INFO] > bootstrap@4.1.1 js-minify __CURRENT__/tobago-theme-speyside/target/bootstrap
 [INFO] > npm-run-all --parallel js-minify-*
 [INFO] 
 [INFO] 
+[INFO] > bootstrap@4.1.1 js-minify-standalone __CURRENT__/tobago-theme-speyside/target/bootstrap
+[INFO] > uglifyjs --compress typeofs=false --mangle --comments "/^!/" --source-map "content=dist/js/bootstrap.js.map,includeSources,url=bootstrap.min.js.map" --output dist/js/bootstrap.min.js dist/js/bootstrap.js
+[INFO] 
+[INFO] 
 [INFO] > bootstrap@4.1.1 js-minify-bundle __CURRENT__/tobago-theme-speyside/target/bootstrap
 [INFO] > uglifyjs --compress typeofs=false --mangle --comments "/^!/" --source-map "content=dist/js/bootstrap.bundle.js.map,includeSources,url=bootstrap.bundle.min.js.map" --output dist/js/bootstrap.bundle.min.js dist/js/bootstrap.bundle.js
 [INFO] 
@@ -170,12 +174,8 @@
 [INFO] > bootstrap@4.1.1 js-minify-docs __CURRENT__/tobago-theme-speyside/target/bootstrap
 [INFO] > uglifyjs --mangle --comments "/^!/" --output assets/js/docs.min.js assets/js/vendor/anchor.min.js assets/js/vendor/clipboard.min.js assets/js/vendor/holder.min.js "assets/js/src/*.js"
 [INFO] 
-[INFO] 
-[INFO] > bootstrap@4.1.1 js-minify-standalone __CURRENT__/tobago-theme-speyside/target/bootstrap
-[INFO] > uglifyjs --compress typeofs=false --mangle --comments "/^!/" --source-map "content=dist/js/bootstrap.js.map,includeSources,url=bootstrap.min.js.map" --output dist/js/bootstrap.min.js dist/js/bootstrap.js
-[INFO] 
-[ERROR] INFO: Using input source map: dist/js/bootstrap.bundle.js.map
 [ERROR] INFO: Using input source map: dist/js/bootstrap.js.map
+[ERROR] INFO: Using input source map: dist/js/bootstrap.bundle.js.map
 [INFO] 
 [INFO] --- maven-resources-plugin:2.7:resources (default-resources) @ tobago-theme-speyside ---
 [INFO] Using 'UTF-8' encoding to copy filtered resources.
@@ -219,6 +219,6 @@
 [INFO] ------------------------------------------------------------------------
 [INFO] BUILD SUCCESS
 [INFO] ------------------------------------------------------------------------
-[INFO] Total time: 02:32 min
-[INFO] Finished at: 2018-07-05T15:19:27+02:00
+[INFO] Total time: 02:38 min
+[INFO] Finished at: 2018-08-14T23:20:42+02:00
 [INFO] ------------------------------------------------------------------------
diff --git a/tobago-theme/tobago-theme-speyside/src/main/resources/META-INF/resources/tobago/speyside/tobago-bootstrap/_version/css/bootstrap.css b/tobago-theme/tobago-theme-speyside/src/main/resources/META-INF/resources/tobago/speyside/tobago-bootstrap/_version/css/bootstrap.css
index 15e5bc6..8fc3747 100644
--- a/tobago-theme/tobago-theme-speyside/src/main/resources/META-INF/resources/tobago/speyside/tobago-bootstrap/_version/css/bootstrap.css
+++ b/tobago-theme/tobago-theme-speyside/src/main/resources/META-INF/resources/tobago/speyside/tobago-bootstrap/_version/css/bootstrap.css
@@ -9000,34 +9000,16 @@ XXX workaround for Bootstrap with datetimepicker needed for popups
 .tobago-gridLayout {
   display: -ms-grid;
   display: grid;
-  /*
-      border-spacing: 5px;
-      border-collapse: separate;
-  */
   border-spacing: 0;
   border-collapse: collapse;
+  grid-column-gap: 1rem;
+  -webkit-column-gap: 1rem;
+  -moz-column-gap: 1rem;
+  column-gap: 1rem;
 }
 
-table.tobago-gridLayout > tbody > tr > td {
-  vertical-align: top;
-  padding: 0;
-  border-left: 5px solid transparent;
-  border-top: 5px solid transparent;
-  height: 100%;
-  /* needed for Firefox */
-}
-
-table.tobago-gridLayout > tbody > tr > td > * {
+.tobago-label-container > .tobago-textarea, .tobago-label-container > .tobago-selectOneChoice, .tobago-label-container > .tobago-selectManyListbox, .tobago-label-container > .tobago-selectManyShuttle {
   height: 100%;
-  width: 100%;
-}
-
-table.tobago-gridLayout > tbody > tr > td:first-child {
-  border-left: 0;
-}
-
-table.tobago-gridLayout > tbody > tr:first-child > td {
-  border-top: 0;
 }
 
 /* header ----------------------------------------------------------- */
diff --git a/tobago-theme/tobago-theme-speyside/src/main/resources/META-INF/resources/tobago/speyside/tobago-bootstrap/_version/css/bootstrap.css.map b/tobago-theme/tobago-theme-speyside/src/main/resources/META-INF/resources/tobago/speyside/tobago-bootstrap/_version/css/bootstrap.css.map
index adff676..a780187 100644
--- a/tobago-theme/tobago-theme-speyside/src/main/resources/META-INF/resources/tobago/speyside/tobago-bootstrap/_version/css/bootstrap.css.map
+++ b/tobago-theme/tobago-theme-speyside/src/main/resources/META-INF/resources/tobago/speyside/tobago-bootstrap/_version/css/bootstrap.css.map
@@ -1 +1 @@
-{"version":3,"sources":["bootstrap.css","../../scss/bootstrap.scss","../../scss/_custom.scss","../../scss/_root.scss","../../scss/_reboot.scss","../../scss/_variables.scss","../../scss/mixins/_hover.scss","../../scss/_type.scss","../../scss/mixins/_lists.scss","../../scss/_images.scss","../../scss/mixins/_image.scss","../../scss/_code.scss","../../scss/_grid.scss","../../scss/mixins/_grid.scss","../../scss/mixins/_breakpoints.scss","../../scss/mixins/_grid-framework.scss","../../scss/_ta [...]
\ No newline at end of file
+{"version":3,"sources":["bootstrap.css","../../scss/bootstrap.scss","../../scss/_custom.scss","../../scss/_root.scss","../../scss/_reboot.scss","../../scss/_variables.scss","../../scss/mixins/_hover.scss","../../scss/_type.scss","../../scss/mixins/_lists.scss","../../scss/_images.scss","../../scss/mixins/_image.scss","../../scss/_code.scss","../../scss/_grid.scss","../../scss/mixins/_grid.scss","../../scss/mixins/_breakpoints.scss","../../scss/mixins/_grid-framework.scss","../../scss/_ta [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-speyside/src/main/resources/META-INF/resources/tobago/speyside/tobago-bootstrap/_version/css/bootstrap.min.css b/tobago-theme/tobago-theme-speyside/src/main/resources/META-INF/resources/tobago/speyside/tobago-bootstrap/_version/css/bootstrap.min.css
index 53423a1..87cca7c 100644
--- a/tobago-theme/tobago-theme-speyside/src/main/resources/META-INF/resources/tobago/speyside/tobago-bootstrap/_version/css/bootstrap.min.css
+++ b/tobago-theme/tobago-theme-speyside/src/main/resources/META-INF/resources/tobago/speyside/tobago-bootstrap/_version/css/bootstrap.min.css
@@ -3,5 +3,5 @@
  * Copyright 2011-2018 The Bootstrap Authors
  * Copyright 2011-2018 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
- */:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545;--orange:#fd7e14;--yellow:#ffc107;--green:#28a745;--teal:#20c997;--cyan:#17a2b8;--white:#fff;--gray:#6c757d;--gray-dark:#343a40;--primary:#185722;--secondary:#d7d7d7;--success:#1da332;--info:#5bc0de;--warning:#f0ad4e;--danger:#d30040;--light:#f7f7f7;--dark:#323232;--breakpoint-xs:0;--breakpoint-sm:576px;--breakpoint-md:768px;--breakpoint-lg:992px;--breakpoint-xl:1200px;--font-family-sans-serif:verdana, [...]
+ */:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545;--orange:#fd7e14;--yellow:#ffc107;--green:#28a745;--teal:#20c997;--cyan:#17a2b8;--white:#fff;--gray:#6c757d;--gray-dark:#343a40;--primary:#185722;--secondary:#d7d7d7;--success:#1da332;--info:#5bc0de;--warning:#f0ad4e;--danger:#d30040;--light:#f7f7f7;--dark:#323232;--breakpoint-xs:0;--breakpoint-sm:576px;--breakpoint-md:768px;--breakpoint-lg:992px;--breakpoint-xl:1200px;--font-family-sans-serif:verdana, [...]
 /*# sourceMappingURL=bootstrap.min.css.map */
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-speyside/src/main/resources/META-INF/resources/tobago/speyside/tobago-bootstrap/_version/css/bootstrap.min.css.map b/tobago-theme/tobago-theme-speyside/src/main/resources/META-INF/resources/tobago/speyside/tobago-bootstrap/_version/css/bootstrap.min.css.map
index d0d0b43..8533194 100644
--- a/tobago-theme/tobago-theme-speyside/src/main/resources/META-INF/resources/tobago/speyside/tobago-bootstrap/_version/css/bootstrap.min.css.map
+++ b/tobago-theme/tobago-theme-speyside/src/main/resources/META-INF/resources/tobago/speyside/tobago-bootstrap/_version/css/bootstrap.min.css.map
@@ -1 +1 @@
-{"version":3,"sources":["../../scss/bootstrap.scss","../../scss/_root.scss","../../scss/_reboot.scss","dist/css/bootstrap.css","bootstrap.css","../../scss/mixins/_hover.scss","../../scss/_type.scss","../../scss/mixins/_lists.scss","../../scss/_images.scss","../../scss/mixins/_image.scss","../../scss/_code.scss","../../scss/_grid.scss","../../scss/mixins/_grid.scss","../../scss/mixins/_breakpoints.scss","../../scss/mixins/_grid-framework.scss","../../scss/_tables.scss","../../scss/mixins/ [...]
\ No newline at end of file
+{"version":3,"sources":["../../scss/bootstrap.scss","../../scss/_root.scss","../../scss/_reboot.scss","dist/css/bootstrap.css","bootstrap.css","../../scss/mixins/_hover.scss","../../scss/_type.scss","../../scss/mixins/_lists.scss","../../scss/_images.scss","../../scss/mixins/_image.scss","../../scss/_code.scss","../../scss/_grid.scss","../../scss/mixins/_grid.scss","../../scss/mixins/_breakpoints.scss","../../scss/mixins/_grid-framework.scss","../../scss/_tables.scss","../../scss/mixins/ [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-standard/rebuild-theme.txt b/tobago-theme/tobago-theme-standard/rebuild-theme.txt
index 1de748b..8a85e67 100644
--- a/tobago-theme/tobago-theme-standard/rebuild-theme.txt
+++ b/tobago-theme/tobago-theme-standard/rebuild-theme.txt
@@ -84,7 +84,7 @@
 [INFO] 
 [WARNING] npm WARN bootstrap@4.1.1 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer dependencies yourself.
 [ERROR] 
-[INFO] added 1613 packages in 58.528s
+[INFO] added 1613 packages in 45.852s
 [INFO] 
 [INFO] --- frontend-maven-plugin:1.6:npm (step #8: npm run css-compile) @ tobago-theme-standard ---
 [INFO] Running 'npm run css-compile' in __CURRENT__/tobago-theme-standard/target/bootstrap
@@ -93,14 +93,14 @@
 [INFO] > node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss/bootstrap.scss dist/css/bootstrap.css && node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss/bootstrap-grid.scss dist/css/bootstrap-grid.css && node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss/bootstrap-reboot.scss dist/css/bootstrap-reboot.css
 [INFO] 
 [ERROR] Rendering Complete, saving .css file...
-[ERROR] Wrote CSS to __CURRENT__/tobago-theme-standard/target/bootstrap/dist/css/bootstrap.css
 [ERROR] Wrote Source Map to __CURRENT__/tobago-theme-standard/target/bootstrap/dist/css/bootstrap.css.map
+[ERROR] Wrote CSS to __CURRENT__/tobago-theme-standard/target/bootstrap/dist/css/bootstrap.css
 [ERROR] Rendering Complete, saving .css file...
-[ERROR] Wrote CSS to __CURRENT__/tobago-theme-standard/target/bootstrap/dist/css/bootstrap-grid.css
 [ERROR] Wrote Source Map to __CURRENT__/tobago-theme-standard/target/bootstrap/dist/css/bootstrap-grid.css.map
+[ERROR] Wrote CSS to __CURRENT__/tobago-theme-standard/target/bootstrap/dist/css/bootstrap-grid.css
 [ERROR] Rendering Complete, saving .css file...
-[ERROR] Wrote Source Map to __CURRENT__/tobago-theme-standard/target/bootstrap/dist/css/bootstrap-reboot.css.map
 [ERROR] Wrote CSS to __CURRENT__/tobago-theme-standard/target/bootstrap/dist/css/bootstrap-reboot.css
+[ERROR] Wrote Source Map to __CURRENT__/tobago-theme-standard/target/bootstrap/dist/css/bootstrap-reboot.css.map
 [INFO] 
 [INFO] --- frontend-maven-plugin:1.6:npm (step #9: npm run css-prefix) @ tobago-theme-standard ---
 [INFO] Running 'npm run css-prefix' in __CURRENT__/tobago-theme-standard/target/bootstrap
@@ -143,34 +143,34 @@
 [INFO] > rollup --environment BUNDLE:true --config build/rollup.config.js --sourcemap
 [INFO] 
 [INFO] 
-[INFO] > bootstrap@4.1.1 js-compile-plugins __CURRENT__/tobago-theme-standard/target/bootstrap
-[INFO] > cross-env PLUGINS=true babel js/src/ --out-dir js/dist/ --source-maps
-[INFO] 
-[INFO] 
 [INFO] > bootstrap@4.1.1 js-compile-plugins-coverage __CURRENT__/tobago-theme-standard/target/bootstrap
 [INFO] > cross-env PLUGINS=true NODE_ENV=test babel js/src/ --out-dir js/coverage/dist/ --source-maps
 [INFO] 
+[INFO] 
+[INFO] > bootstrap@4.1.1 js-compile-plugins __CURRENT__/tobago-theme-standard/target/bootstrap
+[INFO] > cross-env PLUGINS=true babel js/src/ --out-dir js/dist/ --source-maps
+[INFO] 
 [ERROR] 
 [ERROR] __CURRENT__/tobago-theme-standard/target/bootstrap/js/src/index.js → dist/js/bootstrap.js...
 [ERROR] 
 [ERROR] __CURRENT__/tobago-theme-standard/target/bootstrap/js/src/index.js → dist/js/bootstrap.bundle.js...
 [INFO] 🎉  Successfully compiled 12 files with Babel.
-[ERROR] created dist/js/bootstrap.js in 9s
-[ERROR] created dist/js/bootstrap.bundle.js in 9.3s
+[ERROR] created dist/js/bootstrap.js in 6.5s
+[ERROR] created dist/js/bootstrap.bundle.js in 6.9s
 [INFO] 🎉  Successfully compiled 12 files with Babel.
 [INFO] 
 [INFO] > bootstrap@4.1.1 js-minify __CURRENT__/tobago-theme-standard/target/bootstrap
 [INFO] > npm-run-all --parallel js-minify-*
 [INFO] 
 [INFO] 
-[INFO] > bootstrap@4.1.1 js-minify-standalone __CURRENT__/tobago-theme-standard/target/bootstrap
-[INFO] > uglifyjs --compress typeofs=false --mangle --comments "/^!/" --source-map "content=dist/js/bootstrap.js.map,includeSources,url=bootstrap.min.js.map" --output dist/js/bootstrap.min.js dist/js/bootstrap.js
-[INFO] 
-[INFO] 
 [INFO] > bootstrap@4.1.1 js-minify-docs __CURRENT__/tobago-theme-standard/target/bootstrap
 [INFO] > uglifyjs --mangle --comments "/^!/" --output assets/js/docs.min.js assets/js/vendor/anchor.min.js assets/js/vendor/clipboard.min.js assets/js/vendor/holder.min.js "assets/js/src/*.js"
 [INFO] 
 [INFO] 
+[INFO] > bootstrap@4.1.1 js-minify-standalone __CURRENT__/tobago-theme-standard/target/bootstrap
+[INFO] > uglifyjs --compress typeofs=false --mangle --comments "/^!/" --source-map "content=dist/js/bootstrap.js.map,includeSources,url=bootstrap.min.js.map" --output dist/js/bootstrap.min.js dist/js/bootstrap.js
+[INFO] 
+[INFO] 
 [INFO] > bootstrap@4.1.1 js-minify-bundle __CURRENT__/tobago-theme-standard/target/bootstrap
 [INFO] > uglifyjs --compress typeofs=false --mangle --comments "/^!/" --source-map "content=dist/js/bootstrap.bundle.js.map,includeSources,url=bootstrap.bundle.min.js.map" --output dist/js/bootstrap.bundle.min.js dist/js/bootstrap.bundle.js
 [INFO] 
@@ -219,7 +219,7 @@ main:
  T E S T S
 -------------------------------------------------------
 Running org.apache.myfaces.tobago.renderkit.css.BootstrapClassUnitTest
-Tests run: 3, Failures: 0, Errors: 0, Skipped: 0, Time elapsed: 0.271 sec - in org.apache.myfaces.tobago.renderkit.css.BootstrapClassUnitTest
+Tests run: 3, Failures: 0, Errors: 0, Skipped: 0, Time elapsed: 0.457 sec - in org.apache.myfaces.tobago.renderkit.css.BootstrapClassUnitTest
 
 Results :
 
@@ -238,6 +238,6 @@ Tests run: 3, Failures: 0, Errors: 0, Skipped: 0
 [INFO] ------------------------------------------------------------------------
 [INFO] BUILD SUCCESS
 [INFO] ------------------------------------------------------------------------
-[INFO] Total time: 02:36 min
-[INFO] Finished at: 2018-07-05T15:19:32+02:00
+[INFO] Total time: 02:49 min
+[INFO] Finished at: 2018-08-14T23:20:53+02:00
 [INFO] ------------------------------------------------------------------------
diff --git a/tobago-theme/tobago-theme-standard/src/main/resources/META-INF/resources/tobago/standard/tobago-bootstrap/_version/css/bootstrap.css b/tobago-theme/tobago-theme-standard/src/main/resources/META-INF/resources/tobago/standard/tobago-bootstrap/_version/css/bootstrap.css
index 2fcc1f6..2dd287e 100644
--- a/tobago-theme/tobago-theme-standard/src/main/resources/META-INF/resources/tobago/standard/tobago-bootstrap/_version/css/bootstrap.css
+++ b/tobago-theme/tobago-theme-standard/src/main/resources/META-INF/resources/tobago/standard/tobago-bootstrap/_version/css/bootstrap.css
@@ -9215,34 +9215,16 @@ XXX workaround for Bootstrap with datetimepicker needed for popups
 .tobago-gridLayout {
   display: -ms-grid;
   display: grid;
-  /*
-      border-spacing: 5px;
-      border-collapse: separate;
-  */
   border-spacing: 0;
   border-collapse: collapse;
+  grid-column-gap: 1rem;
+  -webkit-column-gap: 1rem;
+  -moz-column-gap: 1rem;
+  column-gap: 1rem;
 }
 
-table.tobago-gridLayout > tbody > tr > td {
-  vertical-align: top;
-  padding: 0;
-  border-left: 5px solid transparent;
-  border-top: 5px solid transparent;
-  height: 100%;
-  /* needed for Firefox */
-}
-
-table.tobago-gridLayout > tbody > tr > td > * {
+.tobago-label-container > .tobago-textarea, .tobago-label-container > .tobago-selectOneChoice, .tobago-label-container > .tobago-selectManyListbox, .tobago-label-container > .tobago-selectManyShuttle {
   height: 100%;
-  width: 100%;
-}
-
-table.tobago-gridLayout > tbody > tr > td:first-child {
-  border-left: 0;
-}
-
-table.tobago-gridLayout > tbody > tr:first-child > td {
-  border-top: 0;
 }
 
 /* header ----------------------------------------------------------- */
diff --git a/tobago-theme/tobago-theme-standard/src/main/resources/META-INF/resources/tobago/standard/tobago-bootstrap/_version/css/bootstrap.css.map b/tobago-theme/tobago-theme-standard/src/main/resources/META-INF/resources/tobago/standard/tobago-bootstrap/_version/css/bootstrap.css.map
index 1d7f532..c50ee1b 100644
--- a/tobago-theme/tobago-theme-standard/src/main/resources/META-INF/resources/tobago/standard/tobago-bootstrap/_version/css/bootstrap.css.map
+++ b/tobago-theme/tobago-theme-standard/src/main/resources/META-INF/resources/tobago/standard/tobago-bootstrap/_version/css/bootstrap.css.map
@@ -1 +1 @@
-{"version":3,"sources":["bootstrap.css","../../scss/bootstrap.scss","../../scss/_custom.scss","../../scss/_root.scss","../../scss/_reboot.scss","../../scss/_variables.scss","../../scss/mixins/_hover.scss","../../scss/_type.scss","../../scss/mixins/_lists.scss","../../scss/_images.scss","../../scss/mixins/_image.scss","../../scss/mixins/_border-radius.scss","../../scss/_code.scss","../../scss/_grid.scss","../../scss/mixins/_grid.scss","../../scss/mixins/_breakpoints.scss","../../scss/mixi [...]
\ No newline at end of file
+{"version":3,"sources":["bootstrap.css","../../scss/bootstrap.scss","../../scss/_custom.scss","../../scss/_root.scss","../../scss/_reboot.scss","../../scss/_variables.scss","../../scss/mixins/_hover.scss","../../scss/_type.scss","../../scss/mixins/_lists.scss","../../scss/_images.scss","../../scss/mixins/_image.scss","../../scss/mixins/_border-radius.scss","../../scss/_code.scss","../../scss/_grid.scss","../../scss/mixins/_grid.scss","../../scss/mixins/_breakpoints.scss","../../scss/mixi [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-standard/src/main/resources/META-INF/resources/tobago/standard/tobago-bootstrap/_version/css/bootstrap.min.css b/tobago-theme/tobago-theme-standard/src/main/resources/META-INF/resources/tobago/standard/tobago-bootstrap/_version/css/bootstrap.min.css
index 86dd621..8e811e1 100644
--- a/tobago-theme/tobago-theme-standard/src/main/resources/META-INF/resources/tobago/standard/tobago-bootstrap/_version/css/bootstrap.min.css
+++ b/tobago-theme/tobago-theme-standard/src/main/resources/META-INF/resources/tobago/standard/tobago-bootstrap/_version/css/bootstrap.min.css
@@ -3,5 +3,5 @@
  * Copyright 2011-2018 The Bootstrap Authors
  * Copyright 2011-2018 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
- */:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545;--orange:#fd7e14;--yellow:#ffc107;--green:#28a745;--teal:#20c997;--cyan:#17a2b8;--white:#fff;--gray:#6c757d;--gray-dark:#343a40;--primary:#007bff;--secondary:#6c757d;--success:#28a745;--info:#17a2b8;--warning:#ffc107;--danger:#dc3545;--light:#f8f9fa;--dark:#343a40;--breakpoint-xs:0;--breakpoint-sm:576px;--breakpoint-md:768px;--breakpoint-lg:992px;--breakpoint-xl:1200px;--font-family-sans-serif:-apple-s [...]
+ */:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545;--orange:#fd7e14;--yellow:#ffc107;--green:#28a745;--teal:#20c997;--cyan:#17a2b8;--white:#fff;--gray:#6c757d;--gray-dark:#343a40;--primary:#007bff;--secondary:#6c757d;--success:#28a745;--info:#17a2b8;--warning:#ffc107;--danger:#dc3545;--light:#f8f9fa;--dark:#343a40;--breakpoint-xs:0;--breakpoint-sm:576px;--breakpoint-md:768px;--breakpoint-lg:992px;--breakpoint-xl:1200px;--font-family-sans-serif:-apple-s [...]
 /*# sourceMappingURL=bootstrap.min.css.map */
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-standard/src/main/resources/META-INF/resources/tobago/standard/tobago-bootstrap/_version/css/bootstrap.min.css.map b/tobago-theme/tobago-theme-standard/src/main/resources/META-INF/resources/tobago/standard/tobago-bootstrap/_version/css/bootstrap.min.css.map
index d03152e..f742229 100644
--- a/tobago-theme/tobago-theme-standard/src/main/resources/META-INF/resources/tobago/standard/tobago-bootstrap/_version/css/bootstrap.min.css.map
+++ b/tobago-theme/tobago-theme-standard/src/main/resources/META-INF/resources/tobago/standard/tobago-bootstrap/_version/css/bootstrap.min.css.map
@@ -1 +1 @@
-{"version":3,"sources":["../../scss/bootstrap.scss","../../scss/_root.scss","../../scss/_reboot.scss","dist/css/bootstrap.css","bootstrap.css","../../scss/mixins/_hover.scss","../../scss/_type.scss","../../scss/mixins/_lists.scss","../../scss/_images.scss","../../scss/mixins/_image.scss","../../scss/mixins/_border-radius.scss","../../scss/_code.scss","../../scss/_grid.scss","../../scss/mixins/_grid.scss","../../scss/mixins/_breakpoints.scss","../../scss/mixins/_grid-framework.scss","../. [...]
\ No newline at end of file
+{"version":3,"sources":["../../scss/bootstrap.scss","../../scss/_root.scss","../../scss/_reboot.scss","dist/css/bootstrap.css","bootstrap.css","../../scss/mixins/_hover.scss","../../scss/_type.scss","../../scss/mixins/_lists.scss","../../scss/_images.scss","../../scss/mixins/_image.scss","../../scss/mixins/_border-radius.scss","../../scss/_code.scss","../../scss/_grid.scss","../../scss/mixins/_grid.scss","../../scss/mixins/_breakpoints.scss","../../scss/mixins/_grid-framework.scss","../. [...]
\ No newline at end of file
diff --git a/tobago-tool/tobago-tool-test/src/main/resources/META-INF/resources/tobago/test/tobago-test-tool.js b/tobago-tool/tobago-tool-test/src/main/resources/META-INF/resources/tobago/test/tobago-test-tool.js
index f6ada01..2ea854e 100644
--- a/tobago-tool/tobago-tool-test/src/main/resources/META-INF/resources/tobago/test/tobago-test-tool.js
+++ b/tobago-tool/tobago-tool-test/src/main/resources/META-INF/resources/tobago/test/tobago-test-tool.js
@@ -15,10 +15,7 @@
  * limitations under the License.
  */
 
-function TobagoTestTool(assert) {
-  this.assert = assert;
-  this.steps = [];
-}
+TobagoTestTool = {};
 
 TobagoTestTool.stepType = {
   ACTION: 1,
@@ -26,6 +23,49 @@ TobagoTestTool.stepType = {
   WAIT_MS: 3,
   ASSERTS: 4
 };
+
+TobagoTestTool.msie = navigator.userAgent.indexOf("MSIE") > -1 || navigator.userAgent.indexOf("Trident") > -1;
+
+TobagoTestTool.COLUMN_START = TobagoTestTool.msie ? "-ms-grid-column" : "grid-column-start";
+TobagoTestTool.COLUMN_END = TobagoTestTool.msie ? "-ms-grid-column-span" : "grid-column-end";
+TobagoTestTool.ROW_START = TobagoTestTool.msie ? "-ms-grid-row" : "grid-row-start";
+TobagoTestTool.ROW_END = TobagoTestTool.msie ? "-ms-grid-row-span" : "grid-row-end";
+
+TobagoTestTool.checkGridCss = function (assert, $element, columnStart, columnEnd, rowStart, rowEnd) {
+
+  columnEnd = TobagoTestTool.convertGridCss(columnEnd);
+  rowEnd = TobagoTestTool.convertGridCss(rowEnd);
+
+  assert.equal($element.css(TobagoTestTool.COLUMN_START), columnStart);
+  assert.equal($element.css(TobagoTestTool.COLUMN_END), columnEnd);
+  assert.equal($element.css(TobagoTestTool.ROW_START), rowStart);
+  assert.equal($element.css(TobagoTestTool.ROW_END), rowEnd);
+};
+
+TobagoTestTool.convertGridCss = function (end) {
+  if (TobagoTestTool.msie) {
+    switch (end) {
+      case "auto":
+        return "1";
+      case "span 2":
+        return "2";
+      case "span 3":
+        return "3";
+      case "span 4":
+        return "4";
+      default:
+        return end;
+    }
+  } else {
+    return end;
+  }
+};
+
+function TobagoTestTool(assert) {
+  this.assert = assert;
+  this.steps = [];
+}
+
 TobagoTestTool.prototype = {
   action: function (func) {
     this.steps.push({