• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
MagicMirror Forum
  • Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.

Calendar - How to align symbol and text to left

Scheduled Pinned Locked Moved Unsolved Troubleshooting
1 Posts 1 Posters 402 Views 1 Watching
Loading More Posts
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • W Offline
    wmx
    last edited by Aug 16, 2021, 7:34 PM

    Hi @all,
    I’m running my MM for a while (now @ v2.16.0), but since the update, the formating for calender seems to has changed.
    I run 3 (default) calendars, the upper two with whole width of the column, the third in the left column of two.
    I did some adjustments in custom.css for format my calendars.
    I tried to get the same column with for the symbol col and symbol an title left aligned. But there are some spaces, I do not how to resize them.

    It now looks like this

    992ee505-23f6-4f92-9ed6-07991c4ceaeb-image.png

    But I would like to get the red areas all same width.

    For testing I colored the fields and they show up like this

    2b4cc327-ede0-418b-98e3-a54a8df14964-image.png

    Why are the title fields of the upper two calendars different?

    These are my custom.css entries for calendars

    /* Calendar Einträge - Symbol */
    .calendar .symbol {
      font-size: 30px;
      text-align: left;
      width: 34px; 
    }
    
    /* Calendar Einträge - Text */
    .calendar .title {
      font-size: 36px;
      text-align: left;
      line-height: 40px;
    }
    
    /* Calendar Einträge - Zeitpunkt */
    .calendar .time {
      font-size: 36px;
      line-height: 40px;
      color: #dddddd; /* white! */
    }
    

    Some advices?
    How do I align symbol and title to the left?
    Is there a way to get this without custom.css?
    What is the correct way to control the size of the fields and the size of the space between?

    1 Reply Last reply Reply Quote 0
    • 1 / 1
    1 / 1
    • First post
      1/1
      Last post
    Enjoying MagicMirror? Please consider a donation!
    MagicMirror created by Michael Teeuw.
    Forum managed by Sam, technical setup by Karsten.
    This forum is using NodeBB as its core | Contributors
    Contact | Privacy Policy