Problem/Motivation

Wrapper CSS classes not visible when "custom" selected.

Steps to reproduce issue.

  1. Go to admin/structure/webform/manage/contact
  2. Edit your name element.
  3. Open "WRAPPER ATTRIBUTES" and select "custom" in "Wrapper CSS classes"
  4. Add custom class in new field
  5. Save field and again edit, css class field is not visible

issue

Proposed resolution

Add fixed width to css class field using css
solution

Remaining tasks

NA

User interface changes

NA

CommentFileSizeAuthor
#8 fix_width-2902045-8.patch528 bytesVj
#7 wrapper_css_classes-2902045-7.patch628 bytesjrockowitz
#6 Screen Shot 2017-08-14 at 10.00.00 PM.png44.91 KBVj
#5 wrapper_css_classes-2902045-5.patch917 bytesjrockowitz
#5 webform.webform.issue_2902045.yml2.72 KBjrockowitz
#3 fix_css-2902045-4.patch435 bytesVj
solution.PNG23.73 KBVj
issue.PNG32.23 KBVj
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Vj created an issue. See original summary.

Vj’s picture

Vj CreditAttribution: Vj as a volunteer commented
Vj’s picture

Vj CreditAttribution: Vj as a volunteer commented
FileSize
fix_css-2902045-4.patch435 bytes

Added css to fix this issue. Please review

Vj’s picture

Vj CreditAttribution: Vj as a volunteer commented
Status: Active » Needs review
jrockowitz’s picture

jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commented
FileSize
webform.webform.issue_2902045.yml2.72 KB
wrapper_css_classes-2902045-5.patch917 bytes

@Vj we need to avoid using the !important property whenever possible.

This issue is not just impacting the webform UI. Attached is a webform that replicates the issue.

The exact issue is the 'other' element is within an initially closed 'details' element.

The solution is to quickly open and then close the parent 'details' element while showing the 'other' element.

Vj’s picture

Vj CreditAttribution: Vj as a volunteer commented
Assigned: Vj » Unassigned
Status: Needs review » Needs work
FileSize
Screen Shot 2017-08-14 at 10.00.00 PM.png44.91 KB

@jrockowitz

I agree we should not use !important property. I tried using JS but it was not working. I just applied your patch. but still its doing same on first load and click on edit. If i close the popup and again click on edit then it works correctly.
error

Let me know if i can help

jrockowitz’s picture

jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commented
Status: Needs work » Needs review
FileSize
wrapper_css_classes-2902045-7.patch628 bytes

Mmmm... This looks like a JS issue because the 'other' element's width is being set to 0px because the parent element is hidden.

Attached patch tries to account for this issue.

Vj’s picture

Vj CreditAttribution: Vj as a volunteer commented
FileSize
fix_width-2902045-8.patch528 bytes

@jrockowitz

applied patch #7 but its still not working as expected.

+++ b/js/webform.element.other.js
@@ -24,7 +24,13 @@
+      var width = $element.parent().width();

width is 0 on first load, so $element width is still 0 too.

I tried to set width 100% using javascript so we dont have to use important property. Please review and let me know if we can go with this method.

jrockowitz’s picture

jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commented

Patch #7 only applies the width if it is not 0.

      var width = $element.parent().width();
      if (width) {
        $element.width(width);
      }

With patch #7, I am having no issue with the other text field's width.

Can you make sure to clear your browser's cache when testing the patch.

Vj’s picture

Vj CreditAttribution: Vj as a volunteer commented
Status: Needs review » Reviewed & tested by the community

@jrockowitz

applied patch #7 and cache clear did the trick. Confirmed patch works. Thank you

  • Vj authored 60d425b on 8.x-5.x 
    Issue #2902045 by Vj, jrockowitz: Wrapper CSS classes field not visible
jrockowitz’s picture

jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commented
Status: Reviewed & tested by the community » Fixed

Status: Fixed » Closed (fixed)

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