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

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

Scheduled Pinned Locked Moved Solved Troubleshooting
7 Posts 2 Posters 784 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 Jan 5, 2022, 3:38 PM

    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 Jan 5, 2022, 3:50 PM Reply Quote 0
    • C Offline
      codac @sdetweil
      last edited by Jan 6, 2022, 9:37 AM

      @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 Jan 5, 2022, 3:51 PM Jan 5, 2022, 3:50 PM

        @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 Jan 5, 2022, 4:36 PM Reply Quote 0
        • C Offline
          codac @sdetweil
          last edited by Jan 5, 2022, 4:36 PM

          @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 Jan 5, 2022, 4:42 PM Reply Quote 0
          • S Offline
            sdetweil @codac
            last edited by Jan 5, 2022, 4:42 PM

            @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 Jan 5, 2022, 5:33 PM Reply Quote 0
            • C Offline
              codac @sdetweil
              last edited by Jan 5, 2022, 5:33 PM

              @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 Jan 5, 2022, 5:35 PM Reply Quote 0
              • S Offline
                sdetweil @codac
                last edited by Jan 5, 2022, 5:35 PM

                @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 Jan 6, 2022, 9:37 AM Reply Quote 0
                • C Offline
                  codac @sdetweil
                  last edited by Jan 6, 2022, 9:37 AM

                  @sdetweil This is what worked for me:

                  .MMM-WeatherChart canvas[style] {
                  	position: absolute;
                          right: -35px;
                  }
                  
                  1 Reply Last reply Reply Quote 0
                  • 1 / 1
                  1 / 1
                  • First post
                    6/7
                    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