N°635 Portal: Forms now have 3 differents layout (display_mode), see online documentation (when released) for more information.

SVN:trunk[4736]
2026-04-20 17:18:51 +02:00 · 2017-05-15 15:50:12 +00:00
parent 50970810d2
commit b213f2baea
9 changed files with 206 additions and 101 deletions
--- a/datamodels/2.x/itop-portal-base/portal/src/forms/objectformmanager.class.inc.php
+++ b/datamodels/2.x/itop-portal-base/portal/src/forms/objectformmanager.class.inc.php
@@ -660,8 +660,7 @@ class ObjectFormManager extends FormManager
 			// Setting field display mode
            if(array_key_exists($sAttCode, $aFieldsExtraData) && array_key_exists('display_mode', $aFieldsExtraData[$sAttCode]))
            {
-                $sFieldDisplayMode = ($aFieldsExtraData[$sAttCode]['display_mode'] === ApplicationHelper::FORM_ENUM_DISPLAY_MODE_COSY) ? Field::ENUM_DISPLAY_MODE_VERTICAL : Field::ENUM_DISPLAY_MODE_HORIZONTAL;
-                $oField->SetDisplayMode($sFieldDisplayMode);
+                $oField->SetDisplayMode($aFieldsExtraData[$sAttCode]['display_mode']);
            }

            $oForm->AddField($oField);
--- a/datamodels/2.x/itop-portal-base/portal/web/css/bootstrap-theme-combodo.css
+++ b/datamodels/2.x/itop-portal-base/portal/web/css/bootstrap-theme-combodo.css
@@ -438,11 +438,11 @@ pre code {
  padding-left: 15px;
  padding-right: 15px;
 }
-.row {
+.row, .form_field_compact .form-group.form_group_small {
  margin-left: -15px;
  margin-right: -15px;
 }
-.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
+.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .form_field_compact .form-group.form_group_small .form_field_label, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .form_field_compact .form-group.form_group_small .form_field_control, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
@@ -605,7 +605,7 @@ pre code {
  margin-left: 0%;
 }
@media (min-width: 768px) {
-  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
+  .col-sm-1, .col-sm-2, .col-sm-3, .form_field_compact .form-group.form_group_small .form_field_label, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .form_field_compact .form-group.form_group_small .form_field_control, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left;
  }
  .col-sm-12 {
@@ -617,7 +617,7 @@ pre code {
  .col-sm-10 {
    width: 83.33333%;
  }
-  .col-sm-9 {
+  .col-sm-9, .form_field_compact .form-group.form_group_small .form_field_control {
    width: 75%;
  }
  .col-sm-8 {
@@ -635,7 +635,7 @@ pre code {
  .col-sm-4 {
    width: 33.33333%;
  }
-  .col-sm-3 {
+  .col-sm-3, .form_field_compact .form-group.form_group_small .form_field_label {
    width: 25%;
  }
  .col-sm-2 {
@@ -4627,11 +4627,11 @@ button.close {
    bottom: 20px;
  }
 }
-.clearfix:before, .clearfix:after, .dl-horizontal dd:before, .dl-horizontal dd:after, .container:before, .container:after, .container-fluid:before, .container-fluid:after, .row:before, .row:after, .form-horizontal .form-group:before, .form-horizontal .form-group:after, .btn-toolbar:before, .btn-toolbar:after, .btn-group-vertical > .btn-group:before, .btn-group-vertical > .btn-group:after, .nav:before, .nav:after, .navbar:before, .navbar:after, .navbar-header:before, .navbar-header:after, .navbar-collapse:before, .navbar-collapse:after, .pager:before, .pager:after, .panel-body:before, .panel-body:after, .modal-footer:before, .modal-footer:after {
+.clearfix:before, .clearfix:after, .dl-horizontal dd:before, .dl-horizontal dd:after, .container:before, .container:after, .container-fluid:before, .container-fluid:after, .row:before, .form_field_compact .form-group.form_group_small:before, .row:after, .form_field_compact .form-group.form_group_small:after, .form-horizontal .form-group:before, .form-horizontal .form-group:after, .btn-toolbar:before, .btn-toolbar:after, .btn-group-vertical > .btn-group:before, .btn-group-vertical > .btn-group:after, .nav:before, .nav:after, .navbar:before, .navbar:after, .navbar-header:before, .navbar-header:after, .navbar-collapse:before, .navbar-collapse:after, .pager:before, .pager:after, .panel-body:before, .panel-body:after, .modal-footer:before, .modal-footer:after {
  content: " ";
  display: table;
 }
-.clearfix:after, .dl-horizontal dd:after, .container:after, .container-fluid:after, .row:after, .form-horizontal .form-group:after, .btn-toolbar:after, .btn-group-vertical > .btn-group:after, .nav:after, .navbar:after, .navbar-header:after, .navbar-collapse:after, .pager:after, .panel-body:after, .modal-footer:after {
+.clearfix:after, .dl-horizontal dd:after, .container:after, .container-fluid:after, .row:after, .form_field_compact .form-group.form_group_small:after, .form-horizontal .form-group:after, .btn-toolbar:after, .btn-group-vertical > .btn-group:after, .nav:after, .navbar:after, .navbar-header:after, .navbar-collapse:after, .pager:after, .panel-body:after, .modal-footer:after {
  clear: both;
 }
 .center-block {
@@ -4944,22 +4944,40 @@ label {
  color: #fff;
  background-color: #ea7d1e;
 }
-/* Compact form display */
-.form_compact .form-group.form_group_small {
-  margin-bottom: 10px;
-}
-.form_compact .form-group.form_group_small .control-label {
-  margin-right: 0.5em;
-}
-.form_compact .form-group.form_group_small .form-control-static {
-  display: inline;
-}
-.form_compact .form-group.form_group_small .form-control {
-  height: 28px;
-  padding: 4px 5px;
-  font-size: 12px;
-}
-.form_compact .form-group.form_group_small .input-group-addon {
-  padding: 4px 10px;
-  font-size: 12px;
+/* Form display modes */
+@media (min-width: 768px) {
+  /* Compact mode */
+  /* Dense mode */
+  .form_field_compact .form-group.form_group_small, .form_field_dense .form-group.form_group_small {
+    margin-bottom: 10px;
+  }
+  .form_field_compact .form-group.form_group_small .control-label, .form_field_dense .form-group.form_group_small .control-label {
+    margin-right: 0.5em;
+  }
+  .form_field_compact .form-group.form_group_small .form-control-static, .form_field_dense .form-group.form_group_small .form-control-static {
+    display: inline;
+  }
+  .form_field_compact .form-group.form_group_small .form-control, .form_field_dense .form-group.form_group_small .form-control {
+    height: 28px;
+    padding: 4px 5px;
+    font-size: 12px;
+  }
+  .form_field_compact .form-group.form_group_small .input-group-addon, .form_field_dense .form-group.form_group_small .input-group-addon {
+    padding: 4px 10px;
+    font-size: 12px;
+  }
+  .form_field_dense .form-group.form_group_small {
+    display: flex;
+    display: -webkit-flex;
+    display: -ms-flex;
+  }
+  .form_field_dense .form-group.form_group_small .form_field_label {
+    margin-right: 0.7em;
+    white-space: nowrap;
+  }
+  .form_field_dense .form-group.form_group_small .form_field_control {
+    flex-grow: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-grow: 1;
+  }
 }
--- a/datamodels/2.x/itop-portal-base/portal/web/css/bootstrap-theme-combodo.scss
+++ b/datamodels/2.x/itop-portal-base/portal/web/css/bootstrap-theme-combodo.scss
@@ -6031,23 +6031,53 @@ label {
    color: $btn-primary-color;
    background-color: $btn-primary-bg;
 }
-/* Compact form display */
-.form_compact .form-group.form_group_small{
-    margin-bottom: 10px;
+/* Form display modes */
+@media (min-width: 768px) {
+    .form_field_compact .form-group.form_group_small,
+    .form_field_dense .form-group.form_group_small{
+        margin-bottom: 10px;

-    .control-label{
-        margin-right: 0.5em;
+        .control-label{
+            margin-right: 0.5em;
+        }
+        .form-control-static{
+            display: inline;
+        }
+        .form-control{
+            height: 28px;
+            padding: 4px 5px;
+            font-size: 12px;
+        }
+        .input-group-addon {
+            padding: 4px 10px;
+            font-size: 12px;
+        }
    }
-    .form-control-static{
-        display: inline;
+    /* Compact mode */
+    .form_field_compact .form-group.form_group_small{
+        @extend .row;
+
+        .form_field_label{
+            @extend .col-sm-3;
+        }
+        .form_field_control{
+            @extend .col-sm-9;
+        }
    }
-    .form-control{
-        height: 28px;
-        padding: 4px 5px;
-        font-size: 12px;
+    /* Dense mode */
+    .form_field_dense .form-group.form_group_small{
+        display: flex;
+        display: -webkit-flex;
+        display: -ms-flex;
+
+        .form_field_label{
+            margin-right: 0.7em;
+            white-space: nowrap;
+        }
+        .form_field_control{
+            flex-grow: 1;
+            -webkit-flex-grow: 1;
+            -ms-flex-grow: 1;
+        }
    }
-    .input-group-addon {
-        padding: 4px 10px;
-        font-size: 12px;
-    }
-}
+}
--- a/sources/form/field/field.class.inc.php
+++ b/sources/form/field/field.class.inc.php
@@ -30,14 +30,15 @@ use \Combodo\iTop\Form\Validator\MandatoryValidator;
 */
 abstract class Field
 {
-    const ENUM_DISPLAY_MODE_VERTICAL = 'vertical';      // Label and value side by side
-    const ENUM_DISPLAY_MODE_HORIZONTAL = 'horizontal';  // Label above value
+    const ENUM_DISPLAY_MODE_COSY = 'cosy';          // Label above value
+    const ENUM_DISPLAY_MODE_COMPACT = 'compact';    // Label and value side by side
+    const ENUM_DISPLAY_MODE_DENSE = 'dense';        // Label and value side by side, closely

 	const DEFAULT_LABEL = '';
 	const DEFAULT_HIDDEN = false;
 	const DEFAULT_READ_ONLY = false;
 	const DEFAULT_MANDATORY = false;
-    const DEFAULT_DISPLAY_MODE = self::ENUM_DISPLAY_MODE_HORIZONTAL;
+    const DEFAULT_DISPLAY_MODE = self::ENUM_DISPLAY_MODE_COSY;
 	const DEFAULT_VALID = true;

 	protected $sId;
@@ -390,16 +391,6 @@ abstract class Field
 		return $this;
 	}

-    /**
-     * Returns if the field should be displayed horizontally (label and value side by side)
-     *
-     * @return bool
-     */
-	public function IsHorizontalDisplayMode()
-    {
-        return $this->sDisplayMode === static::ENUM_DISPLAY_MODE_HORIZONTAL;
-    }
-
 	/**
 	 * Returns if the field is editable. Meaning that it is not editable nor hidden.
 	 * 
--- a/sources/renderer/bootstrap/fieldrenderer/bsfileuploadfieldrenderer.class.inc.php
+++ b/sources/renderer/bootstrap/fieldrenderer/bsfileuploadfieldrenderer.class.inc.php
@@ -1,6 +1,6 @@
 <?php

-// Copyright (C) 2010-2016 Combodo SARL
+// Copyright (C) 2010-2017 Combodo SARL
 //
 //   This file is part of iTop.
 //
@@ -46,6 +46,7 @@ class BsFileUploadFieldRenderer extends FieldRenderer
 	public function Render()
 	{
 		$oOutput = new RenderingOutput();
+        $oOutput->AddCssClass('form_field_' . $this->oField->GetDisplayMode());

 		$sObjectClass = get_class($this->oField->GetObject());
 		$sIsDeleteAllowed = ($this->oField->GetAllowDelete() && !$this->oField->GetReadOnly()) ? 'true' : 'false';
@@ -55,12 +56,18 @@ class BsFileUploadFieldRenderer extends FieldRenderer

 		// Starting field container
 		$oOutput->AddHtml('<div class="form-group">');
-		// Field label
-		if ($this->oField->GetLabel() !== '')
+
+		// Label
+        $oOutput->AddHtml('<div class="form_field_label">');
+        if ($this->oField->GetLabel() !== '')
 		{
 			$oOutput->AddHtml('<label for="' . $this->oField->GetGlobalId() . '" class="control-label">')->AddHtml($this->oField->GetLabel(), true)->AddHtml('</label>');
 		}
-		// Field feedback
+        $oOutput->AddHtml('</div>');
+
+        // Value
+        $oOutput->AddHtml('<div class="form_field_control">');
+		// - Field feedback
 		$oOutput->AddHtml('<div class="help-block"></div>');
 		// Starting files container
 		$oOutput->AddHtml('<div class="fileupload_field_content">');
@@ -68,6 +75,7 @@ class BsFileUploadFieldRenderer extends FieldRenderer
 		$oOutput->AddHtml('<div class="attachments_container row">');
 		$this->PrepareExistingFiles($oOutput);
 		$oOutput->Addhtml('</div>');
+
 		// Removing upload input if in read only
 		// TODO : Add max upload size when itop attachment has been refactored
 		if (!$this->oField->GetReadOnly())
@@ -75,7 +83,9 @@ class BsFileUploadFieldRenderer extends FieldRenderer
 			$oOutput->AddHtml('<div class="upload_container row">' . Dict::S('Attachments:AddAttachment') . '<input type="file" id="' . $this->oField->GetGlobalId() . '" name="' . $this->oField->GetId() . '" /><span class="loader glyphicon glyphicon-refresh"></span></div>');
 		}
 		// Ending files container
-		$oOutput->AddHtml('</div>');
+        $oOutput->AddHtml('</div>');
+        $oOutput->AddHtml('</div>');
+
 		// Ending field container
 		$oOutput->AddHtml('</div>');
 		
--- a/sources/renderer/bootstrap/fieldrenderer/bslinkedsetfieldrenderer.class.inc.php
+++ b/sources/renderer/bootstrap/fieldrenderer/bslinkedsetfieldrenderer.class.inc.php
@@ -1,6 +1,6 @@
 <?php

-// Copyright (C) 2010-2016 Combodo SARL
+// Copyright (C) 2010-2017 Combodo SARL
 //
 //   This file is part of iTop.
 //
@@ -47,6 +47,8 @@ class BsLinkedSetFieldRenderer extends FieldRenderer
 	public function Render()
 	{
 	    $oOutput = new RenderingOutput();
+        $oOutput->AddCssClass('form_field_' . $this->oField->GetDisplayMode());
+
 		$sFieldMandatoryClass = ($this->oField->GetMandatory()) ? 'form_mandatory' : '';
 		// Vars to build the table
 		$sAttributesToDisplayAsJson = json_encode($this->oField->GetAttributesToDisplay());
--- a/sources/renderer/bootstrap/fieldrenderer/bsselectobjectfieldrenderer.class.inc.php
+++ b/sources/renderer/bootstrap/fieldrenderer/bsselectobjectfieldrenderer.class.inc.php
@@ -1,6 +1,6 @@
 <?php

-// Copyright (C) 2010-2016 Combodo SARL
+// Copyright (C) 2010-2017 Combodo SARL
 //
 //   This file is part of iTop.
 //
@@ -48,9 +48,10 @@ class BsSelectObjectFieldRenderer extends FieldRenderer
 	public function Render()
 	{
 		$oOutput = new RenderingOutput();
+        $oOutput->AddCssClass('form_field_' . $this->oField->GetDisplayMode());
+
 		$sFieldValueClass = $this->oField->GetSearch()->GetClass();
 		$sFieldMandatoryClass = ($this->oField->GetMandatory()) ? 'form_mandatory' : '';
-        $sFieldContainerClass = ($this->oField->IsHorizontalDisplayMode() && !$this->oField->GetHidden()) ? 'row' : '';
 		$iFieldControlType = $this->oField->GetControlType();

 		// TODO : Remove this when hierarchical search supported
@@ -61,18 +62,18 @@ class BsSelectObjectFieldRenderer extends FieldRenderer
 		{
 			// Rendering field
            // - Opening container
-			$oOutput->AddHtml('<div class="form-group form_group_small ' . $sFieldMandatoryClass . ' ' . $sFieldContainerClass . '">');
+			$oOutput->AddHtml('<div class="form-group form_group_small ' . $sFieldMandatoryClass . '">');

 			// Label
-            if($this->oField->IsHorizontalDisplayMode()){ $oOutput->AddHtml('<div class="col-sm-3">'); }
+            $oOutput->AddHtml('<div class="form_field_label">');
 			if ($this->oField->GetLabel() !== '')
 			{
 				$oOutput->AddHtml('<label for="' . $this->oField->GetGlobalId() . '" class="control-label">')->AddHtml($this->oField->GetLabel(), true)->AddHtml('</label>');
 			}
-            if($this->oField->IsHorizontalDisplayMode()){ $oOutput->AddHtml('</div>'); }
+            $oOutput->AddHtml('</div>');

            // Value
-            if($this->oField->IsHorizontalDisplayMode()){ $oOutput->AddHtml('<div class="col-sm-9">'); }
+            $oOutput->AddHtml('<div class="form_field_control">');
 			$oOutput->AddHtml('<div class="help-block"></div>');
 			// - As a select
 			// TODO : This should be changed when we do the radio button display. For now we display everything with select
@@ -299,7 +300,7 @@ EOF
 					);
 				}
 			}
-            if($this->oField->IsHorizontalDisplayMode()){ $oOutput->AddHtml('</div>'); }
+            $oOutput->AddHtml('</div>');

            // - Closing container
 			$oOutput->AddHtml('</div>');
@@ -320,23 +321,23 @@ EOF
 			}

 			// Opening container
-			$oOutput->AddHtml('<div class="form-group form_group_small ' . $sFieldContainerClass . '">');
+			$oOutput->AddHtml('<div class="form-group form_group_small">');

 			// Showing label / value only if read-only but not hidden
 			if (!$this->oField->GetHidden())
 			{
 			    // Label
-                if($this->oField->IsHorizontalDisplayMode()){ $oOutput->AddHtml('<div class="col-sm-3">'); }
+                $oOutput->AddHtml('<div class="form_field_label">');
 				if ($this->oField->GetLabel() !== '')
 				{
 					$oOutput->AddHtml('<label for="' . $this->oField->GetGlobalId() . '" class="control-label">')->AddHtml($this->oField->GetLabel(), true)->AddHtml('</label>');
 				}
-                if($this->oField->IsHorizontalDisplayMode()){ $oOutput->AddHtml('</div>'); }
+                $oOutput->AddHtml('</div>');

                // Value
-                if($this->oField->IsHorizontalDisplayMode()){ $oOutput->AddHtml('<div class="col-sm-9">'); }
+                $oOutput->AddHtml('<div class="form_field_control">');
 				$oOutput->AddHtml('<div class="form-control-static">' . $sFieldValue . '</div>');
-                if($this->oField->IsHorizontalDisplayMode()){ $oOutput->AddHtml('</div>'); }
+                $oOutput->AddHtml('</div>');
 			}

 			// Adding hidden value
--- a/sources/renderer/bootstrap/fieldrenderer/bssimplefieldrenderer.class.inc.php
+++ b/sources/renderer/bootstrap/fieldrenderer/bssimplefieldrenderer.class.inc.php
@@ -45,9 +45,10 @@ class BsSimpleFieldRenderer extends FieldRenderer
 	public function Render()
 	{
 		$oOutput = new RenderingOutput();
+		$oOutput->AddCssClass('form_field_' . $this->oField->GetDisplayMode());
+
 		$sFieldClass = get_class($this->oField);
 		$sFieldMandatoryClass = ($this->oField->GetMandatory()) ? 'form_mandatory' : '';
-		$sFieldContainerClass = ($this->oField->IsHorizontalDisplayMode() && !$this->oField->GetHidden()) ? 'row' : '';
 		
 		// Rendering field in edition mode
 		if (!$this->oField->GetReadOnly() && !$this->oField->GetHidden())
@@ -61,18 +62,18 @@ class BsSimpleFieldRenderer extends FieldRenderer
                case 'Combodo\\iTop\\Form\\Field\\SelectField':
                case 'Combodo\\iTop\\Form\\Field\\MultipleSelectField':
                    // Opening container
-                    $oOutput->AddHtml('<div class="form-group form_group_small ' . $sFieldMandatoryClass . ' ' . $sFieldContainerClass . '">');
+                    $oOutput->AddHtml('<div class="form-group form_group_small ' . $sFieldMandatoryClass . '">');

                    // Label
-                    if($this->oField->IsHorizontalDisplayMode()){ $oOutput->AddHtml('<div class="col-sm-3">'); }
+                    $oOutput->AddHtml('<div class="form_field_label">');
                    if ($this->oField->GetLabel() !== '')
                    {
                        $oOutput->AddHtml('<label for="' . $this->oField->GetGlobalId() . '" class="control-label">')->AddHtml($this->oField->GetLabel(), true)->AddHtml('</label>');
                    }
-                    if($this->oField->IsHorizontalDisplayMode()){ $oOutput->AddHtml('</div>'); }
+                    $oOutput->AddHtml('</div>');

                    // Value
-                    if($this->oField->IsHorizontalDisplayMode()){ $oOutput->AddHtml('<div class="col-sm-9">'); }
+                    $oOutput->AddHtml('<div class="form_field_control">');
                    // - Help block
                    $oOutput->AddHtml('<div class="help-block"></div>');
                    // - Value regarding the field type
@@ -112,7 +113,7 @@ EOF
                            $oOutput->AddHtml('</select>');
                            break;
                    }
-                    if($this->oField->IsHorizontalDisplayMode()){ $oOutput->AddHtml('</div>'); }
+                    $oOutput->AddHtml('</div>');

                    // Closing container
                    $oOutput->AddHtml('</div>');
@@ -122,11 +123,20 @@ EOF
 				case 'Combodo\\iTop\\Form\\Field\\CaseLogField':
 					$bRichEditor = ($this->oField->GetFormat() === TextAreaField::ENUM_FORMAT_HTML);

+					// Opening container
 					$oOutput->AddHtml('<div class="form-group ' . $sFieldMandatoryClass . '">');
+
+					// Label
+                    $oOutput->AddHtml('<div class="form_field_label">');
 					if ($this->oField->GetLabel() !== '')
 					{
 						$oOutput->AddHtml('<label for="' . $this->oField->GetGlobalId() . '" class="control-label">')->AddHtml($this->oField->GetLabel(), true)->AddHtml('</label>');
 					}
+					$oOutput->AddHtml('</div>');
+
+					// Value
+                    $oOutput->AddHtml('<div class="form_field_control">');
+                    // - Help block
 					$oOutput->AddHtml('<div class="help-block"></div>');
 					// First the edition area
 					$oOutput->AddHtml('<div>');
@@ -137,8 +147,11 @@ EOF
 					{
 						$this->PreparingCaseLogEntries($oOutput);
 					}
-
 					$oOutput->AddHtml('</div>');
+
+					// Closing container
+					$oOutput->AddHtml('</div>');
+
 					// Some additional stuff if we are displaying it with a rich editor
 					if ($bRichEditor)
 					{
@@ -160,13 +173,20 @@ EOF
 				case 'Combodo\\iTop\\Form\\Field\\CheckboxField':
 					$sFieldType = ($sFieldClass === 'Combodo\\iTop\\Form\\Field\\RadioField') ? 'radio' : 'checkbox';

+					// Opening container
 					$oOutput->AddHtml('<div class="form-group ' . $sFieldMandatoryClass . '" id="' . $this->oField->GetGlobalId() . '">');

+					// Label
+					$oOutput->AddHtml('<div class="form_field_label">');
 					if ($this->oField->GetLabel() !== '')
 					{
 						$oOutput->AddHtml('<div><label class="control-label">')->AddHtml($this->oField->GetLabel(), true)->AddHtml('</label></div>');
 					}
+					$oOutput->AddHtml('</div>');

+					// Value
+                    $oOutput->AddHtml('<div class="form_field_control">');
+                    // - Help block
 					$oOutput->AddHtml('<div class="help-block"></div>');
 					$oOutput->AddHtml('<div class="btn-group" data-toggle="buttons">');
 					$i = 0;
@@ -179,7 +199,9 @@ EOF
 						$i++;
 					}
 					$oOutput->AddHtml('</div>');
+					$oOutput->AddHtml('</div>');

+					// Closing container
 					$oOutput->AddHtml('</div>');
 					break;

@@ -207,24 +229,24 @@ EOF
                    case 'Combodo\\iTop\\Form\\Field\\DateTimeField':
                    case 'Combodo\\iTop\\Form\\Field\\DurationField':
                        // Opening container
-						$oOutput->AddHtml('<div class="form-group form_group_small ' . $sFieldContainerClass . '">');
+						$oOutput->AddHtml('<div class="form-group form_group_small">');

 						// Showing label / value only if read-only but not hidden
 						if (!$this->oField->GetHidden())
 						{
 						    // Label
-                            if($this->oField->IsHorizontalDisplayMode()){ $oOutput->AddHtml('<div class="col-sm-3">'); }
+                            $oOutput->AddHtml('<div class="form_field_label">');
 							if ($this->oField->GetLabel() !== '')
 							{
 								$oOutput->AddHtml('<label for="' . $this->oField->GetGlobalId() . '" class="control-label">')->AddHtml($this->oField->GetLabel(), true)->AddHtml('</label>');
 							}
-                            if($this->oField->IsHorizontalDisplayMode()){ $oOutput->AddHtml('</div>'); }
+                            $oOutput->AddHtml('</div>');

                            // Value
                            $bEncodeHtmlEntities = ($sFieldClass === 'Combodo\\iTop\\Form\\Field\\UrlField') ? false : true;
-                            if($this->oField->IsHorizontalDisplayMode()){ $oOutput->AddHtml('<div class="col-sm-9">'); }
+                            $oOutput->AddHtml('<div class="form_field_control">');
 							$oOutput->AddHtml('<div class="form-control-static">')->AddHtml($this->oField->GetDisplayValue(), $bEncodeHtmlEntities)->AddHtml('</div>');
-                            if($this->oField->IsHorizontalDisplayMode()){ $oOutput->AddHtml('</div>'); }
+                            $oOutput->AddHtml('</div>');
 						}

 						// Adding hidden input if not a label
@@ -239,45 +261,74 @@ EOF
 						break;

 					case 'Combodo\\iTop\\Form\\Field\\TextAreaField':
-						$oOutput->AddHtml('<div class="form-group">');
+                        // Opening container
+                        $oOutput->AddHtml('<div class="form-group">');
+
 						// Showing label / value only if read-only but not hidden
 						if (!$this->oField->GetHidden())
 						{
-							if ($this->oField->GetLabel() !== '')
+                            // Label
+                            $oOutput->AddHtml('<div class="form_field_label">');
+                            if ($this->oField->GetLabel() !== '')
 							{
 								$oOutput->AddHtml('<label for="' . $this->oField->GetGlobalId() . '" class="control-label">')->AddHtml($this->oField->GetLabel(), true)->AddHtml('</label>');
 							}
+							$oOutput->AddHtml('</div>');

-
-							$oOutput->AddHtml('<div class="form-control-static">')->AddHtml($this->oField->GetDisplayValue(), false)->AddHtml('</div>');
+                            // Value
+                            $oOutput->AddHtml('<div class="form_field_control">');
+                            $oOutput->AddHtml('<div class="form-control-static">')->AddHtml($this->oField->GetDisplayValue(), false)->AddHtml('</div>');
+                            $oOutput->AddHtml('</div>');
 						}
+
 						// Adding hidden input
 						$oOutput->AddHtml('<input type="hidden" id="' . $this->oField->GetGlobalId() . '" name="' . $this->oField->GetId() . '" value="')->AddHtml($this->oField->GetCurrentValue(), true)->AddHtml('" class="form-control" />');
+
+						// Closing container
 						$oOutput->AddHtml('</div>');
 						break;

 					case 'Combodo\\iTop\\Form\\Field\\CaseLogField':
-						$oOutput->AddHtml('<div class="form-group ' . $sFieldMandatoryClass . '">');
-						if ($this->oField->GetLabel() !== '')
+                        // Opening container
+                        $oOutput->AddHtml('<div class="form-group ' . $sFieldMandatoryClass . '">');
+
+                        // Label
+                        $oOutput->AddHtml('<div class="form_field_label">');
+                        if ($this->oField->GetLabel() !== '')
 						{
 							$oOutput->AddHtml('<label for="' . $this->oField->GetGlobalId() . '" class="control-label">')->AddHtml($this->oField->GetLabel(), true)->AddHtml('</label>');
 						}
-						// Entries if necessary
+                        $oOutput->AddHtml('</div>');
+
+                        // Value
+                        $oOutput->AddHtml('<div class="form_field_control">');
+                        // - Entries if necessary
 						$this->PreparingCaseLogEntries($oOutput);
-						$oOutput->AddHtml('</div>');
+                        $oOutput->AddHtml('</div>');
+
+                        // Closing container
+                        $oOutput->AddHtml('</div>');
 						break;

 					case 'Combodo\\iTop\\Form\\Field\\BlobField':
                    case 'Combodo\\iTop\\Form\\Field\\ImageField':
+                        // Opening container
 						$oOutput->AddHtml('<div class="form-group">');
+
 						// Showing label / value only if read-only but not hidden
 						if (!$this->oField->GetHidden())
 						{
+						    // Label
+                            $oOutput->AddHtml('<div class="form_field_label">');
 							if ($this->oField->GetLabel() !== '')
 							{
 								$oOutput->AddHtml('<label for="' . $this->oField->GetGlobalId() . '" class="control-label">')->AddHtml($this->oField->GetLabel(), true)->AddHtml('</label>');
 							}
-							$oOutput->AddHtml('<div class="form-control-static">');
+							$oOutput->AddHtml('</div>');
+
+							// Value
+                            $oOutput->AddHtml('<div class="form_field_control">');
+                            $oOutput->AddHtml('<div class="form-control-static">');
 							if($sFieldClass === 'Combodo\\iTop\\Form\\Field\\ImageField')
                            {
                                $oOutput->AddHtml('<img src="' . $this->oField->GetDisplayUrl() . '" />', false);
@@ -287,8 +338,11 @@ EOF
                                $oOutput->AddHtml($this->oField->GetDisplayValue(), false);
                            }
 							$oOutput->AddHtml('</div>');
+							$oOutput->AddHtml('</div>');
 						}
 						$oOutput->AddHtml('<input type="hidden" id="' . $this->oField->GetGlobalId() . '" name="' . $this->oField->GetId() . '" value="')->AddHtml($this->oField->GetCurrentValue(), true)->AddHtml('" class="form-control" />');
+
+						// Closing container
 						$oOutput->AddHtml('</div>');
 						break;

@@ -299,23 +353,23 @@ EOF
 						$sFieldValue = (isset($aFieldChoices[$this->oField->GetCurrentValue()])) ? $aFieldChoices[$this->oField->GetCurrentValue()] : Dict::S('UI:UndefinedObject');

 						// Opening container
-						$oOutput->AddHtml('<div class="form-group form_group_small ' . $sFieldContainerClass . '">');
+						$oOutput->AddHtml('<div class="form-group form_group_small">');

 						// Showing label / value only if read-only but not hidden
 						if (!$this->oField->GetHidden())
 						{
 						    // Label
-                            if($this->oField->IsHorizontalDisplayMode()){ $oOutput->AddHtml('<div class="col-sm-3">'); }
+                            $oOutput->AddHtml('<div class="form_field_label">');
 							if ($this->oField->GetLabel() !== '')
 							{
 								$oOutput->AddHtml('<label for="' . $this->oField->GetGlobalId() . '" class="control-label">')->AddHtml($this->oField->GetLabel(), true)->AddHtml('</label>');
 							}
-                            if($this->oField->IsHorizontalDisplayMode()){ $oOutput->AddHtml('</div>'); }
+                            $oOutput->AddHtml('</div>');

                            // Value
-                            if($this->oField->IsHorizontalDisplayMode()){ $oOutput->AddHtml('<div class="col-sm-9">'); }
+                            $oOutput->AddHtml('<div class="form_field_control">');
 							$oOutput->AddHtml('<div class="form-control-static">' . $sFieldValue . '</div>');
-                            if($this->oField->IsHorizontalDisplayMode()){ $oOutput->AddHtml('</div>'); }
+                            $oOutput->AddHtml('</div>');
 						}

 						// Adding hidden value
--- a/sources/renderer/bootstrap/fieldrenderer/bssubformfieldrenderer.class.inc.php
+++ b/sources/renderer/bootstrap/fieldrenderer/bssubformfieldrenderer.class.inc.php
@@ -1,5 +1,5 @@
 <?php
-// Copyright (C) 2016 Combodo SARL
+// Copyright (C) 2016-2017 Combodo SARL
 //
 //   This file is part of iTop.
 //