Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Good "Super Simple Contact Form" conflicts with SP Page Builder...

Featured Lock Resolved Issue
This is the best solution I've ever seen for feedbacks / callbacks for Landing Pages and sites:
https://extensions.joomla.org/index.php?option=com_jed&view=extension&layout=default&id=9502
  Never had any problems with it, but with the Page Builder something goes wrong with z-indexes:
It is overlapped by the bottom elements (in modal mode):
https://snag.gy/aGSchp.jpg

Increasing of the "z-index" for modal window does not solve the problem:
http://demo.ofestival.ru/#contact-form

Please help me find a solution!

10 Answers

Paul Frankowski - Staff

More than a month ago #Permalink
Hi,
In Custom CSS please use this:

.mypopup-content {padding: 30px 15px 15px; }
.sscf-form textarea,
.fl_wrap_textarea {height: 150px !important;}
.mypopup-wrapper {
top: 40% !important;
max-height: 80%;}

custom_css_field_helix3.png
ok.png

Attachments (2)

  • custom_css_field_helix3.png
    custom_css_field_helix3.png 9.9 KB
  • ok.png
    ok.png 31.5 KB

kupala

More than a month ago #Permalink
Paul, thanks for the quick reply!
Custom.css slightly changes the shape and position of the window but it still overlaps with Page Builder blocks...
I changed the parameters for a better example:

.mypopup-content {padding: 30px 15px 15px; }
.sscf-form textarea,
.fl_wrap_textarea {height: 500px !important;}
.mypopup-wrapper {
top: 55% !important;
max-height: 80%;}

http://demo.ofestival.ru/#contact-form
(Please, scroll the button to the top of the screen and push)
https://snag.gy/ful3Mw.jpg
Result:
https://snag.gy/qz97nP.jpg

The problem occurs only with the Page Builder content. On other pages with the shaper_helix3 template everything is fine!

Paul Frankowski - Staff

More than a month ago #Permalink
have you tried to change z-index

.mypopup-content { z-index: 91;}
.mypopup-wrapper {z-index: 911;}

Paul Frankowski - Staff

More than a month ago #Permalink
sorry, you have to ask "Super Simple Contact Form" developer for help, he should know why window bottom is cut.
Or change popup script.

kupala

More than a month ago #Permalink
I have tried to change z-index - not working...

Paul Frankowski - Staff

More than a month ago #Permalink
sorry, I cannot help more.
Do what I suggest you last time.

Marco

More than a month ago #Permalink
Hi kupala,

The problem is that the section (page builder row) where the button resists has same z-index than a following section. And so the z-index 9999999 of the pop-up is not taken in consideration.

if you didn't solve this so far: here is how i did it:
1)
Under the row where the joomla module addon for the mailform is added: enter a css class name under Style-CSS Class (e.g. "mailpopup" - choose one of your own)
2)
Add ".mailpopup {z-index: 5 !important;}" to your custom.css file when you are using HELIX template or add it to your own css override file if you use different template.

Now the sbbp-section (row) has a higher z-Index and your popup will be also be displayed infront of the next folllowing section.

Cheers
Marco.

Marco

More than a month ago #Permalink
Hi again,

of course when you want to avoid "!important" in your CSS instruction you can also use

#sp-page-builder .page-content .mailpopup {
z-index:5;
}

for full cascade of the css style definition in the custom.css file.

Cheers
Marco.

kupala

More than a month ago #Permalink
Many thanks, Marco!
I will try this solution.

kupala

More than a month ago #Permalink
Thanks again, Marco!
It works great!
https://snag.gy/0RaTwU.jpg


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 98
Toufiq

Toufiq

Total Accepted Answers: 51
Sifat

Sifat

Total Accepted Answers: 38
Ofi Khan

Ofi Khan

Total Accepted Answers: 21
Mehtaz Afsana Borsha

Mehtaz Afsana Borsha

Total Accepted Answers: 21

119

Templates

306691

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us