3. News module 'height' changes when 3 vs 2 lines of text - pushes up other modules?
MagicMirror² v2.5.0 is available! For more information about this release, check out this topic.

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

  • V

    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

    0 1 Reply

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

    0 1 Reply
  • Module Developer

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

    0
  • Module Developer

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

    1 1 Reply
  • Module Developer

    @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! 🙂

    0