WordPress.org

Ready to get started?Download WordPress

Forums

The Events Calendar
[resolved] width issues ! (25 posts)

  1. heilios
    Member
    Posted 2 years ago #

    Hello,
    I recently added The Events Calendar plugin and I'am having some issues with the Calendar size on my page.... http://www.urbanews.fr/agenda/

    How can I fix it ?

    http://wordpress.org/extend/plugins/the-events-calendar/

  2. roblagatta
    Modern Tribe Support
    Plugin Author

    Posted 2 years ago #

    Hi there heilios. There are a couple of options here: easiest would just be trying out the different templating options available under Settings -> The Events Calendar. If none of those do the trick, it's possible that a template override of the gridview.php file. Are you familiar with the process of copying over that file to a newly-created 'events' folder in your theme directory, then making your modifications there? That way when you next update the plugin, your changes won't be overwritten.

    Let me know if that's unclear and I'll do what I can to elaborate.

  3. heilios
    Member
    Posted 2 years ago #

    Yeah it's probably what you said, cause I have page templates with my theme, and I can choose them on the event calendar admin panel... I don't really understand what to do to fix the issue... I have copy gridview.php in a new 'events' folder in my theme directory, but still not workng.. :(

  4. roblagatta
    Modern Tribe Support
    Plugin Author

    Posted 2 years ago #

    Are none of your changes from the new gridview.php folder taking at all? It's just not registering? This wouldn't give you a new template to select from the dropdown on Settings -> The Events Calendar; it'd just alter the look of the grid view directly.

  5. heilios
    Member
    Posted 2 years ago #

    Still not working as you can see >> http://www.urbanews.fr/agenda/
    I Choose Default Event Template

  6. roblagatta
    Modern Tribe Support
    Plugin Author

    Posted 2 years ago #

    I see. Alright, thanks for confirming. I'll have to get a dev from our team to chime in as to this, then, as it's currently a bit outside my area of expertise. We'll get someone in here sharing their thoughts over the next couple days. Apologies for the inconvenience in the interim.

  7. Paul Hughes
    Member
    Posted 2 years ago #

    Hi Heilios, I'm one of the devs developing The Events Calendar plugin. Happily, I found the spot in your theme that is causing the trouble!

    The culprit style is in your theme, Heilios. It is line 429 of your theme's style.css file:
    .grid .hentry {width: 300px; padding: 20px 0; border-top: 1px dotted #eee; margin-right: 20px; float: left;}

    The width: 300px is what is killing it. One option is to write a more specific style in your own sheet that is loaded after that, something like:
    #tribe-events-content .grid .hentry {width: something-else}
    and see if that works. Good luck, and enjoy The Events Calendar!

  8. heilios
    Member
    Posted 2 years ago #

    Ok so it works if I kick the 429 line, but causes some issues on my other pages.... :(

    On my cat pages like this one : http://www.urbanews.fr/categorie/par-domaine/urbanisme/ usually I can choose between grid or list with the switch at the right top of the page but if I choose grid without line 429 it sux a lot ^^

    I tried #tribe-events-content .grid .hentry {width:30px} for exemple but still not working

    I don't understand what is #tribe-events-content ?

    Btw Thx for your help we are close to solve the issue :D

  9. roblagatta
    Modern Tribe Support
    Plugin Author

    Posted 2 years ago #

    Thanks for the follow-up, Hellios. Let me see if Paul has any other thoughts here.

  10. Paul Hughes
    Member
    Posted 2 years ago #

    Try this, Heilios (add it to the end of your theme style.css file, or somewhere else):

    .grid .tribe-events-event {
        width: 200px;
    }

    Let me know if that works!

  11. aboveNbelow
    Member
    Posted 2 years ago #

    Hey heilios

    im rather new to wordpress so some of the guys might know better, but me personally think you should change your template for starters maybe get one with fluid width there are plenty of free templates out there, and even a few drag an drop theme builders, and id also set your event page to one collum, this would be the best solution if you only know a little html like me - hope this helps

  12. cecilaki_LG
    Member
    Posted 2 years ago #

    Hi all,

    I'm actually experiencing the same issue.
    I've tried many CSS tricks to try to get the calendar width compatible with my theme but it ignores everything and I can't make it fit my container. I'm using the EC template for the calendar.
    I couldn't find a proper way to create one full width page template with my theme so I'd choose this method.

    But it looks quite ugly at the moment..
    http://www.greek-paris.com/crise/events/month/

    Any ideas how to fix this ?

  13. roblagatta
    Modern Tribe Support
    Plugin Author

    Posted 2 years ago #

    Guys: have you tried Paul's suggestion, above?

  14. heilios
    Member
    Posted 2 years ago #

    Still not working for me :( :(

  15. roblagatta
    Modern Tribe Support
    Plugin Author

    Posted 2 years ago #

    Alright, Heilios. Thanks for the follow-up. Bummer to hear that doesn't do the trick. Let me see if one of our other devs can offer up another solution here.

  16. Joey Kudish
    Member
    Posted 2 years ago #

    Hellios,

    On line 768px of your styles.css file, change the following:

    .grid .tribe-events-event {
    width: 200px;
    }

    to

    .grid .tribe-events-event {
    width: 110px;
    }

    That should do the trick.

    Cheers

  17. heilios
    Member
    Posted 2 years ago #

    Workinnnnnnnnnnnng !!! Greaaaaaaaaaaaaaat Thx man :)

  18. roblagatta
    Modern Tribe Support
    Plugin Author

    Posted 2 years ago #

    Heck yeah! Awesome to hear that did the trick, heilios. Thanks for confirming. If you'd be so kind as to give us a vote of "Works" and/or a 5-star rating here at the repo, we sure would appreciate it :)

    Please let us know if we can do anything else.

  19. c0nstruct
    Member
    Posted 2 years ago #

    Hi There,

    Sorry to reopen this, but I found good use for this solution. The thing is that I am struggling with my event DIV's overflowing the table cells in the grid view. I have tried to add a overflow:hidden which looks good, but breaks the popups when hovering over the event.

    I am about to give up but I thought I should give this thread a try. Do you guys have any tips or tricks?

    You can see my problem here:
    http://ny.bodokajakk.no/kalender/

    Edit: Here is my relevant CSS

    .grid .tribe-events-event {
        width: 60px; overflow: hidden; text-overflow: ellipsis;
    }

    Thanks,
    Terje

  20. erimic
    Member
    Posted 2 years ago #

    Hi. I've been looking for a solution to this, so I thank you for this message thread.

    Unfortunately, the fix offered:

    .grid .tribe-events-event {
    width: 200px;
    }

    is not working for my site (which has a completely different theme). The content width adjusts, but not the width of the actual grid. See here: http://www.buckeyekids.com/deadlines/

    Any new suggestions?

  21. bolide
    Member
    Posted 2 years ago #

    This will all be done in CSS. If you control-click the table in Safari (other browsers may use different hot keys) you can look at the CSS

    A quick look suggests that on line 210 of your CSS you need to remove width: 250px. If you get rid of this the table fits the page. This might not be a 100% cure but it will get you going in the right direction

    Your CSS is at
    http://www.buckeyekids.com/wp-content/plugins/the-events-calendar/resources/events.css?ver=3.3.1

    Nick Froome

  22. erimic
    Member
    Posted 2 years ago #

    Thanks. I'm in the events.css file and do not see width: 250px.

    Which setting should I look at? (I'm not a developer in the least.)

  23. erimic
    Member
    Posted 2 years ago #

    Never mind. I found the line. It worked!!! Thanks so much!!!

  24. c0nstruct
    Member
    Posted 2 years ago #

    I finally found the solution to my own version of this problem.

    Problem:
    When forcing the cell width to prevent uneven columns I need to use overflow:hidden to prevent long event titles from overstepping their boundaries. The overflow:hidden also clips the tooltip, so that was not a good solution.

    Solution:
    Convert the link to a block element and restrict its width and overflow, thus handling this parallell to the tooltip-div, like such:
    .grid .tribe-events-event a { width: 60px; display: block; text-overflow: ellipsis; overflow: hidden;}

  25. roblagatta
    Modern Tribe Support
    Plugin Author

    Posted 2 years ago #

    Thanks for sharing your solution, c0nstruct. It will be useful to others who come with the same problem down the road and you've laid it out in a perfect format for that to make sense. Thanks again and please let us know if we can do anything for you down the road.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic