When using this module on a device with a small screen the ctools darkened background remains on the page after the feedback form has been submitted.

CommentFileSizeAuthor
#4 Screen Shot 2017-01-24 at 1.32.07 AM.png116.43 KBmonstrfolk

Comments

monstrfolk created an issue. See original summary.

monstrfolk’s picture

monstrfolk commented
Title: Modal window background remains » Modal window background remains after submit
jelenakrmar’s picture

jelenakrmar commented

Hi!

Well...we did that on purpose, so the success message could look more prominent... It should disappear after user taps anywhere on the screen or fade out after a couple of seconds. Isn't that the case?

If it is and you do not like it, what do you think would be a better solution: to remove the overlay, to display message differently, ...?

If this does not work as we planned it (I explained above), can you share more details? Are you using bootstrap, which version, etc. ?

monstrfolk’s picture

monstrfolk commented
StatusFileSize
new Screen Shot 2017-01-24 at 1.32.07 AM.png116.43 KB

Thanks for replying. Does not disappear when clicking on it. Attached is an image of the markup on the page. Selected element is the problem one.

monstrfolk’s picture

monstrfolk commented

@jelenakrmar...can you reproduce this bug?

jelenakrmar’s picture

jelenakrmar commented

No, I'm sorry but not yet... But we plan to try some more, probably next week...

monstrfolk’s picture

monstrfolk commented

OK. I will also take a look at it. Need to use this module for a project. IMO, the JavaScript looks too complicated at first glance. I think it can be reduced in complexity.

jelenakrmar’s picture

jelenakrmar commented

Cool.

About JS, well, that was the best we could come up with at that moment...
But we are always looking forward to improving the code. So, that's great, we appreciate any suggestion :)

Hm... do you maybe think this issue: (https://www.drupal.org/node/2833399) has also something to do with this modal window background problem? Because, I cannot reproduce it and I am not very sure that I understand it, but there is obviously some problem with JS...

monstrfolk’s picture

monstrfolk commented

Perhaps. The modal div is attached to the document root.

monstrfolk’s picture

monstrfolk commented

I have looked more at this problem. The problem only appears on Bootstrap enable themes when the screen width is 768 or smaller. I have tried this module on two different Drupal installs. Same problem appears.

The problem code is (lines 287 - 290)...

$wrapper.addClass('modal feedbackCollect-bs-modal')
        .attr('role', 'dialog')
        .html(content)
        .modal('show');

On form submit the modal is recreated which then creates another modal-backdrop div. When the modal closes (the new modal) the remains of the old modal (created when the user opens the form) is not cleaned up. What should happen is the content in the modal be replaced.

To recreate this issue...install and enable a bootstrap theme and then submit feedback with the screen width less than 768. Put a breakpoint on line 287 for the JS in your browser. Step over line 287 and you will see the background of the overlay get darker. This is when the new modal is created and also creating the second modal-backdrop div.

My suggestion to give this this issue a quick fix is to make $wrapper a global and not call feedbackCollectOpenForm on form submit. The functionality for after form submit needs to be moved to its own function.

The big problem here is the javascript is to complicated. It needs to be cleaned up and refactored into something much simpler.

Please fix this...Feedback Collect is a great module, but unusable for folks that use a Bootstrap theme.

  • ntucakovic committed 9adf8b8 on 7.x-1.x 
    Issue #2845654 by monstrfolk: Modal window background remains after...
jelenakrmar’s picture

jelenakrmar commented
Status: Active » Fixed
monstrfolk’s picture

monstrfolk commented

which branch has this commit?

jelenakrmar’s picture

jelenakrmar commented

7.x-1.x

Status: Fixed » Closed (fixed)

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