diff --git a/datamodels/2.x/itop-portal-base/portal/public/css/portal.css b/datamodels/2.x/itop-portal-base/portal/public/css/portal.css
index 965e0beea..f8fe934ec 100644
--- a/datamodels/2.x/itop-portal-base/portal/public/css/portal.css
+++ b/datamodels/2.x/itop-portal-base/portal/public/css/portal.css
@@ -34,7 +34,7 @@
  */
 /*!
  * Combodo portal template v1.0.0
- */
+*/
 /*******************/
 /* Global settings */
 /*******************/
@@ -42,6 +42,7 @@
   body {
     padding-top: 60px;
   }
+
   body.home {
     padding-top: 70px;
   }
@@ -50,6 +51,7 @@ footer {
   margin: 5em 1em;
   text-align: center;
 }
+
 /* Environment banner */
 #envbanner {
   position: relative;
@@ -57,37 +59,48 @@ footer {
   padding: 5px 15px;
   text-align: center;
 }
+
 #envbanner > button {
   margin-left: 5px;
   color: #000;
 }
+
 /* Navigation menu */
-.navbar-nav .dropdown-menu a .glyphicon, .user_infos .dropdown-menu a .glyphicon {
+.navbar-nav .dropdown-menu a .glyphicon,
+.user_infos .dropdown-menu a .glyphicon {
   margin-right: 15px;
 }
-.nav > li > a > span.brick_icon, .dropdown-menu > li > a > span.brick_icon {
+
+.nav > li > a > span.brick_icon,
+.dropdown-menu > li > a > span.brick_icon {
   margin-right: 20px;
   vertical-align: sub;
 }
+
 /* Topbar */
 #topbar .navbar-header {
   position: relative;
   z-index: 2;
 }
+
 #topbar .navbar-collapse {
   position: relative;
   z-index: 1;
   overflow-y: auto;
 }
+
 #topbar .navbar-collapse > .navbar-nav {
   padding-top: 30px;
 }
+
 #topbar .navbar-brand > img {
   max-height: 100%;
 }
+
 #topbar .user_infos {
   text-decoration: none;
 }
+
 #topbar .user_photo {
   position: absolute;
   display: block;
@@ -102,6 +115,7 @@ footer {
   border-radius: 100%;
   box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
 }
+
 #topbar .user_fullname {
   display: inline-block;
   position: absolute;
@@ -112,6 +126,7 @@ footer {
   text-overflow: ellipsis;
   overflow-x: hidden;
 }
+
 /* Sidebar */
 @media (min-width: 768px) {
   #sidebar {
@@ -122,10 +137,12 @@ footer {
     /* Overriding BS */
     height: 100%;
   }
+
   #sidebar .user_card {
     padding: 30px 0px;
     text-align: center;
   }
+
   #sidebar .user_card .user_photo {
     margin: 0px auto 10px auto;
     width: 80px;
@@ -137,48 +154,59 @@ footer {
     border: 2px solid #FFFFFF;
     border-radius: 100%;
   }
+
   #sidebar .user_card .user_infos {
     font-size: 1em;
     color: #FFFFFF;
   }
+
   #sidebar .user_card .user_infos .dropdown-toggle {
     color: #FFFFFF;
   }
+
   #sidebar .user_card .user_options.dropdown-menu {
     width: 92%;
     left: 4%;
   }
+
   #sidebar .user_card .user_fullname {
     font-weight: 600;
   }
+
   #sidebar .menu {
     max-height: 59%;
     overflow-y: auto;
     overflow-x: hidden;
   }
+
   #sidebar .menu .navbar-nav {
     width: 100%;
   }
+
   #sidebar .menu .navbar-nav > li {
     width: 100%;
   }
+
   #sidebar .menu .navbar-nav > li > a > .brick_icon {
     width: 1.2em;
     vertical-align: sub;
     text-align: center;
     margin-right: 10px;
   }
+
   #sidebar .logo {
     position: absolute;
     bottom: 15px;
     width: 100%;
     text-align: center;
   }
+
   #sidebar .logo img {
     max-width: 100%;
     max-height: 50px;
-    /* Main content */
   }
+
+  /* Main content */
   #main-wrapper {
     margin-top: 20px;
   }
@@ -189,6 +217,7 @@ footer {
     width: 120px;
     height: 120px;
   }
+
   #sidebar .menu .nav > li > a > .brick_icon {
     margin-right: 20px;
   }
@@ -205,17 +234,21 @@ footer {
   background-color: black;
   opacity: 0.5;
 }
+
 #page_overlay .overlay_content {
   margin-top: 20em;
   width: 100%;
   color: white;
 }
+
 .overlay_content {
   text-align: center;
 }
+
 .content_loader {
   text-align: center;
 }
+
 .content_loader .icon {
   margin-bottom: 0.3em;
   /*width: 52px;*/
@@ -229,14 +262,17 @@ footer {
   -moz-animation: spin 1.2s linear infinite;
   -ms-animation: spin 1.2s linear infinite;
 }
+
 .content_loader .message {
   font-size: 1.5em;
   /* 2em; */
 }
+
 .datatables_overlay {
   padding: 5% 0px !important;
   background-color: white;
 }
+
 /******************/
 /* Global classes */
 /******************/
@@ -253,19 +289,22 @@ footer {
   -moz-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  -webkit-box-pack: center;
   /* Also 'margin: 0 auto' doesn't have any effect on flex items in such web browsers
-   hence the bootstrap's container won't be aligned to the center anymore.
-   Therefore, we should use the following declarations to get it centered again */
+  hence the bootstrap's container won't be aligned to the center anymore.
+
+  Therefore, we should use the following declarations to get it centered again */
+  -webkit-box-pack: center;
   -moz-box-pack: center;
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
 }
+
 .text_decoration {
   vertical-align: baseline;
   margin-right: 8px;
 }
+
 /*********************/
 /* Global animations */
 /*********************/
@@ -297,10 +336,12 @@ footer {
   margin-top: 11px;
   margin-bottom: -11px;
 }
+
 .list-group.tree .list-group-item {
   padding-right: 0px;
   /* To align all actions on the right without indent */
 }
+
 /******************/
 /* Modal settings */
 /******************/
@@ -308,10 +349,12 @@ footer {
   z-index: 9999;
   /* Should always be on top to display errors messages */
 }
+
 .modal-content .content_loader {
   margin: 7em 0em;
   text-align: center;
 }
+
 /*******************/
 /* Clipboard icons */
 /*******************/
@@ -323,23 +366,28 @@ footer {
 .url-to-clipboard.url-to-clipboard-icon:hover {
   opacity: 1;
 }
+
 .url-to-clipboard-tooltip-copied {
   color: green;
   margin-right: 3px;
 }
+
 /**************************/
 /* MagnificPopup settings */
 /**************************/
 .mfp-bg {
   z-index: 1200;
 }
+
 .mfp-wrap {
   z-index: 1210;
 }
+
 .mfp-img {
   cursor: pointer;
   cursor: zoom-out;
 }
+
 /********************/
 /* Typeahead setting */
 /********************/
@@ -347,6 +395,7 @@ footer {
   max-height: 200px;
   overflow-y: auto;
 }
+
 @media (min-width: 768px) {
   .twitter-typeahead .tt-menu {
     max-height: 300px;
@@ -357,19 +406,23 @@ footer {
   text-align: center;
   font-size: 0.6em;
 }
+
 .twitter-typeahead .tt-dataset > .content_loader .icon {
   height: 25px;
 }
+
 .twitter-typeahead .tt-dataset .no_result {
   text-align: center;
   font-style: italic;
 }
+
 /*****************/
 /* Home settings */
 /*****************/
 .home #main-wrapper {
   padding-top: 15px;
 }
+
 .home .tile {
   display: block;
   margin-bottom: 8px;
@@ -385,22 +438,27 @@ footer {
   line-height: 4em;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
 }
+
 .home .tile .tile_decoration {
   position: absolute;
   top: 0.3em;
   left: 2.5em;
 }
+
 .home .tile .tile_title {
   font-weight: bold;
   color: #777;
 }
+
 .home .tile .tile_title > span.icon {
   color: #EA7D1E;
 }
+
 .home .tile .tile_description {
   display: none;
   color: #555555;
 }
+
 /**********************************/
 /* ManageBrick badge tile display */
 /**********************************/
@@ -408,12 +466,15 @@ footer {
   display: table;
   width: 100%;
 }
+
 .home a.tile.tile_badge > div > div {
   display: table-row;
 }
+
 .home a.tile.tile_badge > div > div > div {
   display: table-cell;
 }
+
 @media (max-width: 768px) {
   .home a.tile.tile_badge > div > div > div.tile_body div.tile_count {
     position: absolute;
@@ -422,6 +483,7 @@ footer {
     text-align: right;
     font-size: 1.2em;
   }
+
   .home a.tile.tile_badge > div.tile_description {
     display: none;
   }
@@ -435,9 +497,11 @@ footer {
     text-align: left;
     transition: all 0.2s linear;
   }
+
   .home .tile:hover {
     box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
   }
+
   .home .tile .tile_decoration {
     display: block;
     position: relative;
@@ -446,31 +510,38 @@ footer {
     left: initial;
     margin: 0px 30px 15px 0px;
   }
+
   .home .tile .tile_body {
     display: block;
     padding-left: 4.3em;
     text-align: left;
     line-height: 1.5em;
   }
+
   .home .tile .tile_title {
     margin-bottom: 1em;
     font-size: 1em;
   }
+
   .home .tile .tile_description {
     display: block;
     text-align: left;
   }
+
   .home a.tile.tile_badge {
     height: 10em;
     overflow: hidden;
   }
+
   .home a.tile.tile_badge > div > div > div.tile_decoration {
     top: unset;
     vertical-align: middle;
   }
+
   .home a.tile.tile_badge > div > div > div.tile_decoration > span.icon {
     font-size: 4em;
   }
+
   .home a.tile.tile_badge > div > div > div.tile_body {
     position: relative;
     padding: 0;
@@ -478,12 +549,14 @@ footer {
     vertical-align: middle;
     text-align: right;
   }
+
   .home a.tile.tile_badge > div > div > div.tile_body .tile_title {
     margin-top: 1em;
     margin-bottom: 0;
     font-size: 1em;
     font-weight: normal;
   }
+
   .home a.tile.tile_badge > div > div > div.tile_body .tile_count {
     position: absolute;
     top: 0;
@@ -492,6 +565,7 @@ footer {
     font-weight: bold;
     color: #777;
   }
+
   .home a.tile.tile_badge .tile_description {
     display: none;
   }
@@ -501,27 +575,35 @@ footer {
     min-height: 14em;
     padding: 30px 40px 30px 40px;
   }
+
   .home .tile .tile_decoration > span.icon {
     font-size: 4em;
   }
+
   .home .tile .tile_body {
     padding-left: 6.3em;
   }
+
   .home .tile .tile_title {
     font-size: 1.4em;
   }
+
   .home .tile .tile_description {
     font-size: 1.2em;
   }
+
   .home a.tile.tile_badge > div > div > div.tile_body .tile_title {
     font-size: 1.2em;
   }
+
   .home a.tile.tile_badge > div > div > div.tile_body .tile_count {
     font-size: 3em;
   }
+
   .home a.tile.tile_badge > div > div > div.tile_decoration > span.icon {
     font-size: 4em;
   }
+
   .home a.tile.tile_badge .tile_description {
     display: block;
     font-size: 1em;
@@ -534,22 +616,28 @@ footer {
     min-height: 15em;
     padding: 40px 50px 30px 50px;
   }
+
   .home .tile .tile_decoration {
     margin: 0px 40px 15px 0px;
     top: 1.5em;
   }
+
   .home .tile .tile_decoration > span.icon {
     font-size: 6em;
   }
+
   .home .tile .tile_body {
     padding-left: 9.1em;
   }
+
   .home .tile .tile_title {
     font-size: 1.5em;
   }
+
   .home .tile .tile_description {
     font-size: 1.2em;
   }
+
   .home a.tile.tile_badge > div > div > div.tile_decoration > span.icon {
     font-size: 6em;
   }
@@ -560,6 +648,7 @@ footer {
 #main-header {
   text-align: center;
 }
+
 #main-header-title {
   margin-bottom: 15px;
 }
@@ -568,26 +657,30 @@ footer {
   margin-top: 8px;
   margin-bottom: 20px;
 }
+
 #main-header-actions {
   margin-bottom: 15px;
 }
+
 /* This is no longer necessary but we keep it just in case */
 /*#main-header-actions .btn-group .btn{
- padding: 0em 1.5em;
- line-height: 2.4em;
- font-size: 14px;
- background-image: none;
- }*/
+	padding: 0em 1.5em;
+	line-height: 2.4em;
+	font-size: 14px;
+	background-image: none;
+}*/
 @media (min-width: 768px) {
   #main-header:after {
     clear: both;
   }
+
   #main-header-title {
     float: left;
     margin-bottom: 0px;
     min-height: 6em;
     text-align: left;
   }
+
   #main-header-actions {
     float: right;
     margin-bottom: 0px;
@@ -596,24 +689,29 @@ footer {
 .dataTables_wrapper {
   padding: 10px 10px;
 }
+
 .dataTable.table td img {
   max-width: 100%;
   height: initial !important;
 }
+
 #brick_content_toolbar {
   /* margin: 10px 0px 6px 0px; */
   padding: 10px;
 }
+
 #brick_content_toolbar > div label {
   font-weight: normal;
   white-space: nowrap;
   text-align: left;
 }
+
 #brick_content_toolbar > div label input {
   margin-left: 0.5em;
   display: inline-block;
   width: 130px;
 }
+
 /***********************/
 /* Brick communication */
 /***********************/
@@ -624,11 +722,13 @@ footer {
   border: none;
   font-weight: initial;
 }
+
 .home .tile_communication .carousel {
   margin-bottom: 0px;
   width: 100%;
   height: 200px;
 }
+
 /**********************/
 /* Brick user profile */
 /**********************/
@@ -645,6 +745,7 @@ footer {
   background-color: black;
   opacity: 0.5;
 }
+
 #user-profile-wrapper .user_profile_picture .preview {
   display: inline-block;
   position: relative;
@@ -652,27 +753,33 @@ footer {
   max-height: 175px;
   overflow: hidden;
 }
+
 #user-profile-wrapper .user_profile_picture .preview img {
   max-width: 100%;
   max-height: 100%;
 }
+
 #user-profile-wrapper .user_profile_picture .actions {
   display: inline-block;
   vertical-align: top;
   /*middle;*/
   margin-left: 5px;
 }
+
 #user-profile-wrapper .user_profile_picture .actions .btn {
   display: block;
   position: relative;
   margin-bottom: 10px;
 }
+
 #user-profile-wrapper .user_profile_picture .actions .btn:last-child {
   margin-bottom: 0px;
 }
+
 #user-profile-wrapper .user_profile_picture .actions .btn.btn_edit {
   overflow: hidden;
 }
+
 #user-profile-wrapper .user_profile_picture .actions .btn.btn_edit input {
   position: absolute;
   top: 0px;
@@ -682,6 +789,7 @@ footer {
   opacity: 0;
   cursor: pointer;
 }
+
 /****************/
 /* Brick browse */
 /****************/
@@ -691,9 +799,11 @@ footer {
   position: relative;
   margin-top: 0px;
 }
+
 #brick_content_tree .list-group-item {
   padding-top: 0px;
 }
+
 #brick_content_tree .list-group-item > .tree-item-wrapper {
   display: block;
   padding-top: 10px;
@@ -701,41 +811,58 @@ footer {
   text-decoration: inherit;
   cursor: pointer;
 }
+
 .list-group-item > .list-group-item-actions {
   /*display: none; Displaying actions only when hovering was not unanimous in the team */
   position: absolute;
   top: 10px;
   right: 10px;
 }
-.list-group-item:hover > .list-group-item-actions, .mosaic-group-item:hover > .mosaic-group-item-actions {
+
+.list-group-item:hover > .list-group-item-actions,
+.mosaic-group-item:hover > .mosaic-group-item-actions {
   display: block;
 }
-.list-group-item .list-group-item-actions a:not(:first-child), .mosaic-group-item .mosaic-group-item-actions a:not(:first-child) {
+
+.list-group-item .list-group-item-actions a:not(:first-child),
+.mosaic-group-item .mosaic-group-item-actions a:not(:first-child) {
   margin-left: 10px;
 }
+
 .list-group-item .keep-spinning {
   animation: spin 1s linear infinite;
   -webkit-animation: spin 1s linear infinite;
   -moz-animation: spin 1s linear infinite;
   -ms-animation: spin 1s linear infinite;
 }
+
 .list-group.tree .list-group-item .list-group-item-description {
   display: block;
   margin-top: 3px;
   font-size: 0.8em;
 }
+
 /* Secondary actions */
-.list-group-item-actions .group-actions-wrapper, .mosaic-group-item-actions .group-actions-wrapper, table .group-actions-wrapper {
+.list-group-item-actions .group-actions-wrapper,
+.mosaic-group-item-actions .group-actions-wrapper,
+table .group-actions-wrapper {
   text-align: center;
 }
+
 table .group-actions {
   position: relative;
 }
-.list-group-item-actions a.glyphicon-menu-hamburger, .mosaic-group-item-actions a.glyphicon-menu-hamburger, table .group-actions a.glyphicon-menu-hamburger {
+
+.list-group-item-actions a.glyphicon-menu-hamburger,
+.mosaic-group-item-actions a.glyphicon-menu-hamburger,
+table .group-actions a.glyphicon-menu-hamburger {
   cursor: pointer;
   text-decoration: none;
 }
-.list-group-item-actions .item-action-wrapper, .mosaic-group-item-actions .item-action-wrapper, table .group-actions .item-action-wrapper {
+
+.list-group-item-actions .item-action-wrapper,
+.mosaic-group-item-actions .item-action-wrapper,
+table .group-actions .item-action-wrapper {
   display: none;
   position: absolute;
   z-index: 5;
@@ -745,32 +872,48 @@ table .group-actions {
   -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
   box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
 }
-.list-group-item-actions .item-action-wrapper .glyphicon, .mosaic-group-item-actions .item-action-wrapper .glyphicon, table .group-actions .item-action-wrapper .glyphicon {
+
+.list-group-item-actions .item-action-wrapper .glyphicon,
+.mosaic-group-item-actions .item-action-wrapper .glyphicon,
+table .group-actions .item-action-wrapper .glyphicon {
   margin-right: 0.6em;
 }
-.list-group-item-actions .item-action-wrapper.collapse.in, .mosaic-group-item-actions .item-action-wrapper.collapse.in, table .group-actions .item-action-wrapper.collapse.in {
+
+.list-group-item-actions .item-action-wrapper.collapse.in,
+.mosaic-group-item-actions .item-action-wrapper.collapse.in,
+table .group-actions .item-action-wrapper.collapse.in {
   display: block;
 }
-.list-group-item-actions .item-action-wrapper .panel-body > p, .mosaic-group-item-actions .item-action-wrapper .panel-body > p, table .group-actions .item-action-wrapper .panel-body > p {
+
+.list-group-item-actions .item-action-wrapper .panel-body > p,
+.mosaic-group-item-actions .item-action-wrapper .panel-body > p,
+table .group-actions .item-action-wrapper .panel-body > p {
   text-align: left;
   white-space: nowrap;
 }
-.list-group-item-actions .item-action-wrapper .panel-body > p:last-child, .mosaic-group-item-actions .item-action-wrapper .panel-body > p:last-child, table .group-actions .item-action-wrapper .panel-body > p:last-child {
+
+.list-group-item-actions .item-action-wrapper .panel-body > p:last-child,
+.mosaic-group-item-actions .item-action-wrapper .panel-body > p:last-child,
+table .group-actions .item-action-wrapper .panel-body > p:last-child {
   margin-bottom: 0px;
 }
+
 #brick_content_empty {
   display: none;
   padding: 40px;
   font-size: 1.3em;
   font-style: italic;
 }
+
 /* Loader */
-#brick_tree_overlay, #brick_mosaic_overlay {
+#brick_tree_overlay,
+#brick_mosaic_overlay {
   display: none;
   padding: 8% 0px;
   border-radius: 0px 0px 4px 4px;
   font-size: 1em;
 }
+
 /****************************************************************/
 /* - Mosaic mode                                                */
 /*                                                              */
@@ -788,6 +931,7 @@ table .group-actions {
   position: relative;
   padding: 10px 10px 1px 10px;
 }
+
 /* Breadcrumb */
 #mosaic-breadcrumb {
   margin-bottom: 5px;
@@ -797,23 +941,29 @@ table .group-actions {
   overflow-x: hidden;
   text-overflow: ellipsis;
 }
+
 .mosaic-group {
   display: none;
 }
+
 /* Only the first level is showed by default */
 .mosaic-group:first-of-type {
   display: block;
 }
-.mosaic-group-back, .mosaic-group-item {
+
+.mosaic-group-back,
+.mosaic-group-item {
   position: relative;
   height: 55px;
   margin-bottom: 10px;
   text-align: center;
   color: #FFFFFF;
 }
+
 .mosaic-group-back {
   font-size: 25px;
 }
+
 .mosaic-item {
   display: table;
   width: 100%;
@@ -822,71 +972,95 @@ table .group-actions {
   background-color: #585653;
   transition: all linear 0.3s;
 }
-.mosaic-item, .mosaic-item:hover, .mosaic-item:active, .mosaic-item:focus, .mosaic-item:visited {
+
+.mosaic-item,
+.mosaic-item:hover,
+.mosaic-item:active,
+.mosaic-item:focus,
+.mosaic-item:visited {
   color: #FFFFFF;
   text-decoration: none;
 }
+
 .mosaic-item:active {
   background-color: #9e510f;
 }
-.mosaic-item-image, .mosaic-item-text {
+
+.mosaic-item-image,
+.mosaic-item-text {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
 }
+
 .mosaic-item-image > img {
   max-width: 85%;
 }
+
 .mosaic-item-text {
   max-width: 1px;
   /* This is an arbitrary value. It is just here to make .mosaic-item-name wrap when there is a very long word in it. */
   overflow: hidden;
 }
+
 .mosaic-group-item > .mosaic-group-item-actions {
   position: absolute;
   top: 5px;
   right: 5px;
 }
+
 .mosaic-group-item-actions > a {
   color: #FFFFFF;
   text-decoration: none;
 }
-.mosaic-group-item-actions > a:hover, .mosaic-group-item-actions > a:focus {
+
+.mosaic-group-item-actions > a:hover,
+.mosaic-group-item-actions > a:focus {
   color: #EEEEEE;
 }
+
 @media (max-width: 768px) {
   .mosaic-group-item > .mosaic-group-item-actions {
     top: 12px;
     right: 6px;
   }
+
   .mosaic-group-item > .mosaic-group-item-actions > .glyphicon {
     margin-top: 5px;
   }
+
   .mosaic-group-item-actions > a {
     font-size: 20px;
-    /* All layouts */
   }
+
+  /* All layouts */
   .mosaic-item-image {
     width: 55px;
     padding: 10px;
   }
+
   .mosaic-item-image > img {
     max-height: 30px;
   }
+
   .mosaic-item-name {
     font-size: 14px;
     max-height: 50px;
     overflow: hidden;
   }
+
   .mosaic-item-description {
     display: none;
-    /* Layout 2 */
   }
+
+  /* Layout 2 */
   .mosaic-item-layout-2 .mosaic-item-description {
     display: block;
-    /* Layout 5/7 */
   }
-  .mosaic-item-layout-5 .mosaic-item-name, .mosaic-item-layout-7 .mosaic-item-name {
+
+  /* Layout 5/7 */
+  .mosaic-item-layout-5 .mosaic-item-name,
+.mosaic-item-layout-7 .mosaic-item-name {
     padding-right: 40px;
   }
 }
@@ -899,21 +1073,26 @@ table .group-actions {
     /* We don't put 2% to keep a margin in case of a bad browser rendering */
     word-break: break-word;
   }
+
   .mosaic-item {
     padding: 10px;
   }
-  .mosaic-item:hover, .mosaic-item:focus {
+
+  .mosaic-item:hover,
+.mosaic-item:focus {
     background-color: #EA7D1E;
     box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
-    /* All layouts */
-    /* .mosaic-item-image{
-     vertical-align: inherit; Note: This was introduced to avoid image from going down the tile when .mosaic-item-name was way too long, but the .mosaic-item-image glitched by being a little too high. As a very long .mosaic-item-name is extremely rare, we decided that it was not worth it.
-     }*/
   }
+
+  /* All layouts */
+  /* .mosaic-item-image{
+  	vertical-align: inherit; Note: This was introduced to avoid image from going down the tile when .mosaic-item-name was way too long, but the .mosaic-item-image glitched by being a little too high. As a very long .mosaic-item-name is extremely rare, we decided that it was not worth it.
+  }*/
   .mosaic-item-text .mosaic-item-text-wrapper {
     max-height: 100px;
     /* Must be .mosaic-item absolute height (in px) */
   }
+
   .mosaic-item-name {
     max-height: 100%;
     /* It's ok if description is pushed down and not visible; but we truncate before it flows out of the tile */
@@ -921,32 +1100,41 @@ table .group-actions {
     font-weight: 600;
     font-size: 12px;
   }
+
   .mosaic-item-description {
     overflow: hidden;
     text-overflow: ellipsis;
-    /* Layout 1 */
   }
+
+  /* Layout 1 */
   .mosaic-item-layout-1 .mosaic-item-name {
     font-weight: inherit;
     font-size: 14px;
-    /* Layout 7 */
   }
+
+  /* Layout 7 */
   .mosaic-item-layout-7 .mosaic-item-image {
     display: none;
   }
-  .mosaic-item-layout-3 .mosaic-item-description, .mosaic-item-layout-7 .mosaic-item-description {
+
+  .mosaic-item-layout-3 .mosaic-item-description,
+.mosaic-item-layout-7 .mosaic-item-description {
     margin-top: 10px;
     max-height: 40px;
     font-size: 10px;
-    /* Layout 5 & 7 */
   }
-  .mosaic-item-layout-5 .mosaic-item-image, .mosaic-item-layout-7 .mosaic-item-image {
+
+  /* Layout 5 & 7 */
+  .mosaic-item-layout-5 .mosaic-item-image,
+.mosaic-item-layout-7 .mosaic-item-image {
     display: table-cell;
     width: 65px;
     padding-left: 5px;
     padding-right: 10px;
   }
-  .mosaic-item-layout-5 .mosaic-item-image > img, .mosaic-item-layout-7 .mosaic-item-image > img {
+
+  .mosaic-item-layout-5 .mosaic-item-image > img,
+.mosaic-item-layout-7 .mosaic-item-image > img {
     max-width: 65px;
     /* Equals parent element width */
     max-height: 100px;
@@ -957,21 +1145,28 @@ table .group-actions {
   .mosaic-item {
     padding: 10px 15px;
   }
+
   .mosaic-group-back {
     font-size: 40px;
-    /* Layout 5 & 7 */
   }
-  .mosaic-item-layout-5 .mosaic-item-image, .mosaic-item-layout-7 .mosaic-item-image {
+
+  /* Layout 5 & 7 */
+  .mosaic-item-layout-5 .mosaic-item-image,
+.mosaic-item-layout-7 .mosaic-item-image {
     width: 105px;
     padding-right: 18px;
   }
-  .mosaic-item-layout-5 .mosaic-item-image > img, .mosaic-item-layout-7 .mosaic-item-image > img {
+
+  .mosaic-item-layout-5 .mosaic-item-image > img,
+.mosaic-item-layout-7 .mosaic-item-image > img {
     max-width: 105px;
     /* Equals parent element width */
     max-height: 100px;
     /* Equals parent element height */
   }
-  .mosaic-item-layout-5 .mosaic-item-name, .mosaic-item-layout-7 .mosaic-item-name {
+
+  .mosaic-item-layout-5 .mosaic-item-name,
+.mosaic-item-layout-7 .mosaic-item-name {
     font-size: 12px;
   }
 }
@@ -980,14 +1175,17 @@ table .group-actions {
     width: 24%;
     height: 140px;
     margin-right: 1.3%;
-    /* All layouts */
   }
+
+  /* All layouts */
   .mosaic-item-text .mosaic-item-text-wrapper {
     max-height: 120px;
     /* Must be .mosaic-item absolute height (in px) */
     /* overflow hidden inherited */
   }
-  .mosaic-item-layout-5 .mosaic-item-image > img, .mosaic-item-layout-7 .mosaic-item-image > img {
+
+  .mosaic-item-layout-5 .mosaic-item-image > img,
+.mosaic-item-layout-7 .mosaic-item-image > img {
     max-height: 120px;
     /* Equals parent element height */
   }
@@ -1017,12 +1215,15 @@ table .group-actions {
 .tile.tile-filter-brick a.tile_decoration {
   cursor: default;
 }
+
 .tile.tile-filter-brick .tile_filterbox .form-group:first-child {
   width: 100%;
 }
-.tile.tile-filter-brick .tile_filterbox input[type="text"] {
+
+.tile.tile-filter-brick .tile_filterbox input[type=text] {
   width: 100%;
 }
+
 @media (max-width: 768px) {
   .tile.tile-filter-brick .tile_filterbox .form-group:first-child {
     margin-bottom: 5px;
@@ -1032,10 +1233,12 @@ table .group-actions {
   .tile.tile-filter-brick .tile_filterbox form {
     display: table;
   }
+
   .tile.tile-filter-brick .tile_filterbox .form-group:first-child {
     display: table-cell;
   }
-  .tile.tile-filter-brick .tile_filterbox button[type="submit"] {
+
+  .tile.tile-filter-brick .tile_filterbox button[type=submit] {
     margin-left: 5px;
   }
 }
@@ -1047,7 +1250,7 @@ table .group-actions {
 /*********/
 /* Forms */
 /*********/
-.form_field_label > .control-label[data-tooltip-instantiated="true"]::after {
+.form_field_label > .control-label[data-tooltip-instantiated=true]::after {
   content: "?";
   padding-left: 3px;
   vertical-align: top;
@@ -1055,33 +1258,39 @@ table .group-actions {
   color: #777;
   font-size: 0.85em;
 }
+
 .form_field .form_mandatory .control-label:after {
-  content: "\002a";
+  content: "*";
   position: relative;
   left: 3px;
   color: #EA7D1E;
   font-size: 0.9em;
 }
+
 /* Note: We don't put the .form_field selector as it must work for read-only */
 .form-control-static img {
   max-width: 100% !important;
   height: initial !important;
 }
+
 /* ExternalKey */
 .selectobject .input-group-addon {
   cursor: pointer;
 }
+
 /* InlineImage */
 .inline-image {
   cursor: pointer;
   cursor: zoom-in;
 }
+
 /* CaseLog field */
 .caselog-thread {
   position: relative;
   border: 1px solid #ddd;
   border-top: none;
 }
+
 .caselog-thread--header {
   padding: 8px;
   font-size: 11px;
@@ -1092,6 +1301,7 @@ table .group-actions {
   color: #777;
   /* body: color */
 }
+
 .caselog-thread--header-toggler {
   cursor: pointer;
   color: inherit;
@@ -1106,6 +1316,7 @@ table .group-actions {
   margin: 0 0.4em 0 0.2em;
   /* Note: Difference between left and right margin is due to a left space being output because the line break in the HTML isn't tidy */
 }
+
 .caselog-thread--header-info > span {
   margin-left: 0.5em;
 }
@@ -1115,12 +1326,14 @@ table .group-actions {
 .caselog-thread--header-info > span:first-child {
   margin-left: 0;
 }
+
 .caselog-thread--content {
   padding: 5px;
   /*max-height: 400px;
-   overflow: auto;*/
+  overflow: auto;*/
   background-color: #f2f2f2;
 }
+
 .caselog-thread--date {
   margin-bottom: 10px;
   text-align: center;
@@ -1129,6 +1342,7 @@ table .group-actions {
 .caselog-thread--date:first-child {
   display: none;
 }
+
 .caselog-thread--block {
   position: relative;
   min-height: 40px;
@@ -1138,9 +1352,12 @@ table .group-actions {
 .caselog-thread--block:last-child {
   margin-bottom: 0px;
 }
-.caselog-thread--block-medallion, .caselog-thread--block-entries {
+
+.caselog-thread--block-medallion,
+.caselog-thread--block-entries {
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
 }
+
 .caselog-thread--block-medallion {
   position: absolute;
   top: 0px;
@@ -1160,6 +1377,7 @@ table .group-actions {
   background-repeat: no-repeat;
   border-radius: 100%;
 }
+
 .caselog-thread--block-user {
   display: none;
   margin-left: 54px;
@@ -1168,6 +1386,7 @@ table .group-actions {
   color: #FFFFFF;
   /* .caselog-thread--block-entries background-color */
 }
+
 .caselog-thread--block-entries {
   position: relative;
   display: inline-block;
@@ -1176,6 +1395,7 @@ table .group-actions {
   background-color: #585653;
   color: #FFFFFF;
 }
+
 .caselog-thread--block-entry {
   position: relative;
   padding: 8px 10px;
@@ -1219,18 +1439,20 @@ table .group-actions {
 .caselog-thread--block-entry:hover:not(.closed) .caselog-thread--block-entry-toggler {
   opacity: 1;
 }
+
 .caselog-thread--block-entry-content {
   display: block;
   overflow-x: auto;
+  /* Force user-generated tables to fit within the container as they often have an hard-coded width */
 }
 .caselog-thread--block-entry-content > p:last-of-type {
   margin-bottom: 0px;
-  /* Force user-generated tables to fit within the container as they often have an hard-coded width */
 }
 .caselog-thread--block-entry-content table {
   width: unset !important;
   max-width: max-content;
 }
+
 .caselog-thread--block-entry-date {
   margin-top: 5px;
   opacity: 0.6;
@@ -1238,6 +1460,7 @@ table .group-actions {
   text-align: right;
   transition: all 0.2s linear;
 }
+
 .caselog-thread--block-entry-toggler {
   position: absolute;
   top: 2px;
@@ -1249,6 +1472,7 @@ table .group-actions {
   /* .caselog-thread--block-entries background-color */
   transition: all 0.2s linear;
 }
+
 .caselog-thread--block-me {
   text-align: right;
 }
@@ -1280,6 +1504,7 @@ table .group-actions {
   border-left-color: #585653;
   /* .caselog-thread--block-entries background-color */
 }
+
 .caselog-thread--block-color-1 .caselog-thread--block-medallion {
   color: #444;
   background-color: #FFFFFF;
@@ -1298,6 +1523,7 @@ table .group-actions {
   border-top-color: #FFFFFF;
   border-right-color: #FFFFFF;
 }
+
 .caselog-thread--block-color-2 .caselog-thread--block-medallion {
   color: #444;
   background-color: #FFFFFF;
@@ -1316,6 +1542,7 @@ table .group-actions {
   border-top-color: #FFFFFF;
   border-right-color: #FFFFFF;
 }
+
 .caselog-thread--block-color-3 .caselog-thread--block-medallion {
   color: #444;
   background-color: #FFFFFF;
@@ -1334,6 +1561,7 @@ table .group-actions {
   border-top-color: #FFFFFF;
   border-right-color: #FFFFFF;
 }
+
 .caselog-thread--block-color-4 .caselog-thread--block-medallion {
   color: #444;
   background-color: #FFFFFF;
@@ -1352,6 +1580,7 @@ table .group-actions {
   border-top-color: #FFFFFF;
   border-right-color: #FFFFFF;
 }
+
 .caselog-thread--block-color-5 .caselog-thread--block-medallion {
   color: #444;
   background-color: #FFFFFF;
@@ -1370,8 +1599,9 @@ table .group-actions {
   border-top-color: #FFFFFF;
   border-right-color: #FFFFFF;
 }
+
 /* collapsable sections*/
-.form_linkedset_toggler, .form_upload_toggler, .form_linkedset_toggler:hover, .form_upload_toggler:hover, .form_linkedset_toggler:focus, .form_upload_toggler:focus {
+.form_linkedset_toggler, .form_linkedset_toggler:hover, .form_linkedset_toggler:focus, .form_upload_toggler, .form_upload_toggler:hover, .form_upload_toggler:focus {
   text-decoration: none;
   color: inherit;
 }
@@ -1393,24 +1623,30 @@ table .group-actions {
 .form_linkedset_toggler > .glyphicon.collapsed, .form_upload_toggler > .glyphicon.collapsed {
   transform: rotateZ(-90deg);
 }
+
 /* - DataTables : Loader */
 .form_linkedset_wrapper .datatables_overlay {
   padding: 8px !important;
 }
+
 .form_linkedset_wrapper .overlay_content {
   font-size: 0.6em;
 }
+
 .form_linkedset_wrapper .content_loader {
   margin: 0px;
 }
+
 .form_linkedset_wrapper .content_loader .icon {
   height: 23px;
 }
+
 /* - DataTables : Fit the table in the form */
 .form_linkedset_wrapper .dataTables_wrapper {
   margin-bottom: 5px;
   padding: 0px;
 }
+
 /* FileUpload */
 .attachments_container .attachments-list thead > tr > th {
   text-align: center;
@@ -1420,29 +1656,28 @@ table .group-actions {
   text-align: left;
   vertical-align: middle;
 }
-.attachments_container .attachments-list tbody > tr > td[role="icon"] {
+.attachments_container .attachments-list tbody > tr > td[role=icon] {
   text-align: center;
 }
-.attachments_container .attachments-list tbody > tr > td[role="icon"] img {
+.attachments_container .attachments-list tbody > tr > td[role=icon] img {
   max-height: 32px;
 }
-.attachments_container .attachments-list tbody > tr > td[role="formatted-size"] {
+.attachments_container .attachments-list tbody > tr > td[role=formatted-size] {
   text-align: right;
 }
-.attachments_container .attachments-list tbody > tr > td[role="delete"] {
+.attachments_container .attachments-list tbody > tr > td[role=delete] {
   text-align: center;
 }
+
 .attachment-tooltip {
-  width: 350px;
-  height: 300px;
-}
-.attachment-tooltip img {
   max-width: 100%;
   max-height: 100%;
 }
+
 .upload_container input {
   display: inline;
 }
+
 .upload_container .loader {
   visibility: hidden;
   margin-left: 7px;
@@ -1452,23 +1687,28 @@ table .group-actions {
   -moz-animation: spin 1s linear infinite;
   -ms-animation: spin 1s linear infinite;
 }
+
 #drag_overlay {
   display: block;
   top: inherit;
   bottom: 0px;
   height: 0px;
 }
+
 #drag_overlay .overlay_content {
   margin-top: 5em;
   width: 100%;
   color: white;
 }
+
 #drag_overlay .overlay_content .icon {
   font-size: 3em;
 }
+
 #drag_overlay .overlay_content .message {
   font-size: 1.5em;
 }
+
 /* Attachments drag & drop zone, only for none mobile devices */
 @media (min-width: 768px) {
   #drag_overlay.drag_in {
@@ -1477,12 +1717,14 @@ table .group-actions {
     -moz-animation: show-drop-zone 0.3s ease-out forwards;
     -ms-animation: show-drop-zone 0.3s ease-out forwards;
   }
+
   #drag_overlay.drag_out {
     animation: hide-drop-zone 0.3s ease-out forwards;
     -webkit-animation: hide-drop-zone 0.3s ease-out forwards;
     -moz-animation: hide-drop-zone 0.3s ease-out forwards;
     -ms-animation: hide-drop-zone 0.3s ease-out forwards;
   }
+
   @keyframes show-drop-zone {
     100% {
       height: 20%;
@@ -1540,37 +1782,47 @@ table .group-actions {
 .form_fields .file_open_link {
   margin-left: 10px;
 }
+
 .form_buttons {
   padding-top: 20px;
   text-align: center;
 }
+
 .form_buttons .form_btn_misc {
   margin-bottom: 20px;
 }
+
 .form_buttons .form_btn_transitions {
   margin-bottom: 20px;
 }
+
 .form_buttons .btn .glyphicon {
   margin-right: 0.5em;
 }
+
 .form_btn_regular.sticky {
   display: none;
 }
+
 @media (min-width: 768px) {
   .form_buttons .form_btn_misc {
     float: left !important;
   }
+
   .form_buttons .form_btn_transitions {
     float: right !important;
     margin-left: 3px;
   }
+
   .form_buttons .form_btn_regular {
     text-align: right;
   }
+
   .form_buttons .form_btn_regular .btn {
     width: inherit;
-    /* Making regular button sticky */
   }
+
+  /* Making regular button sticky */
   .form_btn_regular.sticky {
     display: block;
     position: fixed;
@@ -1583,12 +1835,15 @@ table .group-actions {
     border-radius: 0px;
     transition: right 0.3s;
   }
+
   .form_btn_regular.sticky.closed {
     right: -75px;
   }
+
   .form_btn_regular.sticky button {
     display: block;
   }
+
   .form_btn_regular.sticky button:first-child {
     margin-bottom: 4px;
   }
@@ -1597,11 +1852,13 @@ table .group-actions {
 .form_field .cke {
   border: 1px solid #ddd;
 }
+
 .form_field.has-error .cke {
   border: 1px solid #b94a48;
   border-radius: 0px;
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
 }
+
 /* CKEditor : Styling notifications based on BS alerts */
 .cke_notification {
   position: relative;
@@ -1611,31 +1868,38 @@ table .group-actions {
   border-radius: 4px;
   background-color: #FFFFFF;
 }
+
 .cke_notification_close {
   position: absolute;
   top: 2px;
   right: 5px;
 }
+
 .cke_notification_message {
   margin-bottom: 0px;
   line-height: 1em;
   font-size: 1em;
 }
+
 .cke_notification_success {
   display: none;
   background-color: #dff0d8;
   border-color: #58a959;
   color: #468847;
 }
+
 .cke_notification_warning {
   background-color: #fcf8e3;
   border-color: #ceae78;
   color: #c09853;
 }
+
 /* CKEditor : Misc */
-.cke_toolbox_collapser, .cke_toolbox_collapser .cke_arrow {
+.cke_toolbox_collapser,
+.cke_toolbox_collapser .cke_arrow {
   cursor: pointer !important;
 }
+
 .cke_toolbox_collapser.cke_toolbox_collapser_min ~ .editor-fullscreen-button {
   display: block;
   width: 12px;
@@ -1646,18 +1910,23 @@ table .group-actions {
   background-position: center center !important;
   background-repeat: no-repeat !important;
   background-size: 100% !important;
-  background-image: url('../../../../../images/full-screen.png') !important;
+  background-image: url("../../../../../images/full-screen.png") !important;
 }
 .cke_toolbox_collapser.cke_toolbox_collapser_min ~ .editor-fullscreen-button:hover {
   background-color: #E5E5E5;
 }
+
 /* DataTables : Selection inputs */
-.dataTable.table th span.row_input, .dataTable.table td span.row_input {
+.dataTable.table th span.row_input,
+.dataTable.table td span.row_input {
   display: inline-block;
   width: 100%;
   text-align: center;
 }
+
 /* Wiki text (hyperlinks) */
 .wiki_broken_link {
   text-decoration: line-through;
 }
+
+/*# sourceMappingURL=portal.css.map */
diff --git a/datamodels/2.x/itop-portal-base/portal/public/css/portal.scss b/datamodels/2.x/itop-portal-base/portal/public/css/portal.scss
index caa3de4bf..bcbd0a761 100644
--- a/datamodels/2.x/itop-portal-base/portal/public/css/portal.scss
+++ b/datamodels/2.x/itop-portal-base/portal/public/css/portal.scss
@@ -1571,13 +1571,8 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
 	}
 }
 .attachment-tooltip {
-	width: 350px;
-	height: 300px;
-
-	img {
 		max-width: 100%;
 		max-height: 100%;
-	}
 }
 
 .upload_container input{
diff --git a/sources/Renderer/Bootstrap/FieldRenderer/BsFileUploadFieldRenderer.php b/sources/Renderer/Bootstrap/FieldRenderer/BsFileUploadFieldRenderer.php
index 58d017f9c..95902f4ba 100644
--- a/sources/Renderer/Bootstrap/FieldRenderer/BsFileUploadFieldRenderer.php
+++ b/sources/Renderer/Bootstrap/FieldRenderer/BsFileUploadFieldRenderer.php
@@ -183,7 +183,7 @@ JS
 			'{{iAttId}}',
 			'{{sLineStyle}}',
 			'{{sDocDownloadUrl}}',
-			'{{sIconClass}}',
+			'{{bHasPreview}}',
 			'{{sAttachmentThumbUrl}}',
 			'{{sFileName}}',
 			'{{sAttachmentMeta}}',
@@ -233,7 +233,6 @@ JS
 						var \$oAttachmentTBody = $(this).closest('.fileupload_field_content').find('.attachments_container table#$sAttachmentTableId>tbody'),
 							iAttId = data.result.att_id,
 							sDownloadLink = '{$this->oField->GetDownloadEndpoint()}'.replace(/-sAttachmentId-/, iAttId),
-							sIconClass = (data.result.preview == 'true') ? 'trigger-preview' : '',
 							sAttachmentMeta = '<input id="attachment_'+iAttId+'" type="hidden" name="attachments[]" value="'+iAttId+'"/>';
 
 						// hide "no attachment" line if present
@@ -247,7 +246,7 @@ JS
 							{search: "{{iAttId}}", replace:iAttId },
 							{search: "{{lineStyle}}", replace:'' },
 							{search: "{{sDocDownloadUrl}}", replace:sDownloadLink },
-							{search: "{{sIconClass}}", replace:sIconClass },
+							{search: "{{sHasPreview}}", replace:data.result.preview },
 							{search: "{{sAttachmentThumbUrl}}", replace:data.result.icon },
 							{search: "{{sFileName}}", replace: data.result.msg },
 							{search: "{{sAttachmentMeta}}", replace:sAttachmentMeta },
@@ -261,9 +260,6 @@ JS
 						});
 						
 						\$oAttachmentTBody.append(sAttachmentRow);
-						// Preview tooltip
-						if(data.result.preview){
-						}
 						// Remove button handler
 						$('#display_attachment_'+data.result.att_id+' :button').on('click', function(oEvent){
 							oEvent.preventDefault();
@@ -303,8 +299,6 @@ JS
 				}
 			});
 
-			$('table#$sAttachmentTableId>tbody>tr>td a.trigger-preview').each(function(iIndex, oElem){
-			});
 			// Remove button handler
 			$('.attachments_container table#$sAttachmentTableId>tbody>tr>td :button').on('click', function(oEvent){
 				oEvent.preventDefault();
@@ -404,10 +398,10 @@ HTML
 				$sDocDownloadUrl = str_replace('-sAttachmentId-', $iAttId, $this->oField->GetDownloadEndpoint());
 
 				$sAttachmentThumbUrl = utils::GetAbsoluteUrlAppRoot().AttachmentPlugIn::GetFileIcon($sFileName);
-				$sIconClass = '';
+				$bHasPreview = false;
 				if ($oDoc->IsPreviewAvailable())
 				{
-					$sIconClass = 'trigger-preview';
+					$bHasPreview = true;
 					$iMaxSizeForPreview = MetaModel::GetModuleSetting('itop-attachments', 'icon_preview_max_size', AbstractAttachmentsRenderer::DEFAULT_MAX_SIZE_FOR_PREVIEW);
 					if ($oDoc->GetSize() <= $iMaxSizeForPreview)
 					{
@@ -431,7 +425,7 @@ HTML
 					$iAttId,
 					$sLineStyle,
 					$sDocDownloadUrl,
-					$sIconClass,
+					$bHasPreview,
 					$sAttachmentThumbUrl,
 					$sFileName,
 					$sAttachmentMeta,
@@ -482,7 +476,7 @@ HTML;
 	 * @param int $iAttId
 	 * @param string $sLineStyle
 	 * @param string $sDocDownloadUrl
-	 * @param string $sIconClass
+	 * @param bool $bHasPreview replace string $sIconClass since 3.0.1
 	 * @param string $sAttachmentThumbUrl
 	 * @param string $sFileName
 	 * @param string $sAttachmentMeta
@@ -496,7 +490,7 @@ HTML;
 	 * @since 2.7.0
 	 */
 	protected static function GetAttachmentTableRow(
-		$iAttId, $sLineStyle, $sDocDownloadUrl, $sIconClass, $sAttachmentThumbUrl, $sFileName, $sAttachmentMeta, $sFileSize,
+		$iAttId, $sLineStyle, $sDocDownloadUrl, $bHasPreview, $sAttachmentThumbUrl, $sFileName, $sAttachmentMeta, $sFileSize,
 		$iFileSizeRaw, $sAttachmentDate, $iAttachmentDateRaw, $bIsDeleteAllowed
 	) {
 		$sDeleteCell = '';
@@ -505,16 +499,22 @@ HTML;
 			$sDeleteBtnLabel = Dict::S('Portal:Button:Delete');
 			$sDeleteCell = '<td role="delete"><input id="btn_remove_'.$iAttId.'" type="button" class="btn btn-xs btn-primary" value="'.$sDeleteBtnLabel.'"></td>';
 		}
+		$sHtml =  "<tr id=\"display_attachment_{$iAttId}\" class=\"attachment\" $sLineStyle>";
 
-		return <<<HTML
-	<tr id="display_attachment_{$iAttId}" class="attachment" $sLineStyle>
-	  <td role="icon"><a href="$sDocDownloadUrl" target="_blank" class="$sIconClass" data-tooltip-content="<div class='attachment-tooltip'><img src='{$sDocDownloadUrl}'></div>" data-tooltip-html-enabled=true><img $sIconClass src="$sAttachmentThumbUrl" ></a></td>
-	  <td role="filename"><a href="$sDocDownloadUrl" target="_blank">$sFileName</a>$sAttachmentMeta</td>
+		if($bHasPreview) {
+			$sHtml .= "<td role=\"icon\"><a href=\"$sDocDownloadUrl\" target=\"_blank\" data-tooltip-content=\"<img class='attachment-tooltip' src='{$sDocDownloadUrl}'>\" data-tooltip-html-enabled=true><img src=\"$sAttachmentThumbUrl\" ></a></td>";
+		} else {
+			$sHtml .= "<td role=\"icon\"><a href=\"$sDocDownloadUrl\" target=\"_blank\"><img src=\"$sAttachmentThumbUrl\" ></a></td>";
+		}
+
+		$sHtml .=  <<<HTML
+	 <td role="filename"><a href="$sDocDownloadUrl" target="_blank">$sFileName</a>$sAttachmentMeta</td>
 	  <td role="formatted-size" data-order="$iFileSizeRaw">$sFileSize</td>
 	  <td role="upload-date" data-order="$iAttachmentDateRaw">$sAttachmentDate</td>
 	  $sDeleteCell
 	</tr>
 HTML;
+		return $sHtml;
 	}
 
 	/**