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.

    [MMM-WeatherChart] How to remove the right hand side space?

    Scheduled Pinned Locked Moved Solved Troubleshooting
    7 Posts 2 Posters 852 Views 2 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.
    • C Offline
      codac
      last edited by

      Hi, I would like to remove the space on the right hand side (red marked) so that the module sticks to the mirrors border, the same way the weather module does.

      I’ve tried a lot with custom.css already but I can’t manage to finally remove it.

      mmm-weatherchart.png

      S 1 Reply Last reply Reply Quote 0
      • C Offline
        codac @sdetweil
        last edited by

        @sdetweil This is what worked for me:

        .MMM-WeatherChart canvas[style] {
        	position: absolute;
                right: -35px;
        }
        
        1 Reply Last reply Reply Quote 0
        • S Offline
          sdetweil @codac
          last edited by sdetweil

          @codac looks like the code places it to the left edge

          	img.style.left = "0px";
          

          so your custom.css would need to change that

          .MMM-WeatherChart img {
                 left: 40px;
          {
          

          you will have to use the dev console to figure out what the left setting should be.

          see https://forum.magicmirror.builders/topic/14862/help-with-a-couple-css-issues?_=1640538468966

          ps, you don’t remove the space, you shift the image to the right edge

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          C 1 Reply Last reply Reply Quote 0
          • C Offline
            codac @sdetweil
            last edited by

            @sdetweil thank you for the reply.
            I used the Developer-Console but I did not see the img.style.left.

            The CSS code provided does
            not change the behaviour unfortunately.

            S 1 Reply Last reply Reply Quote 0
            • S Offline
              sdetweil @codac
              last edited by

              @codac said in [MMM-WeatherChart] How to remove the right hand side space?:

              I did not see the img.style.left.

              you have to select elements tab, click the pointer (top left) and then click on the image (the chart)
              and then the styles for the chart image(img html tag) will be in the right column of the dev console…

              the middle column will be the html, so the img tag should be selected

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              C 1 Reply Last reply Reply Quote 0
              • C Offline
                codac @sdetweil
                last edited by

                @sdetweil There is no image/img Tag at all.
                I have a class module-content that covers the whole
                module. In that div there is a canvas, that canvas is more narrow in a sence that the red marked area is missing.

                S 1 Reply Last reply Reply Quote 0
                • S Offline
                  sdetweil @codac
                  last edited by

                  @codac interesting. which module are you using? github link…

                  one I pulled up was showing a fixed image… not drawing one…
                  (I have a module that draws a chart…so I will look too )

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  C 1 Reply Last reply Reply Quote 0
                  • C Offline
                    codac @sdetweil
                    last edited by

                    @sdetweil This is what worked for me:

                    .MMM-WeatherChart canvas[style] {
                    	position: absolute;
                            right: -35px;
                    }
                    
                    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 Sam, technical setup by Karsten.
                    This forum is using NodeBB as its core | Contributors
                    Contact | Privacy Policy