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.

    middle_left, middle_center, middle_right

    Scheduled Pinned Locked Moved Solved Troubleshooting
    10 Posts 4 Posters 3.4k Views 4 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.
    • evroomE Offline
      evroom
      last edited by

      Hi,

      As far as I can see, there is only a middle_center position.
      Would it be possible to have a middle_left, middle_center and middle_right position ?

      For top and bottom this exists, just not for middle (or the upper_third and lower_third).

      For some reason I found the need for:

      .region.middle.center {
        width: 60%;
      }
      

      But everything for middle_center is now left aligned and I find it hard to place a module in the middle_center right aligned.

      So, I am in control of my defence and my strikers, but my center players are out of control :-)

      MagicMirror version: 2.30.0
      Raspberry Pi 4 Model B Rev 1.5 (8 GB RAM)
      Raspbian GNU/Linux 12 (bookworm)

      Test environment:
      MagicMirror version: v2.30.0
      Raspberry Pi 3 Model B Plus Rev 1.3 (1 GB RAM)
      Raspbian GNU/Linux 12 (bookworm)

      ? 1 Reply Last reply Reply Quote 0
      • G Offline
        greedyvegan @greedyvegan
        last edited by

        “fullscreen_below” fixed it, thanks

        S 1 Reply Last reply Reply Quote 0
        • ? Offline
          A Former User @evroom
          last edited by A Former User

          @evroom
          So, do you want to align some elements(text or somethings) to the right in middle_center?

          .region.middle.center {
            text-align:right;
          }
          

          Try this…

          1 Reply Last reply Reply Quote 0
          • evroomE Offline
            evroom
            last edited by

            Actually, I want to divide the middle section in 60% and 40%.

            I have my monitor rotated (portrait mode), so dividing in more parts does not make sense in terms of readability, but I guess persons with the monitor in landscape mode might want 25% - 50% - 25% (as an example).

            So, therefore I changed the middle center to 60%, which results in a middle section of 60% on the right-hand-side.
            And an empty middle section of 40% on the left-hand-side.
            The modules in the positions top_right and bottom_right do fill parts of on the right-hand-side, but I do not have control of the (top)-alignment.
            A center_left and center_right would help here.
            I hope it a bit clear. Not that easy to explain.

            I was looking for something like this:

            .region.left.center {
              width: 60%;
            }
            .region.middle.center {
              width: 0%;
            }
            .region.right.center {
              width: 40%;
            }
            

            MagicMirror version: 2.30.0
            Raspberry Pi 4 Model B Rev 1.5 (8 GB RAM)
            Raspbian GNU/Linux 12 (bookworm)

            Test environment:
            MagicMirror version: v2.30.0
            Raspberry Pi 3 Model B Plus Rev 1.3 (1 GB RAM)
            Raspbian GNU/Linux 12 (bookworm)

            ? 1 Reply Last reply Reply Quote 0
            • ? Offline
              A Former User @evroom
              last edited by

              @evroom
              You can escape MM’s region boundary using

              position:absolute;
              

              or

              position:relative;
              

              But you should have some knowledge or experience about CSS.

              1 Reply Last reply Reply Quote 0
              • evroomE Offline
                evroom
                last edited by

                @Sean,

                Thanks.
                Just starting to understand a little bit about CSS, so better to try different options.
                One being:

                Multiple modules with the same position will be ordered based on the order in the configuration file.
                

                I will order my modules in the config.js, as there are now placed randomly, and then see if it fits my expectations.

                MagicMirror version: 2.30.0
                Raspberry Pi 4 Model B Rev 1.5 (8 GB RAM)
                Raspbian GNU/Linux 12 (bookworm)

                Test environment:
                MagicMirror version: v2.30.0
                Raspberry Pi 3 Model B Plus Rev 1.3 (1 GB RAM)
                Raspbian GNU/Linux 12 (bookworm)

                G 1 Reply Last reply Reply Quote 0
                • G Offline
                  greedyvegan @evroom
                  last edited by greedyvegan

                  I added a module that has a black background, and its background is covering other modules… the z-index isn’t working from custom css and I can’t change its transparency.
                  (I’ve tried changing the other module’s z-index to no avail)

                  can I change the position from “middle_center” to “middle_center_below”?

                  (Screenshot 2024-10-06 at 6.52.33 PM.png

                  thanks

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

                    @greedyvegan no we don’t have a position like that
                    and starting w ver 2.29 we check the positions against what is defined in index.html

                    where are you putting the z-index? in css, on what element

                    see the second link in my sig below for using the dev window elements tab

                    also set your module background the some non black color so you can see it

                    Sam

                    How to add modules

                    learning how to use browser developers window for css changes

                    G 1 Reply Last reply Reply Quote 0
                    • G Offline
                      greedyvegan @sdetweil
                      last edited by

                      @sdetweil said in

                      where are you putting the z-index? in css, on what element

                      • .MMM-Globe {;z-index:-1;
                        background-color: transparent !important;}

                      see the second link in my sig below for using the dev window elements tab

                      also set your module background the some non black color so you can see it

                      • it is
                      G 1 Reply Last reply Reply Quote 0
                      • G Offline
                        greedyvegan @greedyvegan
                        last edited by

                        “fullscreen_below” fixed it, thanks

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

                          @greedyvegan cool

                          but this was an error

                           {;z
                          

                          that leading ;

                          Sam

                          How to add modules

                          learning how to use browser developers window for css changes

                          1 Reply Last reply Reply Quote 1
                          • S sdetweil has marked this topic as solved on
                          • 1 / 1
                          • 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