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

Regions

Scheduled Pinned Locked Moved Core System
34 Posts 19 Posters 103.4k Views 23 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.
  • P Offline
    Peter
    last edited by Jan 8, 2018, 8:57 AM

    Is it possible to set the bottom bar to a fixed size (so no resizing)?
    Depending on the amount of lines in the bottom bar news feed, my modules in bottom left and bottom right jump one line higher or lower.
    Peter

    B 1 Reply Last reply Jan 8, 2018, 1:40 PM Reply Quote 0
    • B Offline
      broberg Project Sponsor @Peter
      last edited by Jan 8, 2018, 1:40 PM

      @Peter It’s all doable with css.

      .region.bottom {
      height: 200px;
      }
      
      

      This you add in your custom.css file (outside of body{})

      P 1 Reply Last reply Jan 8, 2018, 3:27 PM Reply Quote 0
      • P Offline
        Peter @broberg
        last edited by Jan 8, 2018, 3:27 PM

        @broberg , unfortunately it did not work: now the bottom bar and bottom left en bottom right overlap.
        I changed the value and tried .regio bottom_bar.
        Any more ideas?
        Peter

        1 Reply Last reply Reply Quote 0
        • D Offline
          doubleT Module Developer
          last edited by Jan 8, 2018, 3:46 PM

          @Peter said in Regions:

          .regio bottom_bar.

          Can you copy and paste your exact code? It’s important that you address it with “.region.bottom” (no space, and note the dots)

          I posted about addressing elements in CSS before, see here.

          P 1 Reply Last reply Jan 8, 2018, 3:59 PM Reply Quote 0
          • P Offline
            Peter @doubleT
            last edited by Jan 8, 2018, 3:59 PM

            @doubleT sorry for the misunderstanding.
            First I copied and pasted your code; it gave an overlap (bottom bar and bottom left and bottom right).
            Then I tried more things like changing it in . bottom_bar (did not help to solve the problem.).
            And I tried some other values in your code.
            Restarted the RPI every time in between the changes.
            But still the same problem.
            Peter

            1 Reply Last reply Reply Quote 0
            • D Offline
              doubleT Module Developer
              last edited by doubleT Jan 8, 2018, 8:09 PM Jan 8, 2018, 7:16 PM

              @Peter said in Regions:

              . bottom_bar

              That’s what I ment with exact code. Because this will do nothing, it should be

              .bottom.bar
              

              Because the element you want to address has both classes, there’s no space in between.
              But I see where it went wrong: “bottom_bar” is how you assign a module to a region in the config.js. But that’s not how you address it in css.

              Can you show us your problem with either a screenshot or a photo? If I understand right, you have

              • Newsfeed in bottom_bar (css: .region.bottom.bar .container .module)
              • a module in bottom_left (css: .region.bottom.bar .region.bottom.left)
              • something in bottom_right (css: .region.bottom.bar .region.bottom.right)
                Important: “.region.bottom.bar .container” will address ALL of them because of the structure.

              Usually, the bottom_bar should claim its place as needed and push the other two up as necessary. So that would be normal (and is what you described).

              I’d try

              .region.bottom.bar .container .module.newsfeed {
                  height: ???px; /* height of the module with maximum lines possible */
              }
              
              P 1 Reply Last reply Jan 8, 2018, 7:33 PM Reply Quote 0
              • P Offline
                Peter @doubleT
                last edited by Jan 8, 2018, 7:33 PM

                @doubleT , you made my day!
                It works perfectly.
                Indeed I have a newsfeed (several from different sources) in the bottom_bar, Moviemodule in bottom_left and random (travel) pictures in bottom_right region.
                With your help the modules stay on the same line!
                Thanks!
                Peter

                1 Reply Last reply Reply Quote 0
                • D Offline
                  doubleT Module Developer
                  last edited by Jan 8, 2018, 8:11 PM

                  You’re welcome.
                  Btw. depending on how you control your Pi and Mirror, you don’t need to restart your whole Pi. In this case, just refreshing the browser should work, or restarting the Mirror process, if it doesn’t.

                  1 Reply Last reply Reply Quote 0
                  • W Offline
                    WayneRigley
                    last edited by WayneRigley Oct 25, 2018, 3:49 PM Oct 25, 2018, 3:48 PM

                    Hi all, well after countless trying ive given up and now asking for help. my MM is working perfect and the only troubling issue in my top_right section, i have a few things in there under the config but i would like to extend the left border of my top_right a little more left if thats possible. i have too much open space from the center to the right side. i will not be resizing fonts using the shift+ +/- any longer so that wont be an issue is manually adjusted. thanks all in advance and have a look here what im refering to
                    https://photos.app.goo.gl/EUWdJRQwAjKJksx46

                    Wayne R

                    1 Reply Last reply Reply Quote 0
                    • F Offline
                      Fifin404
                      last edited by Fifin404 Nov 30, 2019, 3:52 PM Nov 30, 2019, 3:51 PM

                      Hi all, is there any way to change outer border around modules? Make it smaller?
                      0_1575129077002_IMG_20191130_153745.png

                      1 Reply Last reply Reply Quote 0
                      • 1
                      • 2
                      • 3
                      • 4
                      • 1 / 4
                      • 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