Server-demo-v2: truncate resource value text if too long.

eclipse-leshan · May 19, 2021 · 64811b8 · 64811b8
1 parent 73337b7
commit 64811b8
Showing 1 changed file with 9 additions and 4 deletions.
diff --git a/leshan-server-demo/webapp2/src/components/InstanceView.vue b/leshan-server-demo/webapp2/src/components/InstanceView.vue
@@ -20,7 +20,10 @@
     >
       <v-expansion-panel v-for="resource in resources" :key="resource.path">
         <v-expansion-panel-header style="min-height:32px" class="pa-3">
-          <v-container class="pa-0">
+          <!-- min-width is needed for avoid shift about truncated text 
+          see : https://stackoverflow.com/a/36247448/5088764
+          -->
+          <v-container class="pa-0" style="min-width:0">
             <v-row>
               <v-col cols="7" md="3" align-self="center" class="pa-2"
                 >{{ resource.def.name }}
@@ -42,16 +45,18 @@
               </v-col>
               <v-col
                 cols="6"
-                md="2"
+                md="5"
                 align-self="center"
-                class="pa-0 "
+                class="pa-0"
                 :class="{
                   'text--disabled': values[resource.path]
                     ? values[resource.path].supposed
                     : false,
                 }"
               >
-                {{ values[resource.path] ? values[resource.path].val : null }}
+                <div class="pr-3 text-truncate">
+                  {{ values[resource.path] ? values[resource.path].val : null }}
+                </div>
               </v-col>
             </v-row>
           </v-container>