Potential Bug or Conflict with Events Calendar Pro Events List Widget

Beaver Builder
1

Hello Guys!

Happy New Year and hope all is well! There is a strange styling bug/conflict between Beaver builder Plugin and with The Events Calendar Pro’s Event Listing widget when it is used in a BB layout using the wordpress widgets module.

The purpose of the Events Listing widget is to show 1 or more upcoming events from the events calendar. Ordinarily, when you place this in a sidebar area the styling includes the date in a stylish square box and the event information on the right side, and is displayed in a list.

However when this is placed in a column using the Beaver Builder Plugin, all styling is dropped completely from the Event Listing Widget and it looks broken.

One strange thing that seems to “fix” the issue is adding a second instance of the Event Listing Widget in any other sidebar area (that is not managed by BB plugin) and voila! The Styling is fixed on the instance contained in the BB layout.

In other words if my homepage that is created with BB plugin contains 1 instance of the Event Listing widget, that widget will lose all styling. However if I add a second instance, say to my Primary sidebar on an internal page, then the styling renders properly on the BB instance as well as in the Primary sidebar.

Hopefully this makes sense. Please let me know if this is something you are aware of and if there is a way to fix it? Also let me know if you need me to demonstrate this somehow. Had a great 2015 with Beaver Builder and looking forward to many more with you guys!

Thanks and keep up the good work!

Clifton

2

Hey Clifton,

Glad the plugin is working out for you! It sounds like The Events Calendar Pro only loads the styling for its widget when it is placed inside a sidebar. We could copy that styling so it works regardless. Do you think you can setup a page where we can see it in action?

Ben

3

Thanks Ben,

do you mean to see it in action working correctly?

4

Hey Clifton,

Yes, even if in a sidebar. We could try copying the style and possibly grab it. :slight_smile:

Ben

5

[Content Hidden]

6

Hey Clifton,

Sorry about this, could you have a page where both are visible, i.e., where the widget is working fine on a sidebar and where it isn’t inside the content area?

Ben

7

[Content Hidden]

8

Hi Clifton,

I have gone ahead and done as you instructed and removed the Event list widget from the Footer widget area 2. When I refreshed the page, your Upcoming Events looked like this:

Cloudup

Therefore, can you provide a screenshot of what you’re seeing, when you remove the widget, please. Once, we have this information, we will be able to assist you further.

Note: I have put the widget back in the Footer widget area 2 for you.

All the best,
Danny

9

[Content Hidden]

10

Hi Clifton,

As far as I can tell, when you do not have the widget loaded. The CSS doesn’t load for the event widget.

Therefore, can you try this for me, please. Add the following CSS to your custom CSS, save the changes and then see if this resolves the issue.

.tribe-events-adv-list-widget .type-tribe_events, .tribe-mini-calendar-list-wrapper .type-tribe_events {
    margin: 0;
    padding: 0;
}
.tribe-mini-calendar-event.first {
    margin-top: 10px;
}
.tribe-mini-calendar-event .list-date {
    float: left;
    overflow: hidden;
    font-weight: bold;
    margin: 10px 5% 10px 0;
    padding: 3px;
    width: 15%;
    text-align: center;
    display: inline;
    background: #666;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.tribe-mini-calendar-event .list-date .list-dayname {
    background: #fff;
    color: #666;
    padding: 3px;
    font-size: 9px;
    text-transform: uppercase;
    width: 100%;
    text-align: center;
    display: block;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.tribe-mini-calendar-event .list-date .list-daynumber {
    color: #fff;
    font-size: 15px;
    width: 100%;
    line-height: 22px;
    display: block;
    text-align: center;
}

All the best,
Danny

11

Thank you Danny,

I added the code but nothing happened. It is still not formatted. Any suggestions?

12

Hi Clifton,

Where did you add the code? As I am not seeing it loaded, but that should work. I have just started to copy the code into the Chrome’s dev tools whilst viewing your site and the styling is starting to match up.

Cloudup

Thanks,
Danny

13

Thank you Danny,

I was adding it to a custom css section in the website but it was not taking so I added it directly to styles.css and it worked!!! Thanks for your help!

14

Hi Clifton,

No problem at all! Happy that your issue is now resolved.

Thanks,
Danny