Webform confirmation modal has a minWidth: 600px; in /js/webform.confirmation.modal.js which will case a horizental scroll on small screens.
I can solve this issue for me in CSS but it's better if we can solve it in the module.

CommentFileSizeAuthor
#14 AwesomeScreenshot-localhost-wf-admin-modules-2019-08-06_4_30.png597.89 KBjrockowitz
#10 3010798-10.patch549 bytesjrockowitz
#9 responsive_confirmation_modal-3010798-9.patch365 bytesanas_maw
#6 3010798-6.patch362 bytesjrockowitz

Comments

Anas_maw created an issue. See original summary.

jrockowitz’s picture

jrockowitz commented

Using the Bartik theme the confirmation modal is responsive.

What base theme are you using?

Does changing minWidth to maxWidth help?

anas_maw’s picture

anas_maw commented

I'm using bootstrap theme, I fixed this by adding a CSS to my custom theme with media query for small screens.

jrockowitz’s picture

jrockowitz commented

I am not able to get the confirmation modal to even appear with the Bootstrap theme.

anas_maw’s picture

anas_maw commented

I just checked this and I figured out that bootstrap theme missing - core/jquery.ui.dialog in their libraries. I added this library to my custom theme and I got this working fine. Maybe because they use bootstrap modal instead of jQuery UI one.
Maybe we should open a separate ticket in the bootstrap project issue queue about this first.

jrockowitz’s picture

jrockowitz commented
StatusFileSize
new 3010798-6.patch362 bytes

The attached patch allows the jquery ui dialog to be used.

I am not sure if this a Bootstrap or Webform specific issue. Someone with more experience with Bootstrap would need to step in a help resolve this issue.

  • jrockowitz committed 715e4b9 on 8.x-5.x 
    Issue #3010798 by jrockowitz: Responsive confirmation modal
jrockowitz’s picture

jrockowitz commented
Status: Active » Needs work

I committed the patch to fix the immediate issue of no dialog being displayed.

anas_maw’s picture

anas_maw commented
Status: Needs work » Needs review
StatusFileSize
new responsive_confirmation_modal-3010798-9.patch365 bytes

Great, now what about to fix responsive issue by adding these CSS lines.

jrockowitz’s picture

jrockowitz commented
Status: Needs review » Fixed
StatusFileSize
new 3010798-10.patch549 bytes

Attached patch moves this solution into the webform_bootstrap.module.

  • jrockowitz committed 24032b5 on 8.x-5.x 
    Issue #3010798 by jrockowitz, Anas_maw: Responsive confirmation modal

Status: Fixed » Closed (fixed)

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

squibb’s picture

squibb commented

Pardon my ignorance, where is this webform_bootstrap module?

jrockowitz’s picture

jrockowitz commented
StatusFileSize
new AwesomeScreenshot-localhost-wf-admin-modules-2019-08-06_4_30.png597.89 KB

@squibb The Webform Boostrap module is a sub-module included with the Webform module.

squibb’s picture

squibb commented

@jrockowitz I was almost sure I was doing something stupid. Thanks for your quick reply.