Adjust Table component styles and markup to maintain fixed column widths, regardless of cell content. (#10400)

Backports PR #10378

**Commit 1:**
Adjust Table component styles and markup to maintain fixed column widths, regardless of cell content.
- Fix ellipsis-truncation of text in IE11 and Edge.
- Update Visualize landing table markup.

* Original sha: e423918163
* Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-15T19:45:49Z

**Commit 2:**
Update Dashboard landing table and Saved Objects table with cell liner markup.

* Original sha: 4e0f4310b7
* Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-15T19:55:33Z

src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.html

@@ -135,12 +135,14 @@
         class="kuiTableRow"
       >
         <td class="kuiTableRowCell kuiTableRowCell--checkBox">
-          <input
-            type="checkbox"
-            class="kuiCheckBox"
-            ng-click="listingController.toggleItem(item)"
-            ng-checked="listingController.isItemChecked(item)"
-          >
+          <div class="kuiTableRowCell__liner">
+            <input
+              type="checkbox"
+              class="kuiCheckBox"
+              ng-click="listingController.toggleItem(item)"
+              ng-checked="listingController.isItemChecked(item)"
+            >
+          </div>
         </td>
 
         <td class="kuiTableRowCell">

src/core_plugins/kibana/public/management/sections/objects/_objects.html

@@ -139,12 +139,14 @@
             class="kuiTableRow"
           >
             <td class="kuiTableRowCell kuiTableRowCell--checkBox">
-              <input
-                type="checkbox"
-                class="kuiCheckBox"
-                ng-click="toggleItem(item)"
-                ng-checked="selectedItems.indexOf(item) >= 0"
-              >
+              <div class="kuiTableRowCell__liner">
+                <input
+                  type="checkbox"
+                  class="kuiCheckBox"
+                  ng-click="toggleItem(item)"
+                  ng-checked="selectedItems.indexOf(item) >= 0"
+                >
+              </div>
             </td>
             <td class="kuiTableRowCell">
               <div class="kuiTableRowCell__liner">

src/core_plugins/kibana/public/visualize/listing/visualize_listing.html

@@ -117,7 +117,10 @@
             >
           </th>
 
-          <th class="kuiTableHeaderCell" ng-click="listingController.sortOn('title')">
+          <th
+            class="kuiTableHeaderCell"
+            ng-click="listingController.sortOn('title')"
+          >
             Name
             <span
               class="kuiIcon"
@@ -126,7 +129,10 @@
             ></span>
           </th>
 
-          <th class="kuiTableHeaderCell" ng-click="listingController.sortOn('type')">
+          <th
+            class="kuiTableHeaderCell"
+            ng-click="listingController.sortOn('type')"
+          >
             Type
             <span
               class="kuiIcon"
@@ -143,12 +149,14 @@
           class="kuiTableRow"
         >
           <td class="kuiTableRowCell kuiTableRowCell--checkBox">
-            <input
-              type="checkbox"
-              class="kuiCheckBox"
-              ng-click="listingController.toggleItem(item)"
-              ng-checked="listingController.isItemChecked(item)"
-            >
+            <div class="kuiTableRowCell__liner">
+              <input
+                type="checkbox"
+                class="kuiCheckBox"
+                ng-click="listingController.toggleItem(item)"
+                ng-checked="listingController.isItemChecked(item)"
+              >
+            </div>
           </td>
 
           <td class="kuiTableRowCell">

ui_framework/components/table/_table.scss

@@ -1,15 +1,23 @@
+$tableCellPadding: 7px 8px 8px;
+
+/**
+ * 1. Prevent cells from expanding based on content size. This substitutes for table-layout: fixed.
+ */
 @mixin tableCell {
   font-size: $fontSize;
   font-weight: 400;
-  line-height: $lineHeight;
-  padding: 7px 8px 8px;
   text-align: left;
+  max-width: 20px; /* 1 */
 
   &:last-child {
     padding-right: 16px;
   }
 }
 
+/**
+ * NOTE: table-layout: fixed causes a bug in IE11 and Edge (see #9929). It also prevents us from
+ * specifying a column width, e.g. the checkbox column.
+ */
 .kuiTable {
   width: 100%;
   border: $tableBorder;
@@ -19,6 +27,8 @@
 
 .kuiTableHeaderCell {
   @include tableCell;
+  padding: $tableCellPadding;
+  line-height: $lineHeight;
   color: #a7a7a7;
 }
 
@@ -64,11 +74,15 @@
 
   /**
    * 1. Vertically align all children.
+   * 2. Truncate text with an ellipsis. The padding on this div allows the ellipsis to show. If
+   *    the padding was on the cell, the ellipsis would be cropped.
    */
   .kuiTableRowCell__liner {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    white-space: nowrap; /* 2 */
+    overflow: hidden; /* 2 */
+    text-overflow: ellipsis; /* 2 */
+    padding: $tableCellPadding; /* 2 */
+    line-height: $lineHeight; /* 1 */
 
     & > * {
       vertical-align: middle; /* 1 */
@@ -86,10 +100,15 @@
 /**
  * 1. Rendered width of cell with checkbox inside of it.
  * 2. Align checkbox with text in other cells.
+ * 3. Show the checkbox in Edge; otherwise it gets cropped.
  */
 .kuiTableHeaderCell--checkBox,
 .kuiTableRowCell--checkBox {
   width: 28px; /* 1 */
   padding-right: 0;
-  line-height: 1;
+  line-height: 1; /* 2 */
+
+  .kuiTableRowCell__liner {
+    overflow: visible; /* 3 */
+  }
 }

ui_framework/dist/ui_framework.css

@@ -1362,6 +1362,13 @@ body {
   border-top: none;
   /* 2 */ }
 
+/**
+ * 1. Prevent cells from expanding based on content size. This substitutes for table-layout: fixed.
+ */
+/**
+ * NOTE: table-layout: fixed causes a bug in IE11 and Edge (see #9929). It also prevents us from
+ * specifying a column width, e.g. the checkbox column.
+ */
 .kuiTable {
   width: 100%;
   border: 2px solid #E4E4E4;
@@ -1371,9 +1378,11 @@ body {
 .kuiTableHeaderCell {
   font-size: 14px;
   font-weight: 400;
-  line-height: 1.5;
-  padding: 7px 8px 8px;
   text-align: left;
+  max-width: 20px;
+  /* 1 */
+  padding: 7px 8px 8px;
+  line-height: 1.5;
   color: #a7a7a7; }
   .kuiTableHeaderCell:last-child {
     padding-right: 16px; }
@@ -1406,9 +1415,9 @@ body {
 .kuiTableRowCell {
   font-size: 14px;
   font-weight: 400;
-  line-height: 1.5;
-  padding: 7px 8px 8px;
   text-align: left;
+  max-width: 20px;
+  /* 1 */
   color: #191E23;
   border-top: 1px solid #E4E4E4; }
   .kuiTableRowCell:last-child {
@@ -1416,11 +1425,20 @@ body {
 
 /**
    * 1. Vertically align all children.
+   * 2. Truncate text with an ellipsis. The padding on this div allows the ellipsis to show. If
+   *    the padding was on the cell, the ellipsis would be cropped.
    */
 .kuiTableRowCell__liner {
   white-space: nowrap;
+  /* 2 */
   overflow: hidden;
-  text-overflow: ellipsis; }
+  /* 2 */
+  text-overflow: ellipsis;
+  /* 2 */
+  padding: 7px 8px 8px;
+  /* 2 */
+  line-height: 1.5;
+  /* 1 */ }
   .kuiTableRowCell__liner > * {
     vertical-align: middle;
     /* 1 */ }
@@ -1433,13 +1451,19 @@ body {
 /**
  * 1. Rendered width of cell with checkbox inside of it.
  * 2. Align checkbox with text in other cells.
+ * 3. Show the checkbox in Edge; otherwise it gets cropped.
  */
 .kuiTableHeaderCell--checkBox,
 .kuiTableRowCell--checkBox {
   width: 28px;
   /* 1 */
   padding-right: 0;
-  line-height: 1; }
+  line-height: 1;
+  /* 2 */ }
+  .kuiTableHeaderCell--checkBox .kuiTableRowCell__liner,
+  .kuiTableRowCell--checkBox .kuiTableRowCell__liner {
+    overflow: visible;
+    /* 3 */ }
 
 .kuiTabs {
   display: -webkit-box;

ui_framework/doc_site/src/views/table/table.html

@@ -88,7 +88,7 @@
       </td>
       <td class="kuiTableRowCell">
         <div class="kuiTableRowCell__liner">
-          <a class="kuiLink" href="#">Celebration</a>
+          <a class="kuiLink" href="#">Celebration of some very long content that will affect cell width and should eventually become truncated</a>
         </div>
       </td>
       <td class="kuiTableRowCell">