chore: decrease some grid column widths to avoid scrollbar (#1111)

Author: ghiscoding

examples/example-column-group.html

@@ -98,7 +98,7 @@ <h2>View Source:</h2>
   };
   let columns = [
     {id: "sel", name: "#", field: "num", behavior: "select", cssClass: "cell-selection", width: 40, resizable: false, selectable: false },
-    {id: "title", name: "Title", field: "title", width: 120, minWidth: 120, cssClass: "cell-title", columnGroup: "Common Factor"},
+    {id: "title", name: "Title", field: "title", width: 110, minWidth: 110, cssClass: "cell-title", columnGroup: "Common Factor"},
     {id: "duration", name: "Duration", field: "duration", columnGroup: "Common Factor"},
     {id: "start", name: "Start", field: "start", minWidth: 60, columnGroup: "Period"},
     {id: "finish", name: "Finish", field: "finish", minWidth: 60, columnGroup: "Period"},

examples/example-composite-editor-item-details.html

@@ -128,9 +128,9 @@ <h2>View Source:</h2>
   var grid;
   var data = [];
   var columns = [
-    {id: "title", name: "Title", field: "title", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text, validator: requiredFieldValidator},
-    {id: "desc", name: "Description", field: "description", width: 100, editor: Slick.Editors.Text},
-    {id: "duration", name: "Duration", field: "duration", editor: Slick.Editors.Text},
+    {id: "title", name: "Title", field: "title", width: 70, cssClass: "cell-title", editor: Slick.Editors.Text, validator: requiredFieldValidator},
+    {id: "desc", name: "Description", field: "description", width: 95, editor: Slick.Editors.Text},
+    {id: "duration", name: "Duration", field: "duration", width: 70, editor: Slick.Editors.Text},
     {id: "percent", name: "% Complete", field: "percentComplete", width: 95, resizable: false, formatter: Slick.Formatters.PercentCompleteBar, editor: Slick.Editors.PercentComplete},
     {id: "start", name: "Start", field: "start", minWidth: 60, editor: Slick.Editors.Flatpickr},
     {id: "finish", name: "Finish", field: "finish", minWidth: 60, editor: Slick.Editors.Flatpickr},

examples/example-grouping-groupcolumn.html

@@ -127,7 +127,7 @@ <h2>View Source:</h2>
   {id: "title", name: "Title", field: "title", width: 120, minWidth: 50, cssClass: "cell-title", sortable: true, editor: Slick.Editors.Text},
   {id: "sel", name: "#", field: "num", cssClass: "cell-selection", width: 40, selectable: false },
   {id: "duration", name: "Duration", field: "duration", width: 70, sortable: true, groupTotalsFormatter: sumTotalsFormatter},
-  {id: "%", name: "% Complete", field: "percentComplete", width: 95, formatter: Slick.Formatters.PercentCompleteBar, sortable: true, groupTotalsFormatter: avgTotalsFormatter},
+  {id: "%", name: "% Complete", field: "percentComplete", width: 110, formatter: Slick.Formatters.PercentCompleteBar, sortable: true, groupTotalsFormatter: avgTotalsFormatter},
   {id: "start", name: "Start", field: "start", minWidth: 60, sortable: true},
   {id: "finish", name: "Finish", field: "finish", minWidth: 60, sortable: true},
   {id: "cost", name: "Cost", field: "cost", width: 90, sortable: true, groupTotalsFormatter: sumTotalsFormatter},

examples/example-optimizing-dataview.html

@@ -87,7 +87,7 @@ <h2>View Source:</h2>
   var data = [];
   var columns = [
     {id: "sel", name: "#", field: "num", behavior: "select", cssClass: "cell-selection", width: 40, resizable: false, selectable: false },
-    {id: "title", name: "Title", field: "title", width: 120, cssClass: "cell-title"},
+    {id: "title", name: "Title", field: "title", width: 110, cssClass: "cell-title"},
     {id: "duration", name: "Duration", field: "duration"},
     {id: "%", name: "% Complete", field: "percentComplete", width: 95, resizable: false, formatter: Slick.Formatters.PercentCompleteBar},
     {id: "start", name: "Start", field: "start", minWidth: 60},

examples/example-optimizing-updates.html

@@ -87,7 +87,7 @@ <h2>View Source:</h2>
     {id: "sel", name: "#", field: "num", behavior: "select", cssClass: "cell-selection", width: 40, resizable: false, selectable: false },
     {id: "severity", name: "Severity", field: "severity", width: 120, minWidth: 120, cssClass: "cell-severity"},
     {id: "time", name: "Time", field: "time", width: 135, minWidth: 135, cssClass: "cell-time"},
-    {id: "message", name: "Message", field: "message", minWidth: 300, cssClass: "cell-message"},
+    {id: "message", name: "Message", field: "message", minWidth: 280, cssClass: "cell-message"},
   ];
 
   var options = {

examples/example-plugin-custom-tooltip.html

@@ -234,7 +234,7 @@ <h2>View Source:</h2>
         },
       },
       {
-        id: "desc2", name: '<span title="custom title tooltip text">Description 2</span>', field: "description", width: 100, editor: Slick.Editors.LongText,
+        id: "desc2", name: '<span title="custom title tooltip text">Description 2</span>', field: "description", width: 110, editor: Slick.Editors.LongText,
         formatter: (row, cell, value, column, dataContext) => `<span title="regular tooltip (from title attribute)\r${dataContext.title} cell value:\r${value || ''}">${value || ''}</span>`,
         // define tooltip options here OR for the entire grid via the grid options (cell tooltip options will have precedence over grid options)
         customTooltip: {

examples/example-totals-via-data-provider.html

@@ -22,8 +22,8 @@
 <body>
 <h2 class="title">Example - Total Data Provider</h2>
 <div style="position:relative">
-  <div style="width:600px;">
-    <div id="myGrid" class="slick-container" style="width:100%;height:400px;"></div>
+  <div style="width:610px;">
+    <div id="myGrid" class="slick-container" style="width:100%;height:340px;"></div>
   </div>
 
   <div class="options-panel">

examples/example-web-component-pubsub-esm.html

@@ -197,7 +197,7 @@ <h2>View Source:</h2>
   {id: "%", defaultSortAsc: false, name: "% Complete", field: "percentComplete", width: 95, formatter: Formatters.PercentCompleteBar, editor: Editors.PercentComplete, sortable: true},
   {id: "start", name: "Start", field: "start", minWidth: 60, editor: Editors.Flatpickr, sortable: true},
   {id: "finish", name: "Finish", field: "finish", minWidth: 60, editor: Editors.Flatpickr, sortable: true},
-  {id: "effort-driven", name: "Effort Driven", width: 120, minWidth: 20, cssClass: "cell-effort-driven", field: "effortDriven", formatter: Formatters.Checkbox, editor: Editors.Checkbox, cannotTriggerInsert: true, sortable: true}
+  {id: "effort-driven", name: "Effort Driven", width: 115, minWidth: 20, cssClass: "cell-effort-driven", field: "effortDriven", formatter: Formatters.Checkbox, editor: Editors.Checkbox, cannotTriggerInsert: true, sortable: true}
 ];
 
 let options = {

examples/example16-row-detail.html

@@ -175,7 +175,7 @@ <h2>View Source:</h2>
 
     var columns = [
       {id: "sel", name: "#", field: "num", behavior: "select", cssClass: "cell-selection", width: 40, resizable: false, selectable: false },
-      {id: "title", name: "Title", field: "title", width: 110, minWidth: 110, cssClass: "cell-title", sortable: true},
+      {id: "title", name: "Title", field: "title", width: 85, minWidth: 85, cssClass: "cell-title", sortable: true},
       {id: "duration", name: "Duration", field: "duration", sortable: true},
       {id: "%", name: "% Complete", field: "percentComplete", width: 95, resizable: false, formatter: Slick.Formatters.PercentCompleteBar, sortable: true},
       {id: "start", name: "Start", field: "start", minWidth: 60},

examples/example3-editing.html

@@ -87,8 +87,8 @@ <h2>View Source:</h2>
   var columns = [
     {id: "title", name: "Title", field: "title", width: 80, cssClass: "cell-title", editor: Slick.Editors.Text, validator: requiredFieldValidator},
     {id: "desc", name: "Description", field: "description", width: 95, editor: Slick.Editors.LongText},
-    {id: "duration", name: "Duration", field: "duration", editor: Slick.Editors.Text},
-    {id: "%", name: "% Complete", field: "percentComplete", width: 95, resizable: false, formatter: Slick.Formatters.PercentCompleteBar, editor: Slick.Editors.PercentComplete},
+    {id: "duration", name: "Duration", field: "duration", width: 70, editor: Slick.Editors.Text},
+    {id: "%", name: "% Complete", field: "percentComplete", width: 85, resizable: false, formatter: Slick.Formatters.PercentCompleteBar, editor: Slick.Editors.PercentComplete},
     {id: "start", name: "Start", field: "start", minWidth: 60, editor: Slick.Editors.Flatpickr},
     {id: "finish", name: "Finish", field: "finish", minWidth: 60, editor: Slick.Editors.Flatpickr},
     {id: "effort-driven", name: "Effort Driven", width: 90, minWidth: 20, maxWidth: 90, cssClass: "cell-effort-driven", field: "effortDriven", formatter: Slick.Formatters.Checkmark, editor: Slick.Editors.Checkbox}