added list scrollbar

content/index.blade.php

@@ -5,7 +5,6 @@
         #map {
             height: 80vh;
             width: 100%;
-            border-radius: 0.375rem;
         }
         .address + .address{
             margin-top: .5rem;
@@ -13,6 +12,34 @@
         #marker-window{
             min-width: 100px;
         }
+        #contents {
+            scrollbar-color: #aaa #f5f5f5;
+        }
+
+        #contents::-webkit-scrollbar {
+            width: 8px;
+            background-color: #f5f5f5;
+        }
+
+        #contents::-webkit-scrollbar-thumb {
+            background-color: #aaa;
+        }
+
+        #contents::-webkit-scrollbar-thumb:hover {
+            background-color: #666;
+        }
+
+        #contents::-moz-scrollbar {
+            background-color: #f5f5f5;
+        }
+
+        #contents::-moz-scrollbar-thumb {
+            background-color: #aaa;
+        }
+
+        #contents::-moz-scrollbar-thumb:hover {
+            background-color: #666;
+        }
     </style>
 @stop
 @section('content')
@@ -55,7 +82,7 @@
             </div>
         </div>
         <div class="row">
-            <div class="col-4" id="contents">
+            <div class="col-4 overflow-auto" style="height: 80vh;" id="contents">
                 <div class="card d-none address">
                     <div class="card-body">
                         <div class="row">
@@ -76,14 +103,13 @@
                     <h6 id="firstHeading" class="firstHeading">$title</h6>
                     <div id="bodyContent">
                         <p>$description</p>
-                        <a data-href="$path">Details</a>
+                        <a data-href="$path" style="outline: none;">Details</a>
                     </div>
                 </div>
             </div>
         </div>
     </div>
     <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAKGJCCKvmWZl-L5bBF0uS5BWf0gN4ZkpI&callback=initMap&v=weekly" defer></script>
-    <!-- <script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script> -->
     <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
     <script>
         const contentUrl = "{{url('/api/types/locations/contents')}}";
@@ -183,6 +209,7 @@
                                     newElement.removeClass('d-none');
 
                                     newElement.on('click', function () {
+                                        
                                         var bounds = new google.maps.LatLngBounds();
                                         bounds.extend(marker.getPosition());
                                         map.fitBounds(bounds);