Topic: Layout of event box height

Home Pro Support Forums CSS and Design Layout of event box height

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #7461
    Elad Green
    Participant

    Hi there – new to ICS, just wanted to say thank you for creating this plugin!
    I’m having some issues getting a handle on shifting each of the events displaying into more of a “compact” view. I can’t seem to get the box height to become any less high than they display now, and I’m looking for a thinner / less waste of space display on the calendar.

    I imagine this is either done in CSS or with a shortcode addition? I cannot seem to find where.
    I appreciate any help.

    Here’s the view I’m currently receiving with new changes to any CSS yet:

    View post on imgur.com


    Currently using month view.

    From another user who’s calendar compactness I really like that I would like to achieve:

    Cupertino

    Thank you

    #7495
    room34
    Keymaster

    The default CSS for this view has a minimum height for the calendar table cells to achieve a more uniform look. To make it more compact, you can try using the compact parameter (although that currently doesn’t reduce the minimum height of the cells, but that’s coming in the next update).

    You can also write your own CSS to modify the setting, like this:

    .ics-calendar-month-grid td { height: 1px !important; }

    That’s about as extreme as it gets, so you may want to try something with a bit of height. The default value in the plugin is 9em. (Also just a reminder that with table cells, the cells are always going to adjust enough to fit the content, so you use the height property, not min-height, which seems logical but actually has no effect on tables.)

    #7498
    Elad Green
    Participant

    Thank you – that helps!
    That brings up another issue I came across. When using Full calendar and allowing a user to view the calendar as an option of month or list on mobile, the mobile truncates the whole time of the event area into a thin column instead of spreading it further across to the right. I’ve looked through the inspect window and been unsure how to increase the size of that element.

    Could you please share a way to increase it to give the time area more room to the right?

    View post on imgur.com

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.