• 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.

Fixing location of titles etc. in absolute coordinates

Scheduled Pinned Locked Moved Utilities
12 Posts 2 Posters 835 Views 2 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.
  • S Offline
    sankum
    last edited by May 30, 2025, 3:45 PM

    It is heasers. Say in clock module, I place date and time at different locations. I want their placement to be absolute and should always stay in foreground. Thanks.

    S 1 Reply Last reply May 30, 2025, 5:49 PM Reply Quote 0
    • S Offline
      sdetweil @sankum
      last edited by May 30, 2025, 5:49 PM

      @sankum absolute is full page. Lot of work.

      What do you mean foreground?

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      1 Reply Last reply Reply Quote 0
      • S Offline
        sankum
        last edited by May 30, 2025, 7:00 PM

        Hi Sam,
        Thanks. So if not absolute, is there a way to display those headers at the same location on every page of the screen? Or is that what is meant by absolute?

        Foreground - Not hidden, stays on top and visible.

        S 1 Reply Last reply May 30, 2025, 7:06 PM Reply Quote 0
        • S Offline
          sdetweil @sankum
          last edited by May 30, 2025, 7:06 PM

          @sankum I still dont quite get the objective, you said page now
          And headers are not visible if the module is hidden (display: none;)

          A ‘page’ in pages/carousel/… Is a collection of visible content
          All hidden will make the visible content different

          You have three modules in top left

          All visible, you see the FIFO stack matching config.js order
          If second is hidden , 3rd will move up as second doesn’t exist

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          1 Reply Last reply Reply Quote 0
          • S Offline
            sankum
            last edited by May 30, 2025, 8:56 PM

            Thanks Sam. Sorry for being confusing and not using the right technical words. Basically I am having issues with the layout on different pages, I will give an example using CalendarExt3 (month view):

            Month of May has 5 rows, fits nicely on the page it is on. Month of August has 6 rows and when I put that month on a different page, it does not fit the same way as the total width of the calendar is now higher.

            So how can I specify a absolute fixed width for the calendar so that it automatically adjusts to that for every month, regardless of number of rows in that month?
            As for other headers, they are indeed FIFO, so that is fine. Thanks.

            S 1 Reply Last reply May 30, 2025, 9:04 PM Reply Quote 0
            • S Offline
              sdetweil @sankum
              last edited by sdetweil May 30, 2025, 9:06 PM May 30, 2025, 9:04 PM

              @sankum so, for cx3 you would either have to do week view w 6 weeks so its always the same size

              Use css to position the module absolute, use classes: to give the instances unique indentifier for css

              Or use top bar instead of bottom bar, so it grows down instead of up

              I have 3 instances on 3 pages, and don’t notice the wiggle

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              1 Reply Last reply Reply Quote 0
              • S Offline
                sankum
                last edited by May 30, 2025, 11:02 PM

                Thanks Sam. Is it possible to scale the heights of cells in a month view? This way all months will be scaled based on the maximum of 6 rows. If so, how? Thanks.

                S 1 Reply Last reply May 30, 2025, 11:57 PM Reply Quote 0
                • S Offline
                  sdetweil @sankum
                  last edited by sdetweil May 31, 2025, 12:09 AM May 30, 2025, 11:57 PM

                  @sankum see the module readme, for all kinds of settings
                  IMG_1325.png

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  S 1 Reply Last reply May 31, 2025, 11:07 AM Reply Quote 0
                  • S Offline
                    sdetweil @sdetweil
                    last edited by sdetweil May 31, 2025, 11:08 AM May 31, 2025, 11:07 AM

                    @sankum so using eventHeight and maxEventLines in the module config will set the week row height

                    No css required

                    Sam

                    How to add modules

                    learning how to use browser developers window for css changes

                    1 Reply Last reply Reply Quote 0
                    • S Offline
                      sankum
                      last edited by May 31, 2025, 7:33 PM

                      Sam, thanks for your help.

                      1 Reply Last reply Reply Quote 0
                      • 1
                      • 2
                      • 1 / 2
                      1 / 2
                      • First post
                        7/12
                        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