Bootstap Conflict - Compatibility Issue

Beaver Builder
1

Hey BB Support,

I recently got done completing a real estate website using Beaver Builder: http://Utah-RealEstate.com.

All looks good, but I have a small compatibility issue with a plugin from a different vendor, called iHomeFinder.com. Every real estate listing in a particular geography can be displayed on a website using IDX technology. That IDX technology is provided by iHomeFinder.com on my website.

Everything seems to be working fine but one small issue.

There seems to be a bootstrap compatibility issue with Beaver Builder and iHomeFinder. I guess that bootstrap was trying to load twice (2) on all my webpages causing issues with the pictures on a listing to show up properly. iHomeFinder gave me the following code to find and replace on my site:

<script type='text/javascript' src='http://utah-realestate.com/wp-content/themes/bb-theme/js/bootstrap.min.js?ver=1.2.7'></script>

I have removed this instance of bootstrap, and everything seemed to be working fine. However, on each real estate listing there is a tabbed section with the following tabs: “Features, Map, Schools, Walk score, & Mortgage Calculator”. All tabs display just fine on a desktop or laptop. However, when in responsive mode, like on my smartphone the last few tabs collapse under one tab called “More”. You should be able to click on the “More” tab and see the last few tabs as a drop-down menu.

The problem is that when you click on the “more” tab nothing happens. I reached out to iHomeFinder Support and they said it had to do with the whole bootstrap compatibility issue with Beaver Builder Theme/plugin. They recommended that I reach out to you and see if there is a fix that you recommend.

Here is a sample listing where you can see those tabs and can play around with the browser size for responsive design.

http://utah-realestate.com/utah-homes-for-sale-details/1419-E-CIRCLE-WAY-Salt-Lake-City-UT-84103/1316267/257/

2

Hey David,

I can already see their boostrap is being loaded however I can’t see any JS errors/conflicts on the console while playing around on that page. Do you think you could try changing the theme to a different one, probably one of the twentyX themes, and see if you have the same problem? I checked their site for samples but none are reponsive. Let us know how it goes.

Ben

3

Hey Ben,

Sorry it took a little bit to get back to you. Okay, so I have changed the theme 3 times. I’ve used the default 2012, 2013, and 2015 wordpress theme. Each shows the drop-down menu for the “More” tab. Also as a safe guard I inactivated all the plugins accept iHomeFinder and Beaver Builder and there are no issues. So it is not a plugin issue. So it looks like it is a Beaver Builder Theme issue as opposed to a plugin issue.

I would prefer to keep the Beaver Builder theme. Any thoughts on what in the BB theme could be screwing that up?

Thanks

4

Hey David,

Just wondering how you managed to remove our instance of bootstrap? There’s actually another user of this plugin and his is working fine. It may have something to do with how you removed our bootstrap. Check this thread for more information.
http://forum.wpbeaverbuilder.com/support/q/optima-express-jquery-conflict/

Ben

5

Hey Ben,

I read that thread and will give that a go. There are two things I did: 1) iHomeFinder gave me the following as a CSS overide, which comes as part of their plugin:

#ihf-main-container .carousel-control {
   height: auto;
   background: none;
   border: none;
}
#ihf-main-container .carousel-caption {
    background: none;
}
#ihf-main-container .modal {
    width: auto;
    margin-left: 0;
    background-color: transparent;
    border: 0;
}
.ihf-results-links > a:nth-child(1) {
    display: none;
}
  1. iHomeFinder then told me to use a “Real-time Find and Replace” plugin and here is the script I found and replaced:

<script type='text/javascript' src='http://www.realerty.com/wp-content/themes/bb-theme/js/bootstrap.min.js?ver=1.2.5'></script>

With that knowledge is there anything else you suggest, or just what was suggested in that other thread?

6

Hey David,

Just what was suggest on the other thread, dequeuing our own bootstrap script correctly. Let us know how it goes! :slight_smile:

Ben

7

Hey Ben,

Still have a problem! Looks like you can remove Beaver Builder’s instance of bootstrap using the code snippet you provided on the other thread, or using the find and replace option I used. Though that works, the issue displaying those hidden tabs in responsive design/mode still doesn’t work.

You will notice on any particular real estate listing that there are 5 tabs: Features, Maps, Schools, Walk-Score, and Mortgage Calculator. If you manually shrink down your browser as if it were a smart phone, or if you use your iPhone or Smartphone to browse the website, the latter 3 tabs collapse into one tab called “More”.

If you click on the “more” tab it is supposed to show a drop-down menu, but it doesn’t work. That’s the side effect of removing BB instance of bootstrap.

Do you know any other solution?

Thanks.

8

Hey David,

Not really sure about the find and replace option. Please check my reply on the other thread.
http://forum.wpbeaverbuilder.com/support/q/optima-express-jquery-conflict/#post-32251

BEn

9

Hello David. I see that your site is not having another issue that mine is, which is that on the advanced search page, where you can select multiple cities (next to the view all tab)… the cities don’t fit into the search box properly. This used to work fine on mine before I changed to the BB theme, so it seems to be another theme issue. Any advice for fixing this? CSS? Yours looks great by the way.

My advanced search page is here where you can see the problem:
http://www.realfindtricities.com/homes-for-sale-search-advanced/
(site under construction)

10

Hey Jason,

I’ve already replied to your other post. :slight_smile:
http://forum.wpbeaverbuilder.com/support/q/optima-express-jquery-conflict/#post-109514

Ben