Offset with vertical scrolling

[theskyisthelimit]

Platform (Hardware/OS):

Magicmirror Docker Container

Node version:

npm: '6.14.13'

MagicMirror version:

karsten13/magicmirror:v2.15.0

Module version:

v2.4.3

Description of the issue:

Just found this module and I love it. Just a little problem with the vertical scrolling. there seems to be some sort of offset.

any ideas?

[jalibu]

maaaaaaaaaaahhhhh :'-(

I thought this was solved... I'll fix this asap. Thank you for reporting

[theskyisthelimit]

Thanks for the quick reply! Looking forward. Enjoy the weekend👍🏼

[jalibu]

@theskyisthelimit do you use any custom css? whats your screen resolution?

[jalibu]

oh, and on which position do you place it?

[jalibu]

I can't reproduce it locally... Could you please send me your config.js?

[theskyisthelimit]

my screen resolution is 1920x1080

yes, I use the following entries in my custom.css. I also deleted all content and tried again. no change.

I tried bottom_right & bottom_right

header {

  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}

.MMM-bernwordclock {
    font-family: "Courier";
}

body {

  margin: 5px;
  position: absolute;
  height: calc(100%);
  width: calc(100% - 5px);
  font-family: "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}
  .thin {
    font-family: "Helvetica Neue", sans-serif;
    font-weight: 100;
  }

  .light {
    font-family: "Helvetica Neue", sans-serif;
    font-weight: 300;
  }

  .regular {
    font-family: "Helvetica Neue", sans-serif;
    font-weight: 400;
  }

  .bold {
    font-family: "Helvetica Neue", sans-serif;
    font-weight: 700;
  }

.clock .time {
    color: white;
    font-size: 100px;
    padding-top: 25px;
}

.brightb {
color: #55acee;
}
.currentweather .wi-sunrise {
color: #ffd700;
}
.currentweather .wi-sunset {
color: #ffa500;
}
.currentweather .wi-day-sunny {
color: #ffff00;
}
.currentweather .wi-night-showers {
color: #55acee;
}
.currentweather .wi-degrees {
color: #415;
}
.currentweather .wi-rain {
color: #55acee;
}
.currentweather .wi-showers {
color: #55acee;
}
.currentweather .wi-night-showers {
color: #55acee;
}
.currentweather .wi-night-alt-cloudy-windy {
color: #aaa;
}
.currentweather .wi-night-cloudy {
color: #aaa;
}
.currentweather .wi-cloudy {
color: #aaa;
}
.currentweather .wi-day-cloudy {
color: #aaa;
}
.currentweather .wi-cloudy {
color: #aaa;
}
.currentweather .wi-cloudy-windy {
color: #aaa;
}
.currentweather .wi-showers {
color: #55acee;
}
.currentweather .wi-thunderstorm {
color: #ff00ff;
}
.currentweather .wi-snow {
color: #fff;
}
.currentweather .wi-fog {
color: #999;
}
.currentweather .wi-night-clear {
color: #fff;
}
.currentweather .wi-night-rain {
color: #55acee;
}
.currentweather .wi-night-thunderstorm {
color: #ff00ff;
}
.currentweather .wi-night-snow {
color: #fff;
}

.weatherforecast .wi-sunrise {
color: #ffd700;
}
.weatherforecast .wi-sunset {
color: #ffa500;
}
.weatherforecast .wi-day-sunny {
color: #ffff00;
}
.weatherforecast .wi-night-showers {
color: #55acee;
}
.weatherforecast .wi-degrees {
color: #415;
}
.weatherforecast .wi-rain {
color: #55acee;
}
.weatherforecast .wi-showers {
color: #55acee;
}
.weatherforecast .wi-night-showers {
color: #55acee;
}
.weatherforecast .wi-night-alt-cloudy-windy {
color: #aaa;
}
.weatherforecast .wi-night-cloudy {
color: #aaa;
}
.weatherforecast .wi-cloudy {
color: #aaa;
}
.weatherforecast .wi-day-cloudy {
color: #aaa;
}
.weatherforecast .wi-cloudy {
color: #aaa;
}
.weatherforecast .wi-cloudy-windy {
color: #aaa;
}
.weatherforecast .wi-showers {
color: #55acee;
}
.weatherforecast .wi-thunderstorm {
color: #ff00ff;
}
.weatherforecast .wi-snow {
color: #fff;
}
.weatherforecast .wi-fog {
color: #999;
}
.weatherforecast .wi-night-clear {
color: #fff;
}
.weatherforecast .wi-night-rain {
color: #55acee;
}
.weatherforecast .wi-night-thunderstorm {
color: #ff00ff;
}
.currentweather .wi-night-snow {
color: #fff;
}

}

[theskyisthelimit]

sure,

    {
      module: "MMM-Jast",
      position: "bottom_left",
      config: {
        maxWidth: "100%",
        updateIntervalInSeconds: 300,
        fadeSpeedInSeconds: 3.5, // Higher value: vertical -> faster // horizontal -> slower
        scroll: "vertical", // One of ["none", "vertical", "horizontal"]
        useGrouping: true,
        currencyStyle: "code", // One of ["code", "symbol", "name"]
        showColors: true,
        showCurrency: true,
        showChangePercent: true,
        showChangeValue: false,
        showChangeValueCurrency: false,
        showPortfolioValue: false,
        showPortfolioGrowthPercent: false,
        showPortfolioGrowth: false,
        numberDecimalsValues: 2,
        numberDecimalsPercentages: 1,
        stocks: [{
            name: "Tesla",
            symbol: "TSLA"
          },
          {
            name: "Gamestop",
            symbol: "GME"
          },
          {
            name: "AMC",
            symbol: "AMC"
          },
          {
            name: "Coinbase",
            symbol: "COIN"
          },
          {
            name: "Apple",
            symbol: "AAPL"
          },
          {
            name: "ARKK",
            symbol: "ARKK"
          },
          {
            name: "ARKG",
            symbol: "ARKG"
          },
          {
            name: "ARKX",
            symbol: "ARKX"
          }
        ]
      }
    },

[jalibu]

Hey @theskyisthelimit,

I think I found the problem. Could you please verify the fix with the MMM-Jast.css of this branch https://github.com/jalibu/MMM-Jast/tree/fix/22-vertical-offset ?

[theskyisthelimit]

Hey @jalibu

I just tried it and unfortunately the behaviour is unchanged. I've tested it with Firefox and Chrome :-(

[jalibu]

I can't reproduce it... it works on my local machine (MacOS) with Chrome, Safari and Firefox... I used your custom.css and just removed the wrong } in the last line.

It also works on my Raspberry with Chromium... What do I or what do you wrong? :-D

[jalibu]

@theskyisthelimit which other modules do you have installed?

[theskyisthelimit]

Hey @jalibu

After I saw your gif above I noticed that the position of percentage indicator are a bit elevated on my end (you can see it in my initial post) So, I fiddled around with the firefox developer tools and started to uncheck different styling and found the culprit! It was a line in the CSS from another module which is just under the MMM-Jast module. I commeted that line out and now it works perfecty!

Vielen Dank für deine Hilfe und deine Zeit! 👍

[jalibu]

@theskyisthelimit may I ask for the other module's name? Perhaps I can "harden" my module against it.

[theskyisthelimit]

sure, it's MMM-cryptocurrency and this entry in the css

.mmm-cryptocurrency-icon > tr > td > img, span{ vertical-align: middle; }

[jalibu]

@theskyisthelimit thanks.. fyi: https://github.com/matteodanelli/MMM-cryptocurrency/issues/92