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 667 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

      Hi,
      Currently I adjust the location of Titles etc… using classes in custom.css using left-margin, …

      This means that they can move depending on page content.

      Is it possible to specify absolute location using X and Y coordinates in pixels? Say for a 1920x1080p screen? Also, how can I make sure that they will always remain in foreground?

      Thanks.

      S 1 Reply Last reply Reply Quote 0
      • S Offline
        sdetweil @sankum
        last edited by

        @sankum can you explain more, what titles ?
        Module headers?

        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

          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 Reply Quote 0
          • S Offline
            sdetweil @sankum
            last edited by

            @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

              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 Reply Quote 0
              • S Offline
                sdetweil @sankum
                last edited by

                @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

                  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 Reply Quote 0
                  • S Offline
                    sdetweil @sankum
                    last edited by sdetweil

                    @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

                      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 Reply Quote 0
                      • S Offline
                        sdetweil @sankum
                        last edited by sdetweil

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