Console UI: Text fields validation fixed when coming back from fullscreen. Also, fixed seaarch dialog UI for ExtKeys

git-svn-id: http://svn.code.sf.net/p/itop/code/trunk@4820 a333f486-631f-4898-b8df-5754b55c2be0

application/cmdbabstract.class.inc.php

@@ -742,7 +742,7 @@ EOF
 										$sValue = $this->Get($sAttCode);
 										$sDisplayValue = $this->GetEditValue($sAttCode);
 										$aArgs = array('this' => $this, 'formPrefix' => $sPrefix);
-										$sHTMLValue = "<div id=\"field_{$sInputId}\" class=\"field_value_container\">".self::GetFormElementForField($oPage, $sClass, $sAttCode, $oAttDef, $sValue, $sDisplayValue, $sInputId, '', $iFlags, $aArgs).'</div>';
+										$sHTMLValue = "".self::GetFormElementForField($oPage, $sClass, $sAttCode, $oAttDef, $sValue, $sDisplayValue, $sInputId, '', $iFlags, $aArgs).'';
 									}
 									$aFieldsMap[$sAttCode] = $sInputId;
 									$val = array('label' => '<span title="'.$oAttDef->GetDescription().'">'.$oAttDef->GetLabel().'</span>', 'value' => $sHTMLValue, 'comments' => $sComments, 'infos' => $sInfos, 'attcode' => $sAttCode);
@@ -1589,7 +1589,7 @@ EOF
 		$sHtml .= "<form id=\"fs_{$sSearchFormId}\" action=\"{$sAction}\">\n"; // Don't use $_SERVER['SCRIPT_NAME'] since the form may be called asynchronously (from ajax.php)
 		$sHtml .= "<h2>".Dict::Format('UI:SearchFor_Class_Objects', $sClassesCombo)."</h2>\n";
 		$index = 0;
-		$sHtml .= "<p>\n";
+		$sHtml .= "<div>\n";
 		$aMapCriteria = array();
 		$aList = MetaModel::GetZListItems($sClassName, 'standard_search');
 		$aConsts = $oSet->ListConstantFields(); // Some fields are constants based on the query/context
@@ -1597,7 +1597,7 @@ EOF
 		foreach($aList as $sFilterCode)
 		{
 			//$oAppContext->Reset($sFilterCode); // Make sure the same parameter will not be passed twice
-			$sHtml .= '<span style="white-space: nowrap;padding:5px;display:inline-block;">';
+			$sHtml .= '<div class="SearchAttribute" style="white-space: nowrap;padding:5px;display:inline-block;">';
 			$sFilterValue = isset($aConsts[$sClassAlias][$sFilterCode]) ? $aConsts[$sClassAlias][$sFilterCode] : '';
 			$sFilterValue = utils::ReadParam($sFilterCode, $sFilterValue, false, 'raw_data');
 			$sFilterOpCode = null; // Use the default 'loose' OpCode
@@ -1689,9 +1689,9 @@ EOF
 				$oPage->add_ready_script("$('form#fs_$sSearchFormId :input[name={$sFilterCode}]').qtip( { content: '$sTip', show: 'mouseover', hide: 'mouseout', style: { name: 'dark', tip: 'leftTop' }, position: { corner: { target: 'rightMiddle', tooltip: 'leftTop' }} } );");
 			}
 			$index++;
-			$sHtml .= '</span> ';
+			$sHtml .= '</div> ';
 		}
-		$sHtml .= "</p>\n";
+		$sHtml .= "</div>\n";
 		$sHtml .= "<p align=\"right\"><input type=\"submit\" value=\"".Dict::S('UI:Button:Search')."\"></p>\n";
 		if (isset($aExtraParams['table_id']))
 		{
@@ -1889,8 +1889,11 @@ EOF
                             var oClonedField = oOriginField.clone();
                             oClonedField.addClass('fullscreen').appendTo('body');
                             oClonedField.find('.fullscreen_button').on('click', function(oEvent){
+                                // Copying value to origin field
                                 oOriginField.find('textarea').val(oClonedField.find('textarea').val());
                                 oClonedField.remove();
+                                // Triggering change event
+                                oOriginField.find('textarea').triggerHandler('change');
                             });
                         });
 EOF
@@ -2163,7 +2166,7 @@ EOF
 		$oPage->add_dict_entry('UI:ValueMustBeSet');
 		$oPage->add_dict_entry('UI:ValueMustBeChanged');
 		$oPage->add_dict_entry('UI:ValueInvalidFormat');
-		return "<div class=\"attribute-edit\" data-attcode=\"$sAttCode\">{$sHTMLValue}</div>";
+		return "<div id=\"field_{$iId}\" class=\"field_value_container\"><div class=\"attribute-edit\" data-attcode=\"$sAttCode\">{$sHTMLValue}</div></div>";
 	}
 
 	public function DisplayModifyForm(WebPage $oPage, $aExtraParams = array())

css/light-grey.css

@@ -124,6 +124,8 @@ table.listResults td .view-image img {
 .details .view-image img {
   display: inline-block;
   vertical-align: middle;
+  max-width: 90% !important;
+  max-height: 90% !important;
 }
 .details .view-image .helper-middle {
   display: inline-block;
@@ -679,6 +681,12 @@ input.dp-applied {
 .SearchDrawer h1 {
   color: #000;
 }
+.SearchDrawer .SearchAttribute > .field_input_zone {
+  display: inline-block;
+}
+.SearchDrawer .SearchAttribute > .field_input_zone > .field_select_wrapper {
+  display: inline-block;
+}
 .DrawerClosed {
   display: none;
 }
@@ -1152,111 +1160,119 @@ span.form_validation {
 .details * {
   box-sizing: border-box;
 }
-.details > .field_container {
+fieldset .details > .field_container {
+  background: transparent;
+  border: 0;
+}
+.field_container {
   display: table;
   width: 100%;
   margin-bottom: 5px;
   border-bottom: 2px #ddd solid;
+  box-sizing: border-box;
   /* .field_label, .field_data */
 }
-.details > .field_container:last-child {
+.field_container:last-child {
   margin-bottom: 0px;
 }
-.details > .field_container.field_large {
+.field_container.field_large {
   display: inherit;
   /* .field_label, .field_data */
 }
-.details > .field_container.field_large > div {
+.field_container.field_large > div {
   display: inherit;
   /* .field_value, .field_comments, .field_infos */
 }
-.details > .field_container.field_large > div.field_label {
+.field_container.field_large > div.field_label {
   width: inherit;
   margin-bottom: 5px;
 }
-.details > .field_container > div {
+.field_container * {
+  box-sizing: border-box;
+}
+.field_container > div {
   display: table-cell;
   vertical-align: top;
   /* .field_value, .field_comments, .field_infos */
 }
-.details > .field_container > div.field_label {
+.field_container > div.field_label {
   width: 30%;
   padding-right: 10px;
 }
-.details > .field_container > div.field_label > label, .details > .field_container > div.field_label span {
+.field_container > div.field_label > label, .field_container > div.field_label span {
   color: #000;
   font-weight: bold;
 }
-.details > .field_container > div.field_data {
+.field_container > div.field_data {
   display: table;
   width: 100%;
   margin-bottom: 5px;
 }
-.details > .field_container > div > div {
+.field_container > div > div {
   display: table-cell;
   width: auto;
 }
-.details > .field_container > div > div.field_comments, .details > .field_container > div > div.field_infos {
+.field_container > div > div.field_comments, .field_container > div > div.field_infos {
   width: 50px;
 }
-.details > .field_container > div > div.field_value .attribute-edit {
+.field_container > div > div.field_value .attribute-edit {
   display: table;
   width: 100%;
   /* TODO: Refactor so status icon show over mandatory icon */
 }
-.details > .field_container > div > div.field_value .attribute-edit .form_validation, .details > .field_container > div > div.field_value .attribute-edit .field_status {
+.field_container > div > div.field_value .attribute-edit .form_validation, .field_container > div > div.field_value .attribute-edit .field_status {
   display: table-cell;
   width: 20px;
   padding-left: 0.4em;
   vertical-align: middle;
 }
-.details > .field_container > div > div.field_value .attribute-edit .field_input_zone {
+.field_container > div > div.field_value .attribute-edit .field_input_zone {
   width: 100%;
   /* auto; */
 }
-.details > .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_string > select, .details > .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_password > select, .details > .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_string input, .details > .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_password input {
+.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_string > select, .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_password > select, .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_string input, .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_password input {
   width: 100%;
 }
-.details > .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_onewaypassword {
+.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_onewaypassword {
   display: table-cell;
   width: auto;
 }
-.details > .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_onewaypassword > * {
+.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_onewaypassword > * {
   display: block;
   width: 100%;
 }
-.details > .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_onewaypassword > span {
+.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_onewaypassword > span {
   margin-bottom: 3px;
 }
-.details > .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_date, .details > .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_datetime {
+.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_date, .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_datetime {
   display: table;
   width: 100%;
 }
-.details > .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_date > input, .details > .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_datetime > input {
+.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_date > input, .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_datetime > input {
   display: table-cell;
   width: 100%;
 }
-.details > .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_date > span, .details > .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_datetime > span {
+.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_date > span, .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_datetime > span {
   display: table-cell;
   width: 20px;
   padding-left: 0.4em;
   vertical-align: middle;
 }
-.details > .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_date > span > img, .details > .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_datetime > span > img {
+.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_date > span > img, .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_datetime > span > img {
   width: 20px;
   cursor: pointer;
 }
-.details > .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_text {
+.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_text {
   border: none;
 }
-.details > .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_text .f_i_text_header {
+.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_text .f_i_text_header {
   /* Inspired by .cke_top */
   padding: 6px 8px 6px;
   white-space: normal;
   border-bottom: 1px solid #fff;
   background: #f2f2f2;
 }
-.details > .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_text .f_i_text_header .fullscreen_button {
+.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_text .f_i_text_header .fullscreen_button {
   display: block;
   width: 15px;
   height: 15px;
@@ -1267,10 +1283,10 @@ span.form_validation {
   background-position: center center;
   background-size: 98%;
 }
-.details > .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_text .f_i_text_header .fullscreen_button:hover, .details > .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_text .f_i_text_header .fullscreen_button:focus {
+.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_text .f_i_text_header .fullscreen_button:hover, .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_text .f_i_text_header .fullscreen_button:focus {
   background-color: #ccc;
 }
-.details > .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_text textarea {
+.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_text textarea {
   /* Size for default display */
   width: 100%;
   height: 100%;
@@ -1278,7 +1294,7 @@ span.form_validation {
   border: none;
   resize: none;
 }
-.details > .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_text.fullscreen {
+.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_text.fullscreen {
   z-index: 100;
   position: fixed;
   top: 0px;
@@ -1286,53 +1302,49 @@ span.form_validation {
   width: 100%;
   height: 100%;
 }
-.details > .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_text.fullscreen textarea {
+.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_text.fullscreen textarea {
   /* Size set again here to override resize value when in fullscreen */
   width: 100% !important;
   height: 100% !important;
 }
-.details > .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_text.fullscreen .fullscreen_button {
+.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_text.fullscreen .fullscreen_button {
   width: 22px;
   height: 22px;
   background-color: #ccc;
 }
-.details > .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_document > input {
+.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_document > input {
   width: 100%;
 }
-.details > .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_document > span {
+.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_document > span {
   display: inline-block;
   margin-bottom: 2px;
 }
-.details > .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_image input {
+.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_image input {
   width: 100%;
 }
-.details > .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_extkey {
+.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_extkey {
   display: table;
   width: 100%;
 }
-.details > .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_extkey > .field_select_wrapper {
+.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_extkey > .field_select_wrapper {
   display: table-cell;
   width: auto;
 }
-.details > .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_extkey > .field_select_wrapper > select {
+.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_extkey > .field_select_wrapper > select {
   width: 100%;
 }
-.details > .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_extkey > .field_autocomplete {
+.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_extkey > .field_autocomplete {
   display: table-cell;
   width: 100%;
 }
-.details > .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_extkey > .field_input_btn {
+.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_extkey > .field_input_btn {
   display: table-cell;
   width: 25px;
   padding-left: 0.4em;
 }
-.details > .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_extkey > .field_input_btn > img {
+.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_extkey > .field_input_btn > img {
   max-width: 20px;
 }
-fieldset .details > .field_container {
-  background: transparent;
-  border: 0;
-}
 /* This is extracted from the ".details > .field_container ..." because of the fullscreen option (element is moved at the end of the body */
 .field_input_text {
   border: none;

css/light-grey.scss

@@ -156,8 +156,10 @@ table.listResults td .view-image {
   border-radius: 6px;
 
   img {
-	display: inline-block;
-	vertical-align: middle;
+	  display: inline-block;
+	  vertical-align: middle;
+	  max-width: 90% !important;
+	  max-height: 90% !important;
   }
   .helper-middle {
 	// Helper to center the image (requires a span dedicated to this)
@@ -755,6 +757,15 @@ input.dp-applied {
 .SearchDrawer h1 {
 	color: #000;
 }
+.SearchDrawer .SearchAttribute{
+	> .field_input_zone{
+		display: inline-block;
+
+		> .field_select_wrapper{
+			display: inline-block;
+		}
+	}
+}
 .DrawerClosed {
 	display: none;
 }
@@ -1242,230 +1253,238 @@ span.form_validation {
 	* {
 		box-sizing: border-box;
 	}
+}
+fieldset .details>.field_container {
+	background: transparent;
+	border: 0;
+}
+.field_container {
+	display: table;
+	width: 100%;
+	margin-bottom: 5px;
+	border-bottom: 2px #ddd solid;
+	box-sizing: border-box;
 
-	> .field_container {
-		display: table;
-		width: 100%;
-		margin-bottom: 5px;
-		border-bottom: 2px #ddd solid;
+	&:last-child {
+		margin-bottom: 0px;
+	}
 
-		&:last-child {
-			margin-bottom: 0px;
-		}
+	&.field_large{
+		display: inherit;
 
-		&.field_large{
+		/* .field_label, .field_data */
+		> div {
 			display: inherit;
 
-			/* .field_label, .field_data */
+			&.field_label{
+				width: inherit;
+				margin-bottom: 5px;
+			}
+
+			/* .field_value, .field_comments, .field_infos */
 			> div {
-				display: inherit;
+			}
+		}
+	}
 
-				&.field_label{
-					width: inherit;
-					margin-bottom: 5px;
-				}
+	* {
+		box-sizing: border-box;
+	}
 
-				/* .field_value, .field_comments, .field_infos */
-				> div {
-				}
+	/* .field_label, .field_data */
+	> div {
+		display: table-cell;
+		vertical-align: top;
+
+		&.field_label {
+			width: 30%;
+			padding-right: 10px;
+
+			> label,span {
+				color: #000000;
+				font-weight:bold;
 			}
 		}
 
-		/* .field_label, .field_data */
+		&.field_data {
+			display: table;
+			width: 100%;
+			margin-bottom: 5px;
+		}
+
+		/* .field_value, .field_comments, .field_infos */
 		> div {
 			display: table-cell;
-			vertical-align: top;
+			width: auto;
 
-			&.field_label {
-				width: 30%;
-				padding-right: 10px;
-
-				> label,span {
-					color: #000000;
-					font-weight:bold;
-				}
+			&.field_comments,
+			&.field_infos{
+				width: 50px;
 			}
 
-			&.field_data {
-				display: table;
-				width: 100%;
-				margin-bottom: 5px;
-			}
+			&.field_value{
 
-			/* .field_value, .field_comments, .field_infos */
-			> div {
-				display: table-cell;
-				width: auto;
+				.attribute-edit{
+					display: table;
+					width: 100%;
 
-				&.field_comments,
-				&.field_infos{
-					width: 50px;
-				}
+					/* TODO: Refactor so status icon show over mandatory icon */
+					.form_validation, .field_status{
+						display: table-cell;
+						width: 20px;
+						padding-left: 0.4em;
+						vertical-align: middle;
+					}
 
-				&.field_value{
+					.field_input_zone{
+						width: 100%; /* auto; */
 
-					.attribute-edit{
-						display: table;
-						width: 100%;
+						&.field_input_string,
+						&.field_input_password{
+							> select, input{
+								width: 100%;
+							}
+						}
 
-						/* TODO: Refactor so status icon show over mandatory icon */
-						.form_validation, .field_status{
+						&.field_input_onewaypassword{
 							display: table-cell;
-							width: 20px;
-							padding-left: 0.4em;
-							vertical-align: middle;
-						}
+							width: auto;
 
-						.field_input_zone{
-							width: 100%; /* auto; */
+							> *{
+								display: block;
+								width: 100%;
+							}
 
-							&.field_input_string,
-							&.field_input_password{
-								> select, input{
-									width: 100%;
-								}
+							> span{
+								margin-bottom: 3px;
 							}
+						}
 
-							&.field_input_onewaypassword{
+						&.field_input_date,
+						&.field_input_datetime{
+							display: table;
+							width: 100%;
+
+							> input {
 								display: table-cell;
-								width: auto;
+								width: 100%;
+							}
 
-								> *{
-									display: block;
-									width: 100%;
-								}
+							> span {
+								display: table-cell;
+								width: 20px;
+								padding-left: 0.4em;
+								vertical-align: middle;
 
-								> span{
-									margin-bottom: 3px;
+								> img {
+									width: 20px;
+									cursor: pointer;
 								}
 							}
+						}
 
-							&.field_input_date,
-							&.field_input_datetime{
-								display: table;
-								width: 100%;
+						&.field_input_text{
+							border: none;
 
-								> input {
-									display: table-cell;
-									width: 100%;
-								}
-
-								> span {
-									display: table-cell;
-									width: 20px;
-									padding-left: 0.4em;
-									vertical-align: middle;
+							.f_i_text_header{
+								/* Inspired by .cke_top */
+								padding: 6px 8px 6px;
+								white-space: normal;
+								border-bottom: 1px solid #fff;
+								background: #f2f2f2;
 
-									> img {
-										width: 20px;
-										cursor: pointer;
-									}
+								.fullscreen_button{
+									display: block;
+									width: 15px;
+									height: 15px;
+									border: 1px #A6A6A6 solid;
+									cursor: pointer;
+									background-image: url('../images/full-screen.png');
+									background-repeat: no-repeat;
+									background-position: center center;
+									background-size: 98%;
+								}
+								.fullscreen_button:hover,
+								.fullscreen_button:focus{
+									background-color: #CCCCCC;
 								}
 							}
-
-							&.field_input_text{
+							textarea{
+								/* Size for default display */
+								width: 100%;
+								height: 100%;
+								padding: 5px 10px;
 								border: none;
+								resize: none;
+							}
+
+							&.fullscreen{
+								z-index: 100;
+								position: fixed;
+								top: 0px;
+								left: 0px;
+								width: 100%;
+								height: 100%;
 
-								.f_i_text_header{
-									/* Inspired by .cke_top */
-									padding: 6px 8px 6px;
-									white-space: normal;
-									border-bottom: 1px solid #fff;
-									background: #f2f2f2;
-
-									.fullscreen_button{
-										display: block;
-										width: 15px;
-										height: 15px;
-										border: 1px #A6A6A6 solid;
-										cursor: pointer;
-										background-image: url('../images/full-screen.png');
-										background-repeat: no-repeat;
-										background-position: center center;
-										background-size: 98%;
-									}
-									.fullscreen_button:hover,
-									.fullscreen_button:focus{
-										background-color: #CCCCCC;
-									}
-								}
 								textarea{
-									/* Size for default display */
-									width: 100%;
-									height: 100%;
-									padding: 5px 10px;
-									border: none;
-									resize: none;
+									/* Size set again here to override resize value when in fullscreen */
+									width: 100% !important;
+									height: 100% !important;
 								}
-
-								&.fullscreen{
-									z-index: 100;
-									position: fixed;
-									top: 0px;
-									left: 0px;
-									width: 100%;
-									height: 100%;
-
-									textarea{
-										/* Size set again here to override resize value when in fullscreen */
-										width: 100% !important;
-										height: 100% !important;
-									}
-									.fullscreen_button{
-										width: 22px;
-										height: 22px;
-										background-color: #CCCCCC;
-									}
+								.fullscreen_button{
+									width: 22px;
+									height: 22px;
+									background-color: #CCCCCC;
 								}
 							}
+						}
 
-							&.field_input_html{
-								// Nothing
-							}
-
-							&.field_input_document{
-								> input{
-									width: 100%;
-								}
+						&.field_input_html{
+							// Nothing
+						}
 
-								> span {
-									display: inline-block;
-									margin-bottom: 2px;
-								}
+						&.field_input_document{
+							> input{
+								width: 100%;
 							}
 
-							&.field_input_image{
-								input{
-									width: 100%;
-								}
+							> span {
+								display: inline-block;
+								margin-bottom: 2px;
 							}
+						}
 
-							&.field_input_extkey{
-								display: table;
+						&.field_input_image{
+							input{
 								width: 100%;
+							}
+						}
 
-								> .field_select_wrapper{
-									display: table-cell;
-									width: auto;
+						&.field_input_extkey{
+							display: table;
+							width: 100%;
 
-									> select {
-										width: 100%;
-									}
-								}
+							> .field_select_wrapper{
+								display: table-cell;
+								width: auto;
 
-								> .field_autocomplete{
-									display: table-cell;
+								> select {
 									width: 100%;
 								}
+							}
 
-								> .field_input_btn{
-									display: table-cell;
-									width: 25px;
-									padding-left: 0.4em;
+							> .field_autocomplete{
+								display: table-cell;
+								width: 100%;
+							}
 
-									> img {
-										max-width: 20px;
-									}
+							> .field_input_btn{
+								display: table-cell;
+								width: 25px;
+								padding-left: 0.4em;
+
+								> img {
+									max-width: 20px;
 								}
 							}
 						}
@@ -1475,10 +1494,6 @@ span.form_validation {
 		}
 	}
 }
-fieldset .details>.field_container {
-	background: transparent;
-	border: 0;
-}
 /* This is extracted from the ".details > .field_container ..." because of the fullscreen option (element is moved at the end of the body */
 .field_input_text{
 	border: none;