รายการข้าราชการ ฯ ที่ได้รับทุนการศึกษา/ฝึกอบรม => ปรับ select

src/modules/15_development/views/Scholarship.vue

@@ -269,7 +269,7 @@ onMounted(() => {
           option-label="name"
           label="เลือกประเภททุน"
           @update:model-value="fetchNewList"
-          class="type"
+          class="select_ellipsis"
         />
       </div>
 
@@ -389,11 +389,4 @@ onMounted(() => {
   </q-card>
 </template>
 
-<style scoped>
-.q-select.type >>> .q-field__native > span {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  width: 200px;
-}
-</style>
+<style scoped></style>

src/style/quasar-variables.sass

@@ -150,16 +150,16 @@ $muti-tab: #87d4cc
     color: #f00 !important
 
 /* registry common style */
-.toggle-borderd 
-  border: 1px solid #ecebeb
+.toggle-borderd
+    border: 1px solid #ecebeb
 
-h3.resigtry-tab-title 
-  font-size: 1.2rem
-  font-weight: 600
-  margin: 0 0
-  padding: 0 0
+h3.resigtry-tab-title
+    font-size: 1.2rem
+    font-weight: 600
+    margin: 0 0
+    padding: 0 0
 
-.q-dialog .q-layout__section--marginal 
+.q-dialog .q-layout__section--marginal
     background-color: #fff
     color: #000
 
@@ -167,4 +167,10 @@ h3.resigtry-tab-title
     overflow: hidden
 
 .q-card__actions
-    padding: 4px
+    padding: 4px
+
+.select_ellipsis .q-field__native > span
+    white-space: nowrap
+    overflow: hidden
+    text-overflow: ellipsis
+    width: 200px