screenshot

Patch will be attached.

CommentFileSizeAuthor
#2 3102097-2.office_hours.Description-on-form-element-does-not-wrapping.patch348 bytessuper_romeo
screenshot.png58.78 KBsuper_romeo

Comments

super_romeo created an issue. See original summary.

super_romeo’s picture

super_romeo commented
StatusFileSize
new 3102097-2.office_hours.Description-on-form-element-does-not-wrapping.patch348 bytes

Patch works, but I think better is to add some wrapper div with class 'slots-wrapper':

.field--type-office-hours .slots-wrapper {
  white-space: nowrap;
}
super_romeo’s picture

super_romeo commented
Status: Active » Needs review
johnv’s picture

johnv
Primary language Dutch
commented
Parent issue: » #2949644: Make Office Hours Widget a responsive table

This is part of a bigger issue.

johnv’s picture

johnv
Primary language Dutch
commented
Title: Description on form element does not wrapping » Help text on Wiget does not do wrapping
johnv’s picture

johnv
Primary language Dutch
commented
Title: Help text on Wiget does not do wrapping » Help text on Widget does not do wrapping
johnv’s picture

johnv
Primary language Dutch
commented
Title: Help text on Widget does not do wrapping » Add responsive Help text on Widget

Both suggestions from #2 are not working.
Also using ".field--type-office-hours .details-wrapper" does not work.

I came up with the following patch:

  • johnv committed 7faec23 on 8.x-1.x 
    Issue #3102097 by super_romeo: Add responsive Help text on Widget
johnv’s picture

johnv
Primary language Dutch
commented
Version: 8.x-1.x-dev » 8.x-1.3
Status: Needs review » Fixed

Below the relevant part:
- A generic 'office-hours-link' class was added to the links, and made them nowrap;
- The complete Widger is back to 'white-space: normal' - not only the help text.

Now, the complete widget is responsive :-)

Just waiting for someone who does not like the hours/minutes being 'normal'...

diff --git a/css/office_hours.css b/css/office_hours.css
index 9706a13..4505d48 100644
--- a/css/office_hours.css
+++ b/css/office_hours.css
@@ -1,18 +1,22 @@
 @charset "UTF-8";
 
 /*
  * Widget settings
  */
 .field--type-office-hours {
-  white-space: nowrap;
+  white-space: normal;
 }
@@ -20,6 +24,10 @@
   /* vertical-align: text-top; */
   font-weight: bold;
 }
+/* Make each link unbreakable for responsive widget table. */
+.office-hours-link {
+  white-space: nowrap;
+}
 
 /*
  * Formatter settings - default formatter
@@ -57,19 +65,3 @@ tr.office-hours__item {
 .office-hours-status--closed {
   font-style: italic;
 }
diff --git a/src/Element/OfficeHoursSlot.php b/src/Element/OfficeHoursSlot.php
index 680e65e..4a671b3 100644
--- a/src/Element/OfficeHoursSlot.php
+++ b/src/Element/OfficeHoursSlot.php
@@ -99,7 +102,7 @@ class OfficeHoursSlot extends OfficeHoursList {
         // dummy-url, will be catch-ed by javascript.
         '#suffix' => $suffix,
         '#attributes' => [
-          'class' => ['office-hours-delete-link'],
+          'class' => ['office-hours-delete-link', 'office-hours-link'],
         ],
       ];
     }
@@ -116,7 +119,7 @@ class OfficeHoursSlot extends OfficeHoursList {
         // dummy-url, will be catch-ed by javascript.
         '#suffix' => $suffix,
         '#attributes' => [
-          'class' => ['office-hours-copy-link'],
+          'class' => ['office-hours-copy-link', 'office-hours-link'],
         ],
       ];
     }
@@ -132,7 +135,7 @@ class OfficeHoursSlot extends OfficeHoursList {
         // dummy-url, will be catch-ed by javascript.
         '#suffix' => $suffix,
         '#attributes' => [
-          'class' => ['office-hours-add-link'],
+          'class' => ['office-hours-add-link', 'office-hours-link'],
         ],
       ];
     }
johnv’s picture

johnv
Primary language Dutch
commented
Title: Add responsive Help text on Widget » Make Widget Help text responsive

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.