add scrollbar to dropdown

src/App.css

@@ -28,7 +28,11 @@ body {
   color: white;
 }
 
-::-webkit-scrollbar {
+/* ::-webkit-scrollbar {
+  display: none;
+} */
+
+.dashboard-title::-webkit-scrollbar {
   display: none;
 }
 

src/components/Devices.css

@@ -4,7 +4,7 @@
     background: rgb(215, 192, 252);
     color: black;
     font-size: 30px;
-  }
+}
 
 .device-dropdown {
     width: 15vw;
@@ -12,18 +12,36 @@
     font-weight: 600;
 }
 
+.device-dropdown::-webkit-scrollbar {
+    background: black;
+    width: 5px;
+    height: 5px;
+}
+
 .day-dropdown {
     width: 20vw;
     margin: 5px;
     font-weight: 600;
 }
 
+.day-dropdown::-webkit-scrollbar {
+    background: black;
+    width: 5px;
+    height: 5px;
+}
+
 .test-dropdown {
     width: 20vw;
     margin: 5px;
     font-weight: 600;
 }
 
+.test-dropdown::-webkit-scrollbar {
+    background: black;
+    width: 5px;
+    height: 5px;
+}
+
 .dropdown-group {
     display: flex;
     flex-direction: row;

src/components/Devices.js

@@ -4,11 +4,32 @@ import * as _ from 'lodash';
 import Dropdown from 'react-dropdown';
 import 'react-dropdown/style.css';
 import moment from 'moment';
+import Select from 'react-select';
 
 import DeviceGraph from "./DeviceGraph";
 import db from '../firebase';
 import './Devices.css';
 
+const styles = {
+    menuList: (base) => ({
+        ...base,
+
+        "::-webkit-scrollbar": {
+            width: "4px",
+            height: "0px",
+        },
+        "::-webkit-scrollbar-track": {
+            background: "#f1f1f1"
+        },
+        "::-webkit-scrollbar-thumb": {
+            background: "#888"
+        },
+        "::-webkit-scrollbar-thumb:hover": {
+            background: "#555"
+        }
+    })
+};
+
 const Devices = () => {
     const [device, setDevice] = useState("Select a device");
     const [testDate, setTestDate] = useState("Select a test date");
@@ -55,6 +76,8 @@ const Devices = () => {
         setShowGraph(true);
     }
 
+    const menuPortalTarget = document.getElementById('root');
+
     useEffect(() => {
         if (!allTests) {
             const q = query(collection(db, "testData"));
@@ -86,6 +109,11 @@ const Devices = () => {
                 <Dropdown className='device-dropdown' options={devices} onChange={changeDevice} value={device} placeholder="Select an device" />
                 <Dropdown className='day-dropdown' options={days} onChange={changeTestDate} value={testDate} placeholder="Select an test date" />
                 <Dropdown className='test-dropdown' options={tests} onChange={changeTest} value={curTest} placeholder="Select an test" />
+                
+                {/* <Select className='device-dropdown' options={devices.map(x => { return { value: x, label: x }; })} menuPlacement='auto' maxMenuHeight={250} menuShouldScrollIntoView={true} onChange={changeDevice} />
+                <Select className='day-dropdown' options={days.map(x => { return { value: x, label: x }; })} menuPlacement='auto' maxMenuHeight={250} menuShouldScrollIntoView={true} onChange={changeTestDate} />
+                <Select className='test-dropdown' options={tests.map(x => { return { value: x, label: x }; })} menuPlacement='auto' maxMenuHeight={220} menuShouldScrollIntoView={true} onChange={changeTestDate} /> */}
+
                 <button className='clear-button' onClick={() => { setCurTest(null); setCurTestData(null); }}>Clear</button>
             </div>