Refs #2973: fix design display degradation on IE

2 files changed, 39 insertions, 30 deletions

diff --git a/app/assets/javascripts/es6_browserified/itineraries/components/StopPoint.js b/app/assets/javascripts/es6_browserified/itineraries/components/StopPoint.js
index de95759e1..ba6539093 100644
--- a/app/assets/javascripts/es6_browserified/itineraries/components/StopPoint.js
+++ b/app/assets/javascripts/es6_browserified/itineraries/components/StopPoint.js
@@ -7,7 +7,9 @@ const StopPoint = (props) => {
   return (
     <div className='nested-fields'>
       <div className='wrapper'>
-        <div style={{width: 90}}>{props.value.user_objectid}</div>
+        <div style={{width: 90}}>
+          <span>{props.value.user_objectid}</span>
+        </div>
 
         <div>
           <BSelect2 id={'route_stop_points_' + props.id} value={props.value} onChange={props.onChange} index={props.index} />
@@ -47,7 +49,7 @@ const StopPoint = (props) => {
           >
             <span className='fa fa-arrow-down'></span>
           </div>
-          
+
           <div
             className='btn btn-link'
             onClick={props.onToggleEdit}
diff --git a/app/assets/stylesheets/modules/_routes_stopoints.sass b/app/assets/stylesheets/modules/_routes_stopoints.sass
index 029221605..8a42e3fcd 100644
--- a/app/assets/stylesheets/modules/_routes_stopoints.sass
+++ b/app/assets/stylesheets/modules/_routes_stopoints.sass
@@ -7,36 +7,43 @@
     padding-left: 20px
 
   .nested-fields
+    height: 100%
     > .wrapper
+      height: 100%
       > div:first-child
         position: relative
         padding-left: 20px /* intial value is 10 */
+        overflow: hidden
 
-        &:before
-          content: ''
-          display: block
-          width: 10px
-          height: 10px
-          background-color: #fff
-          border: 2px solid $blue
-          border-radius: 50%
-          position: absolute
-          z-index: 5
-          left: 0
-          top: 50%
-          margin-top: -5px
+        span
+          position: relative
 
-        &:after
-          content: ''
-          display: block
-          width: 4px
-          margin: 0 3px
-          background-color: rgba($grey, 0.5)
-          position: absolute
-          z-index: 3
-          top: 0
-          left: 0
-          bottom: 0
+          &:before
+            content: ''
+            display: block
+            width: 10px
+            height: 10px
+            background-color: #fff
+            border: 2px solid $blue
+            border-radius: 50%
+            position: absolute
+            z-index: 5
+            left: -20px
+            top: 50%
+            margin-top: -5px
+            box-sizing: border-box
+
+          &:after
+            content: ''
+            display: block
+            width: 4px
+            margin: 0 3px
+            background-color: rgba($grey, 0.5)
+            position: absolute
+            z-index: 3
+            top: -100px
+            left: -20px
+            bottom: -100px
 
       + .map_container
         > .map_metas
@@ -56,10 +63,10 @@
             left: 5px
 
     &:last-child > .wrapper > div:first-child
-      &:after
-        bottom: 50%
+      span:after
+        bottom: 5px
 
   .nested-fields:first-child > .wrapper > div:first-child,
   .nested-head + .nested-fields > .wrapper > div:first-child
-    &:after
-      top: 50%
+    span:after
+      top: 5px