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

middle_left, middle_center, middle_right

Scheduled Pinned Locked Moved Solved Troubleshooting
10 Posts 4 Posters 3.0k 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.
  • E Offline
    evroom
    last edited by Jul 22, 2018, 9:59 AM

    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 Jul 22, 2018, 10:38 AM Reply Quote 0
    • G Offline
      greedyvegan @greedyvegan
      last edited by Oct 7, 2024, 2:50 AM

      “fullscreen_below” fixed it, thanks

      S 1 Reply Last reply Oct 7, 2024, 2:52 AM Reply Quote 0
      • ? Offline
        A Former User @evroom
        last edited by A Former User Jul 22, 2018, 10:43 AM Jul 22, 2018, 10:38 AM

        @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
        • E Offline
          evroom
          last edited by Jul 22, 2018, 11:50 AM

          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 Jul 22, 2018, 12:08 PM Reply Quote 0
          • ? Offline
            A Former User @evroom
            last edited by Jul 22, 2018, 12:08 PM

            @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
            • E Offline
              evroom
              last edited by Jul 22, 2018, 1:13 PM

              @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 Oct 6, 2024, 10:55 PM Reply Quote 0
              • G Offline
                greedyvegan @evroom
                last edited by greedyvegan Oct 6, 2024, 11:00 PM Oct 6, 2024, 10:55 PM

                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 Oct 6, 2024, 11:52 PM Reply Quote 0
                • S Away
                  sdetweil @greedyvegan
                  last edited by Oct 6, 2024, 11:52 PM

                  @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 Oct 7, 2024, 2:47 AM Reply Quote 0
                  • G Offline
                    greedyvegan @sdetweil
                    last edited by Oct 7, 2024, 2:47 AM

                    @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 Oct 7, 2024, 2:50 AM Reply Quote 0
                    • G Offline
                      greedyvegan @greedyvegan
                      last edited by Oct 7, 2024, 2:50 AM

                      “fullscreen_below” fixed it, thanks

                      S 1 Reply Last reply Oct 7, 2024, 2:52 AM Reply Quote 0
                      • S Away
                        sdetweil @greedyvegan
                        last edited by Oct 7, 2024, 2:52 AM

                        @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 Oct 7, 2024, 2:52 AM
                        • 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