From 0be9e3f33bea6bc8ac1a57efac10b8638b21470f Mon Sep 17 00:00:00 2001
From: Harsh Prabhu <33490577+harsh1599@users.noreply.github.com>
Date: Fri, 15 Mar 2019 04:37:18 +0530
Subject: [PATCH] Centered the cropped image (#705)

* Updated demo.css

* Updated defaultHtmlStepUI.js

* Updated defaultHtmlStepUI.js

* Updated defaultHtmlStepUI.js

* Updated demo.css

* Updated defaultHtmlStepUi.js

* Updated defaultHtmlStepUi.js

* Added semi-colons in demo.css

* removed the style attribute from the img element
---
 examples/demo.css                 | 14 +++++++++++++-
 examples/lib/defaultHtmlStepUi.js | 12 +++++++-----
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/examples/demo.css b/examples/demo.css
index b1c57ebc..c97103b4 100644
--- a/examples/demo.css
+++ b/examples/demo.css
@@ -249,4 +249,16 @@ h1 {
 a.name-header{
   text-decoration: none;
   color: #445;
-}
\ No newline at end of file
+}
+
+.step-column{ 
+    display:flex; 
+    flex-direction:row; 
+    align-items:center;
+}
+.step-image{
+    width:100%; 
+    display:flex; 
+    flex-direction:column; 
+    align-items:center;
+}
diff --git a/examples/lib/defaultHtmlStepUi.js b/examples/lib/defaultHtmlStepUi.js
index 7f628341..7edfeee3 100644
--- a/examples/lib/defaultHtmlStepUi.js
+++ b/examples/lib/defaultHtmlStepUi.js
@@ -26,9 +26,9 @@ function DefaultHtmlStepUi(_sequencer, options) {
     step.ui =
       '\
       <div class="container">\
-    <div class="row step">\
+    <div class="row step" style="display:flex">\
     <form class="input-form">\
-    <div class="col-md-4 details">\
+    <div class="col-md-4 details" style="flex:1">\
     <h3>\
     <span class = "toggle">' +step.name + ' <i class="fa fa-caret-up toggleIcon" aria-hidden="true"></i></span>' +
     '<span class="load-spin" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></span>' +
@@ -37,9 +37,11 @@ function DefaultHtmlStepUi(_sequencer, options) {
       '</i></p></div>\
     </div>\
     </form>\
-    <div class="col-md-8 cal">\
-    <div class="load" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></div>\
-    <a><img alt="" style="max-width=100%" class="img-thumbnail step-thumbnail"/></a>\
+    <div class="col-md-8 cal step-column">\
+      <div class="load" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></div>\
+      <div class="step-image">\
+        <a><img alt="" class="img-thumbnail step-thumbnail"/></a>\
+      </div>\
     </div>\
     </div>\
     </div>\