0

i basically want a contact information form module on top of a google maps module so the google maps are a type of background and the form itself is around 30% of the container. This is perfectly illustrated in smartaddons sj zaga template, but i cant find anywhere here how it is done. I presume it has something to to with z-index in css for which one will be in front, and probably a setting of margin-left set to a minus value for the second module?

I also want to arrange in a similar manner a slideshow module underneath a reservation form..

5
  • I assume you have set both modules to the same position and then changed the order in which they're displayed using the default Module parameters
    – Lodder
    Mar 9, 2015 at 16:44
  • i am actuall modifying the plugin which generates both the map and the contact info on the same module position, and expanding the divs to 100% then display-inline, then set the margin of the second div to -500px; then try to assign z-index:1 to the map div and z-index:2 to the contact info div but no matter what i do the google maps div always show on top... i dont know why. Mar 9, 2015 at 17:11
  • It's extremely hard to tell without seeing anything visual
    – Lodder
    Mar 9, 2015 at 17:12
  • restorantdalia.com scroll to the bottom a little bit to see how it is now, resorantdalia.com/admin scroll to the bottom how it should look like Mar 9, 2015 at 17:14
  • You can see what the admin page uses: position:absolute; for the content over the map.
    – Farahmand
    Mar 10, 2015 at 10:31

1 Answer 1

1

The problem is that the two modules (the map and the contact form) both use a div with the same class:

<div class="ctajax-element">
    // Map displayed here
</div>
<div class="ctajax-element">
    // Contact form displayed here
</div>

This means that you can't target any of the <div> elements individually. You have to change these div's (or add an additional class) in order to be able to target each of them.

This should work:

<div class="ctajax-element mymap">
    // Map displayed here
</div>
<div class="ctajax-element myform">
    // Contact form displayed here
</div>

Then add the following CSS:

.ctajax-element.myform {
   position: absolute;
   width: 40%!important;
}

.ctajax-element.mymap {
   width: 100%!important;
}

The result should look something like this:

Contact form with Google map

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.