Can't add media or edit media in IE 10 or IE 11

Beaver Builder
1

I’ve just had a phone call with a client saying that they couldn’t edit a photo we had set up for them in beaver builder.

Upon digging into the issue they are using IE 10 and can’t see the “select photo” button at the bottom of the media modal popup. Consequently they can tick the image that they want, enter alt text and all the other features of the modal pop up but they can’t then “select photo” to action the change.

I’ve just verified this issue in Browserstack with both IE10 and IE 11. I have a screenshot if you need to see it.

In the meantime I’ve sent the client to use chrome and all is well but it is something that should be looked into.

WordPress 4.2.2
Beaver Builder 1.6.0.2

2

Hi Brendyn,

I just tried this on a local install using IE 10 on Win 7 and the Select button shows up fine and I am able to add/replace the image.

I’m using the same WP and BB as you. However, I successfully tried using both the TwentyFifteen theme as well as the latest Genesis + Dynamik Website Builder combo.

Which theme are you/they using and would it be possible to test using one of the default WP themes?

Additionally, it could also be a plugin conflict. Best way to test that is to temporarily disable all plugins and see if the issue persists. If it goes away, then enable them, one by one, testing as you go to nail down which one is the culprit.

Cheers!
Lyle

3

Hey Brendyn,

I also tried checking my localhost on browserstack on IE10 and IE11 and I can change the image on the Photo module just fine. Also tried on my Win8.1 laptop running IE11 and it works fine as well. Do you think you can shoot us temp admin access to the site in question so we can check?

Ben

4

[Content Hidden]

5

Hey Brendyn,

This is caused by the CSS your theme added. Since BB works on the frontend, it loads the styling of the theme as well(you might have already noticed this). I just added these CSS snippets to your theme’s style.css file since I didn’t know where else to place it.

.fl-builder-edit .search-form a {
  text-transform: none;
}
.fl-builder-edit .search-form {
  width: auto;
  overflow: auto;
}

I was using a Win8.1 machine running IE11 and I can already see Select Photo button which is now on the right side. If you wanted it on the left side, try taking out the width property.

Ben

6

That’s great - thanks Ben, I’ll move it into my SASS files.

I’ve also noticed some other unintended evidence of Beaver Builder loading front end CSS - there are some odd effects on themes that underline links. All the links in the Beaver builder interface (including tabs) get underlined which is weird if they are dotted or coloured. This looks odd and potentially makes the product look buggy to someone who didn’t know what is going on.

A potential feature suggestion would be to put in place some specific CSS for the editor to nullify some of these things that can potentially break or make the editing experience a little weird on certain themes.

7

Hey Brendyn,

We are slowly adding CSS to the Page Builder end as we go. I’ll tell the guys about these new ones so they can add them. Thanks for the heads up! :slight_smile:

Ben