You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@freemarker.apache.org by dd...@apache.org on 2020/08/01 23:02:14 UTC

[freemarker-docgen] 01/02: Fixed Docbook table width issue on mobile

This is an automated email from the ASF dual-hosted git repository.

ddekany pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/freemarker-docgen.git

commit 56bad79aeaa3bd409d8e212b43b765b702c92aef
Author: ddekany <dd...@apache.org>
AuthorDate: Sat Aug 1 23:33:44 2020 +0200

    Fixed Docbook table width issue on mobile
---
 .../docgen/core/less/lib/components/table.less         | 18 +++++-------------
 1 file changed, 5 insertions(+), 13 deletions(-)

diff --git a/freemarker-docgen-core/src/main/resources-gulp/org/freemarker/docgen/core/less/lib/components/table.less b/freemarker-docgen-core/src/main/resources-gulp/org/freemarker/docgen/core/less/lib/components/table.less
index b15ff24..aa25554 100644
--- a/freemarker-docgen-core/src/main/resources-gulp/org/freemarker/docgen/core/less/lib/components/table.less
+++ b/freemarker-docgen-core/src/main/resources-gulp/org/freemarker/docgen/core/less/lib/components/table.less
@@ -18,10 +18,13 @@
  */
 .table-responsive {
   min-height: .01%;
+
+  /* To prevent the the table stretching the width of its parent, and become scrollable instead: */
+  width: 0;
+  min-width: 100%;
   overflow-x: auto;
 
   @media (max-width: @screen-xs-max) {
-    width: 100%;
     margin-bottom: 15px;
     overflow-y: hidden;
     -ms-overflow-style: -ms-autohiding-scrollbar;
@@ -36,14 +39,12 @@
   border: 1px solid #ddd;
 
   width: 100%;
-  max-width: 100%;
 
   th {
     font-weight: 500;
     text-align: left;
     background-color: #f9f9f9;
     border-bottom: 1px solid #ddd;
-    white-space: nowrap;
   }
 
   th,
@@ -53,17 +54,8 @@
     vertical-align: top;
   }
 
-  td {
-    // dont wrap whitespace for smaller screens
-    // since tables are going to scroll anyway
-    white-space: nowrap;
-
-    @media (min-width: @screen-md-min) {
-      white-space: normal;
-    }
-  }
-
   a {
+    // We don't want to break mid-word, as a-only cells might become 1 char wide...
     word-break: normal;
   }
 }