Problem/Motivation

Elements of the type webform-buttons are not rendered as buttons, but as radio-boxes. I am observing this in the Elements Example Page found at /form/example-elements.

Proposed resolution

I found the javascript at /modules/webform/js/webform.element.buttons.js would not replace these elements.
The selector ($(context).find('fieldset.js-webform-buttons div.fieldset-wrapper').once('webform-buttons').each(…)) used for finding the buttons resulted in an empty set.
When I change the selector to $(context).find('.js-webform-buttons,.js-webform-buttons-other').once('webform-buttons').each(…) the buttons will render as expected.

Remaining tasks

Please compare the used selectors. Are they a wise choice? Is it the right place to fix this issue, or does it maybe need the div.fieldset-wrapper from the former selector code?

CommentFileSizeAuthor
#11 button_elements-2849799-11.patch2.53 KBjrockowitz
#8 button_elements-2849799-7.patch0 bytesjrockowitz
#6 button_elements-2849799-6.patch659 bytesjrockowitz
#3 fix_broken_selector_2.patch2.26 KBpropercroc
fix_broken_selector.patch1.09 KBpropercroc

Comments

ProperCroc created an issue. See original summary.

propercroc’s picture

propercroc commented

When I try to style the elements, I miss:
- a label with the elements name
- a div.form-group around the element

In other words: 

  div.form-group
    label.control-label
    // html resulting from the js-replacement:
    div.webform-buttons
      label
        span
      input
      label
        span
      input 
      …
propercroc’s picture

propercroc commented
StatusFileSize
new fix_broken_selector_2.patch2.26 KB

I found a better selector that conserves the original title of the item.

I still think the structure from my last comment would be more helpful to style. But I'd gladly listen about the upside of having the given markup.

propercroc’s picture

propercroc commented

In the Example Elements Page, why does webform-buttons have a div.panel-heading div.panel-title while webform-buttons-other has label.control-label as markup for the elements label?

jrockowitz’s picture

jrockowitz commented 
  1. +++ b/modules/webform/js/webform.element.buttons.js
@@ -14,7 +14,7 @@
+      $(context).find('.js-webform-buttons,.js-webform-buttons-other').once('webform-buttons').each(function () {

    This makes perfect sense. 

  2. +++ b/modules/webform/js/webform.element.buttons.js
@@ -14,7 +14,7 @@
+      $(context).find('.js-webform-buttons > .panel-body, .js-webform-buttons-other > div').once('webform-buttons').each(function () {

    .panel-body is too specific of selector

jrockowitz’s picture

jrockowitz commented
Status: Active » Needs review
StatusFileSize
new button_elements-2849799-6.patch659 bytes

Maybe we only need to target .js-webform-buttons.

@ProperCroc you patch does not apply, try execute the diff from within the webform modules directory.

cd  /var/www/sites/d8_webform/modules/contrib/webform
git diff > button_elements-2849799-6.patch

Also, to get the patch tested you need to set this ticket's status to 'Needs review'

jrockowitz’s picture

jrockowitz commented

My previous patch delete the form element's label.

That was a lot trickier to fix.

I had to use a jQuery.fn.commonAncestor plugin.

Please review.

jrockowitz’s picture

jrockowitz commented
StatusFileSize
new button_elements-2849799-7.patch0 bytes

Status: Needs review » Needs work

The last submitted patch, 8: button_elements-2849799-7.patch, failed testing.

  • jrockowitz committed 2adcd8b on 2849799-buttons 
    Issue #2849799 by ProperCroc, jrockowitz: Button elements (webform-...
jrockowitz’s picture

jrockowitz commented
Status: Needs work » Needs review
StatusFileSize
new button_elements-2849799-11.patch2.53 KB

Duh! I uploaded an empty patch. I had to go back to my standard GitFlow, so there is now a branch available for this ticket.

  • jrockowitz committed 6264af9 on 8.x-5.x 
    Issue #2849799 by jrockowitz, ProperCroc: Button elements (webform-...
jrockowitz’s picture

jrockowitz commented
Status: Needs review » Fixed

Please review and test the latest dev release.

Status: Fixed » Closed (fixed)

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

gambry’s picture

gambry
Primary language Italian
Location Milan
commented

From #6:

Maybe we only need to target .js-webform-buttons.

Not including .js-webform-buttons-other, when using 'Buttons other' element type I get a javascript error due jQuery('body').find('.js-webform-buttons [type="radio"]').lenght being 0.

TypeError: parents[0] is undefined
jQuery.fn.commonAncestor() jquery.common_ancestor.js:27
Drupal.behaviors.webformButtons.attach() webform.element.buttons.js:17
Drupal.attachBehaviors() drupal.js:168
[..]

jrockowitz’s picture

jrockowitz commented

Please try the latest dev release. I removed the jquery.common_ancestor.js library and went back to just $(context).find('.js-webform-buttons .form-radios, .js-webform-buttons.form-radios')

gambry’s picture

gambry
Primary language Italian
Location Milan
commented

I will, thanks!

propercroc’s picture

propercroc commented

Just tried with webform-8.x-5.x-dev.tar.gz –
Works fine for me :) Thank you!