-
Posts
-
I’ve been using the WP FullCalendar plugin (in combination with the Events Manager plugin) for over a year, but initially had a CSS conflict with the Enfold theme that caused a single, thin, colored vertical line to appear in the monthly, week and day view modes instead of the actual event titles and details. If I changed the theme from Enfold to say Twenty-Thirteen or Twenty-Fourteen then the calendar behaved as expected. I’ve seen other topics on the Enfold Support forum about this issue as well.
Anyhow, I was finally able to fix this issue by adding the following CSS to my child theme stylesheet.
.fc-event-inner{border:0px;width:inherit!important;}
.ui-selectmenu-dropdown{text-decoration:none!important;}
.fc-header-left{background-color:#f8f8f8!important;}
.fc-header-right{background-color:#f8f8f8!important;}
.fc-header-center{background-color:#f8f8f8!important;}But now there is a new version of the WP FullCalendar plugin which is version 0.9. The other day I updated from version 0.8.4 to 0.9 and once again the thin vertical line is back. My previous CSS fix does not seem to have any affect.
Can you let me know what modifications I might need to make to my child theme CSS stylesheet?
SCREENSHOT OF PREVIOUS PLUGIN VERSION AFTER CSS FIX WAS APPLIED
WP FullCalendar Plugin – Version 0.8.4
https://www.dropbox.com/s/b7qrw2vip7owry4/wp-fullcalendar-no-lines-monthview.jpg?raw=1SCREENSHOT OF LATEST VERSION OF PLUGIN WITH DISPLAY ISSUES
WP FullCalendar Plugin – Version 0.9
https://www.dropbox.com/s/n2sh97cjnlv9nk2/wp-fullcalendar-lines-monthview.jpg?raw=1Hi killyman!
Could you provide us with a link to the site in question so that we can take a closer look please?
Regards,
RikardHey!
Thanks for the links, I’m still having trouble understanding exactly where this line is visible though, I can’t really see anything that stands out. Could you provide us with a screenshot of it maybe? You can upload it to imgur.com or a public dropbox folder and then link it here.
Cheers!
RikardSCREENSHOT OF PREVIOUS PLUGIN VERSION AFTER CSS FIX WAS APPLIED
NO DISPLAY PROBLEMS
WP FullCalendar Plugin – Version 0.8.4
https://www.dropbox.com/s/b7qrw2vip7owry4/wp-fullcalendar-no-lines-monthview.jpg?raw=1SCREENSHOT OF LATEST VERSION OF PLUGIN WITH DISPLAY ISSUES
THIN VERTICAL LINES APPEARS ON DAYS INSTEAD OF EVENT TITLES AND DESCRIPTIONS
WP FullCalendar Plugin – Version 0.9
https://www.dropbox.com/s/n2sh97cjnlv9nk2/wp-fullcalendar-lines-monthview.jpg?raw=1Hi Ismael,
Thanks for the suggested CSS fix.
That only partially worked when viewed on computer screen sizes. The top of the calendar still has no option to move to the prev/next month (arrows left and right) and the drop-down selector for categories is missing.
SEE SCREENSHOT LINK COMPARING VERSION 0.9 WITH CSS FIX YOU SUGGESTED ON TOP AND VERSION 0.8.4 WHICH DISPLAYS FINE ON BOTTOM
https://www.dropbox.com/s/ajqgnmg48qtb8qs/calendar-month-min-width-fix-comparison-dropbox.jpg?raw=1Also, Day view mode cuts off details with CSS min-width:109px fix
SCREENSHOT LINK
https://www.dropbox.com/s/zh8svnk897jbe2s/wp-fullcalendar-linesfix-dayviewissue.jpg?raw=1Now, on Mobile device screens, such as the iPhone, the min-width:109px CSS fix makes the boxes too wide and causes overlapping.
SCREENSHOT LINK
https://www.dropbox.com/s/8916g31l3ag0u32/iphone-screenshot-min-width-fix.jpg?raw=1UPDATE
I found another post online about this same issue with another theme. See link below.
http://eventespresso.com/topic/ee4-calendar-bug/So, in the parent theme’s base.css file I experimented by commenting out the max-width declarations (max-width:100%; max-width:none\9;) in the #Links first declaration block and then tested it out and the thin lines problem became corrected.
/* #Links
================================================== */
a { text-decoration: none; outline: 0; /* max-width:100%; max-width:none\9; */ }
a:hover, a:focus, a:visited { outline: 0; text-decoration: underline;}
p a, p a:visited { line-height: inherit; }
a.avianolink, .avianolink a{cursor: default;}
#top .avia_hidden_link_text{display: none;}Then, I undid my changes to the parent theme’s base.css file and tried adding the following CSS declaration block to my custom style.css file in the child theme and the result was the same with the thin lines problem becoming corrected.
a.fc-event {
max-width: none !important;
}Now I just need to find out how to resolve the issue with the Prev/Next month buttons not showing up and the drop-down selector for the event categories not working. Any ideas on those issues?
One last link worth looking at. The WP Calendar plugin developer mentioned, “we’re using the FullCalendar library which makes use of jQuery’s ThemeRoller CSS.” See link below and look at last comment by developer.
https://wordpress.org/support/topic/events-showing-up-as-thin-gray-linesHey!
could you provide us admin access to the site in question? we would need to have a deeper look into the issue. Post login details here as private reply. Try to deactivate all other plugins, to see if one is causing this issue. Also clear browser cache and refresh your site a few times.
Regards,
AndyHey!
at first please update to the newest WordPress and theme version, because this could already solve the issue.
Regards,
AndyI updated the Enfold theme to the latest version which is 3.2 and also updated WordPress to the latest version which is 4.2.2 and the display issue remains.
Hi!
I am sorry, it seems that the plugins you are using are not compatible with Enfold and we can’t provide support for third party programs. Please contact the plugin’s author or I suggest to use The Events Calendar Plugin instead.
You can find a list of recommended plugins for Enfold here.
Regards,
Andy
- You must be logged in to reply to this topic.