Fix #1763: Preview centering enhancements for thumbnail, object and zoom content

CHANGE.md

@@ -5,6 +5,7 @@ Change Log: `bootstrap-fileinput`
 
 **Date**: _under development_
 
+- (enh #1763): Preview centering enhancements for thumbnail, object and zoom content.
 - (bug #1758): Correct bootstrap module parser.
 
 ## version 5.2.6

css/fileinput.css

@@ -274,6 +274,7 @@ input[type=file].file-loading {
     padding: 6px;
     float: left;
     text-align: center;
+
 }
 
 .krajee-default.file-preview-frame .kv-file-content {
@@ -281,12 +282,6 @@ input[type=file].file-loading {
     height: 160px;
 }
 
-.krajee-default .file-preview-other-frame {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
 .krajee-default.file-preview-frame .kv-file-content.kv-pdf-rendered {
     width: 400px;
 }
@@ -406,7 +401,7 @@ input[type=file].file-loading {
     height: 2.4rem;
     top: 50%;
     border-radius: 50%;
-    text-align:center;
+    text-align: center;
 }
 
 .btn-navigate * {
@@ -438,7 +433,7 @@ input[type=file].file-loading {
 }
 
 .file-zoom-dialog .kv-zoom-body {
-    padding: 0.25rem 0.5rem 0.25rem 0;
+    padding: 0.25rem;
 }
 
 .file-zoom-dialog .kv-zoom-description {
@@ -568,15 +563,6 @@ input[type=file].file-loading {
     background: transparent;
 }
 
-.file-zoom-content > * {
-    display: inline-block;
-    vertical-align: middle;
-}
-
-.file-zoom-content .kv-spacer {
-    height: 100%;
-}
-
 .file-zoom-content .file-preview-image {
     max-height: 100%;
 }
@@ -668,4 +654,10 @@ input[type=file].file-loading {
 
 .file-preview .kv-zoom-cache {
     display: none;
+}
+
+.file-preview-other-frame, .file-preview-object, .kv-zoom-body {
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }

js/fileinput.js

@@ -2989,7 +2989,7 @@
             }
             tmplt = $zoomPreview.attr('data-template') || 'generic';
             $content = $zoomPreview.find('.kv-file-content');
-            body = $content.length ? '<span class="kv-spacer"></span>\n' + $content.html() : '';
+            body = $content.length ? $content.html() : '';
             cap = $frame.data('caption') || self.msgZoomModalHeading;
             size = $frame.data('size') || '';
             desc = $frame.data('description') || '';
@@ -6132,7 +6132,7 @@
             skipErrorsAndProceed: false // when set to true, files with errors will be skipped and upload will continue with other files
         },
         uploadExtraData: {},
-        zoomModalHeight: 480,
+        zoomModalHeight: 485, // 5px more than the default preview content heights set for text, html, pdf etc.
         minImageWidth: null,
         minImageHeight: null,
         maxImageWidth: null,

scss/fileinput.scss

@@ -347,12 +347,6 @@ input[type=file].file-loading {
     }
   }
 
-  .file-preview-other-frame {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
   .file-preview-text {
     display: block;
     color: $boston-blue;
@@ -727,15 +721,6 @@ input[type=file].file-loading {
   text-align: center;
   white-space: nowrap;
 
-  > * {
-    display: inline-block;
-    vertical-align: middle;
-  }
-
-  .kv-spacer {
-    height: 100%;
-  }
-
   .file-preview-image {
     max-height: 100%;
   }
@@ -853,4 +838,10 @@ input[type=file].file-loading {
   background-color: $link-water;
   border-color: $pelorous;
   box-shadow: none;
+}
+
+.file-preview-other-frame, .file-preview-object, .kv-zoom-body {
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }