[Resolved] Avada modal is not compatible with Toolset Types 3.2.7

[Author]

Posts

[andreaD-4]

Hi,
on this site
hidden link
I installed Avada and Toolset Types 3.2.7 but the modal does not work.
If I deactivate Toolset Types, it works normally.
Thank you

[Nigel]

Hi there

I tested this locally and can confirm the issue (which also happens with older versions of Types, looks like it probably never worked).

I'm escalating this so my colleagues can investigate and identify the cause, and I'll get back to you when there is something to report.

[Nigel]

I got a quick answer, this has come up before.

Avada loads its own version of Bootstrap and so you need to go to Toolset > Settings and specify that "The theme or another plugin is already loading Bootstrap 3.0".

I tested changing that setting and the modals worked.

[andreaD-4]

Hi Nigel,
if I choose Toolset should load Bootstrap 3.0 (image attached 2)
if i choose The theme or another plugin is already loading Bootstrap 3.0 (image attached 1)

why is there this difference?
I would like to upload the layout of the second attachment.
how can I do?

a.

[Waqar]

Hi Andrea,

Nigel will be away for the next few days, so I'll be happy to follow up.

The style difference that you've noticed, is the result of the fact that your theme ( Avada ), seems to be using its own stripped down version of Bootstrap files.

A quick workaround to avoid this is to select the option "The theme or another plugin is already loading Bootstrap 3.0", but copy all the styles from the following file, into your theme's Custom CSS ( screenshot: hidden link ):

hidden link

I hope this helps and for a new question/concern, please open a new ticket.

regards,
Waqar

[andreaD-4]

Hi Waqar,
unfortunately it does not work well.
hidden link

The style loads it but then other features don't go well.
hidden link

Are there other solutions?
Can I load bootstrap only on the "Form" page?

Thank you

[Waqar]

Hi Andrea,

To selectively load the Bootstrap or custom styles, only on the form page(s), you can place them in "CSS editor" tab, on the form's edit screen.
( screenshot: hidden link )

The styles included in this section would only be included in the page(s), where that particular form is used.

[andreaD-4]

Thanks Waqar
But which css do I have to copy to have as a result what is in the image 2.png for previous post?
Thank you

[Waqar]

Hi Andrea,

You can use Google's inspect element tool, to identify the styles which are resulting in the difference.
hidden link

Tip: You can load the page with a form in two separate browser's tabs, one with Bootstrap loaded from Toolset and other without it.

This will let you compare the applied CSS styles, side-by-side.

Note: For more personalized assistance around CSS code, you can also consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/