fix #2860: truncate .dl-horizontal terms and reset to stacked for <767px layouts

diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip
index 7f6f5dd76885458a796fdadb88c4c1a455a0de90..674503a73fe58ed9baa788b40cb3dc28ec43c3a8 100644 (file)
Binary files a/docs/assets/bootstrap.zip and b/docs/assets/bootstrap.zip differ

diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css
index a8457dc4558d63f34988228f9449386ad211df51..106fed157e8ed5c6b98e27b76ac0acda0c3f0291 100644 (file)
--- a/docs/assets/css/bootstrap-responsive.css
+++ b/docs/assets/css/bootstrap-responsive.css
@@ -139,6 +139,15 @@
   .container-fluid {
     padding: 0;
   }
+  .dl-horizontal dt {
+    float: none;
+    clear: none;
+    width: auto;
+    text-align: left;
+  }
+  .dl-horizontal dd {
+    margin-left: 0;
+  }
   .container {
     width: auto;
   }

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 02949da9f3c742f049429c1ee396a6aee99a3a66..201d917a8a53e60e0063102b42f5172764d51601 100644 (file)
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -458,6 +458,9 @@ dd {
   margin-left: 9px;
 }
 .dl-horizontal dt {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   float: left;
   clear: left;
   width: 120px;

diff --git a/docs/base-css.html b/docs/base-css.html
index 0a1ea0d9d5815a34c6402d867267e1bb3011f229..647b396c6e813193f7c36b28f91dbafd21ae9fe2 100644 (file)
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -371,7 +371,14 @@
         <dd>Donec id elit non mi porta gravida at eget metus.</dd>
         <dt>Malesuada porta</dt>
         <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
+        <dt>Felis euismod semper eget lacinia</dt>
+        <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
       </dl>
+      <hr>
+      <p>
+        <span class="label label-info">Heads up!</span>
+        Horizontal description lists will truncate terms that are too long to fit in the left column fix <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout.
+      </p>
     </div>
   </div><!-- /row -->
 </section>

diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 0b6e17e6949b91cfaaefe6ab150d7928b29eb46c..66bf7047429f5fb3375ca4f19b120c5ee059f1db 100644 (file)
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -294,7 +294,14 @@
         <dd>Donec id elit non mi porta gravida at eget metus.</dd>
         <dt>Malesuada porta</dt>
         <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
+        <dt>Felis euismod semper eget lacinia</dt>
+        <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
       </dl>
+      <hr>
+      <p>
+        <span class="label label-info">{{_i}}Heads up!{{/i}}</span>
+        {{_i}}Horizontal description lists will truncate terms that are too long to fit in the left column fix <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout.{{/i}}
+      </p>
     </div>
   </div><!-- /row -->
 </section>

diff --git a/less/responsive-767px-max.less b/less/responsive-767px-max.less
index ba34b29a6eca04a7ca588f5dcb8964b8497ccf68..b2202b5b77b5b866830fd3f46e90ab1ed04af13a 100644 (file)
--- a/less/responsive-767px-max.less
+++ b/less/responsive-767px-max.less
@@ -86,6 +86,21 @@
     padding: 0;
   }
 
+  // TYPOGRAPHY
+  // ----------
+  // Reset horizontal dl
+  .dl-horizontal {
+    dt {
+      float: none;
+      clear: none;
+      width: auto;
+      text-align: left;
+    }
+    dd {
+      margin-left: 0;
+    }
+  }
+
   // GRID & CONTAINERS
   // -----------------
   // Remove width from containers

diff --git a/less/type.less b/less/type.less
index 4e1407b851b5c56e5eebcc8a0e2339393334b28c..779e85960d57f74333add403b1345ae3dedcc483 100644 (file)
--- a/less/type.less
+++ b/less/type.less
@@ -135,6 +135,7 @@ dd {
 // Horizontal layout (like forms)
 .dl-horizontal {
   dt {
+    .text-overflow();
     float: left;
     clear: left;
     width: 120px;