How can we improve WHMCS?

Share, discuss and vote for what you would like to see added to WHMCS

  1. Home
  2. Ideas
  3. Client Area
  4. Calendar CSS tweak to allow overflow-wrap of text (e.g. domain names)

Calendar CSS tweak to allow overflow-wrap of text (e.g. domain names)

  • host1164 shared this idea 8 years ago
  • Client Area
  • 1 Comment


1 Votes
Login to Vote
Currently, assets/css/fullcalendar.css (and assets/css/fullcalendar.min.css) forces one-line tall events:

~Line 481:
[co]
  • .fc-day-grid-event > .fc-content { /* force events to be one-line tall */
  • white-space: nowrap;
  • overflow: hidden;
  • }
    • [/co]

    This ends up making the calendar unreadable when viewing anything with a domain name:


    By removing the "white-space: nowrap;", we can return to a readable layout:



    If there's a good reason/use-case for keeping nowrap on this, please let me know.

    Featured Comment

    WHMCS commented 9th March 16
    We tend not to change the css values when provided in minified files from third parties, in this case http://arshaw.com/fullcalendar/

    However, you are able to override this yourself using the style.css file included in your admin template.

    For example, I have found the following will work as you wish:

    [co]
  • .fc-day-grid-event > .fc-content {
    white-space: unset !important;
    }
    • [/co]

    As for why this has been implemented, you would need to contact the calendar developer for an exact reason. However, as an educated guess, multiple events will show in a line, and if you wish to see full detail, you can click on the "Day" view and events will expand as appropriate.

    1 Comment

    Login to post a comment.

    Official Response
    WHMCS commented 9th March 16
    We tend not to change the css values when provided in minified files from third parties, in this case http://arshaw.com/fullcalendar/

    However, you are able to override this yourself using the style.css file included in your admin template.

    For example, I have found the following will work as you wish:

    [co]
  • .fc-day-grid-event > .fc-content {
    white-space: unset !important;
    }
    • [/co]

    As for why this has been implemented, you would need to contact the calendar developer for an exact reason. However, as an educated guess, multiple events will show in a line, and if you wish to see full detail, you can click on the "Day" view and events will expand as appropriate.