Hello,

If i enable the seven theme, and if i add form elements of button type, i see the options with a button design.
But, if I choose the bootstrap theme for my site, options elements are converted to radio buttons. The html output seems to be modified, i don't see any .btn-group class on the parent wrapper and no .btn class on each option.

How can I get the bootstrap style for my options?

Thanks !

CommentFileSizeAuthor
#10 styles_of_buttons_is-2908642-10.patch762 bytesjrockowitz
#5 drupal-webform-options-button-seven-theme.jpg96.12 KBkumkum29
#4 drupal-webform-options-button-bootstrap-theme.jpg96.24 KBkumkum29
#4 drupal-webform-options-button-seven-theme.jpg263.68 KBkumkum29
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

kumkum29 created an issue. See original summary.

kumkum29’s picture

kumkum29 CreditAttribution: kumkum29 commented
Issue summary: View changes
jrockowitz’s picture

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

Bootstrap support is an ongoing process. Make sure to enable the webform_bootstrap.module which is starting to address certain compatibility issues.

Please post some screenshots and code snippets that help better define this issue.

kumkum29’s picture

kumkum29 CreditAttribution: kumkum29 commented
FileSize
drupal-webform-options-button-seven-theme.jpg263.68 KB
drupal-webform-options-button-bootstrap-theme.jpg96.24 KB

Hello jrockowitz,

The submodule webform_bootstrap is enabled. But, I see no changes.

I post 2 screenshots : 1 view of the webform with the Seven theme, and 1 view with the Bootstrap theme.
We can see that options elements haven't the same "design".

I have verified the code source, and the output html is different:

BOOTSTRAP

<div id="edit-color" class="webform-options-display-side-by-side js-webform-radios">
	<div class="form-item js-form-item form-type-radio js-form-type-radio form-item-color js-form-item-color radio">
		<label for="edit-color-black" class="control-label option">
			<input data-drupal-selector="edit-color-black" class="form-radio" id="edit-color-black" name="color" value="black" type="radio">Black
		</label>

	</div>
...



SEVEN

<div id="edit-color" class="webform-options-display-side-by-side js-webform-radios form-radios ui-buttonset">
	<input data-drupal-selector="edit-color-black" id="edit-color-black" name="color" value="black" class="ui-helper-hidden-accessible" type="radio">
	<label for="edit-color-black" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left" role="button">
		<span class="ui-button-text">Black</span>
	</label>
...

With the bootstrap theme we get a parent wrapper with .form-item class. This parent wrapper don't exists with the seven theme. The generated html code for this webform element haven't the same structure...

Should I create a custom module or use a hook to alter the html of this element ?

Thanks for your help.

kumkum29’s picture

kumkum29 CreditAttribution: kumkum29 commented
FileSize
drupal-webform-options-button-seven-theme.jpg96.12 KB
jrockowitz’s picture

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

Yes, the 'Buttons' element is clearly not working when I enable the Bootstrap theme and Webform Bootstrap module.

The main problem is the Webform module is using jQueryUI to create the Buttons widget.

There are two options...

Update js/webform.element.buttons.js to properly handle Bootstrap's markup and continue use jQueryUI styled buttons.

- or -

Override js/webform.element.buttons.js and use Bootstrap to generate Bootstrap styles buttons. @see https://getbootstrap.com/docs/3.3/javascript/#buttons-checkbox-radio

Ideally, any Webform library (JS/CSS) that has a Bootstrap equivalent should be overridden and use Bootstrap's CSS and JS.

@kumkum29 I would be great if you can contribute your solution as a patch and/or a recipe.

kumkum29’s picture

kumkum29 CreditAttribution: kumkum29 commented

@jrockowitz

I analyze these 2 methods and try to find a solution to solve this problem...

kumkum29’s picture

kumkum29 CreditAttribution: kumkum29 commented

@jrockowitz

With a rapid modification in the js/webform.element.buttons.js file, I get options with a "button" style (and with the bootstrap theme):

//$(context).find('.js-webform-buttons .form-radios, .js-webform-buttons.form-radios').once('webform-buttons').each(function () {
$(context).find('.webform-options-display-side-by-side').each(function () {

We must optimize this hack for all the possibilities.

jrockowitz’s picture

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

I am fine with just fixing the JS.

Can you please create a patch can be reviewed?

jrockowitz’s picture

jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commented
Status: Active » Needs review
FileSize
styles_of_buttons_is-2908642-10.patch762 bytes

Attached patch adds a Bootstrap specific selector.

  • jrockowitz committed 4324361 on 8.x-5.x 
    Issue #2908642 by jrockowitz, kumkum29: Styles of buttons is lost with...
jrockowitz’s picture

jrockowitz CreditAttribution: jrockowitz as a volunteer and at The Big Blue House commented
Status: Needs review » Fixed

I committed the patch. Please download the latest dev release to review.

kumkum29’s picture

kumkum29 CreditAttribution: kumkum29 commented

Hello jrockowitz,

thanks for this patch (sorry but I did not have time to make the patch).
For options, I get the style "button" with the bootstrap theme.

Thanks !

Status: Fixed » Closed (fixed)

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