Navigation

    MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord

    News module 'height' changes when 3 vs 2 lines of text - pushes up other modules?

    Troubleshooting
    4
    5
    2025
    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.
    • V
      valid8r last edited by

      Not sure how best to describe, but I’m using the news feed module located at the bottom region of my mirror - pretty standard for most people seemingly. My only issue is that if the RSS feed has 2 vs 3 lines of text, the module ‘size/height’ changes which pushes up the two modules I have located above the News module ( I have the 3rd party Calendar module in the lower left region and the stock ticker on the lower right region). I’m trying to figure out which part of the main.css module needs to be changed to fix this…

      Help appreciated.

      Thanks

      Sean 1 Reply Last reply Reply Quote 0
      • Kleriker
        Kleriker last edited by

        I’m trying to figure out this problem as well right now.
        Temporary solution for now is to add “wrapTitle:false” to the config.js. This of course cuts off the text after the first line.

        Mykle1 1 Reply Last reply Reply Quote 0
        • Mykle1
          Mykle1 Project Sponsor Module Developer @Kleriker last edited by

          @Kleriker

          You could try changing the font size so the div doesn’t expand to accommodate the 3rd line. However, if doing that creates an instance where only 1 line is necessary to display the text then the same problem will arise.

          A trim(function) could limit the number of characters but that would mean the text would be cut off at a set point.

          Take a look at WunderGround weather.js. I think the author had his text change size (in the current weather portion) to stay within the same boundaries, thus, not moving the surroundings.

          1 Reply Last reply Reply Quote 0
          • Sean
            Sean Module Developer @valid8r last edited by

            @valid8r
            I don’t know exactly what you want. but as I’ve read, there are several CSS tricks to consider.

            1. overflow:hidden : You can keep your height of div box with this. https://www.w3schools.com/cssref/pr_pos_overflow.asp
              This would be helpful, but you should adjust exact target height.

            2. Use line-height in CSS : If you are carefully calculating the font-size, this line-height will help how many lines to show with combination with height and font-size

            3. Use vw or vh for font-size unit. It makes your font resizing relatively by viewpoint.

            Mykle1 1 Reply Last reply Reply Quote 1
            • Mykle1
              Mykle1 Project Sponsor Module Developer @Sean last edited by

              @Sean said in News module ‘height’ changes when 3 vs 2 lines of text - pushes up other modules?:

              there are several CSS tricks to consider.

              Even better. Good stuff Sean! 🙂

              1 Reply Last reply Reply Quote 0
              • 1 / 1
              • First post
                Last post
              Enjoying MagicMirror? Please consider a donation!
              MagicMirror created by Michael Teeuw.
              Forum managed by Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
              This forum is using NodeBB as its core | Contributors
              Contact | Privacy Policy