[F] Dynamically update width with js

src/pages/course-selection/course-selection.vue

@@ -21,8 +21,8 @@
 
             <!-- Course list -->
             <el-col :span="8" class="overall-span">
-                <el-card id="course-list" class="large right">
-                    <div class="header">
+                <el-card id="course-list" ref="cl" class="large right">
+                    <div class="header" :style="{width: courseListWidth + 'px'}">
                         <div class="text">Course List</div>
 
                         <!-- Search -->
@@ -54,6 +54,8 @@
         directory: any[] = []
         loading = true
 
+        courseListWidth: number = 10;
+
         created()
         {
             // Get courses
@@ -73,6 +75,12 @@
             })
         }
 
+        updated()
+        {
+            console.log(this.$refs);
+            this.courseListWidth = (<Vue> this.$refs.cl).$el.clientWidth - 20;
+        }
+
         get filteredCourses()
         {
             return this.courseInfo.filter(c => c.name.toLowerCase().includes(this.search))
@@ -110,6 +118,7 @@
         {
             position: fixed;
             background: white;
+
             .text
             {
                 margin-top: 15px;