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.

    centering image with a colspan = 2

    Scheduled Pinned Locked Moved Development
    11 Posts 2 Posters 3.6k 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.
    • S Offline
      sdetweil @wegz15
      last edited by

      @wegz15 I don’t understand the question…

      YOU set the classname

      icon.className = "wi-weathericon " + forecast.icon;

      see https://stackoverflow.com/questions/8603914/center-image-in-table-td-in-css/8603927

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      1 Reply Last reply Reply Quote 0
      • W Offline
        wegz15
        last edited by

        Sorry, I’m pretty new at this. I took a basic web design class with very basic css about 15 years ago. I guess what I’m asking is how do I source an image? I want to display the weather image based on the api response. My assumption of why it is not working is because currently the image is being called by the class name. When I inspect the cell in chrome inspector I see this:

        (span class=“wi-weathericon rains” style=“text-align: center;”) (/span)

        The code calls for (icon.className = "wi-weathericon " + forecast.icon;)

        When I change it to imgSrc = "wi-weathericon " + forecast.icon; I get an empty sqaure displayed. I tried imgSrc = /modules/icon/"wi-weathericon " + forecast.icon; and that makes the module not show up.

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

          @wegz15 you would use the image tag
          note the image tag below has a e+xtra space after the open as this forum uses that tag, and stuff disappears

          < img src="url"></img>
          

          so,

          var i= createElement("img")..
          i.src=....
          

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          1 Reply Last reply Reply Quote 0
          • W Offline
            wegz15
            last edited by wegz15

            Here is what I added…

            var iconCell = document.createElement("tr");
            				iconCell.colSpan = 2;
            				iconCell.style.textAlign = "center";
            				iconCell.className = "bright-weather-icon";
                                            row.appendChild(iconCell);
            				
            
            				var icon = document.createElement("span");
            				icon.colSpan = 2;
            				icon.style.textAlign = "center";
            				icon.className = "wi-weathericon" + forecast.icon;
            				iconCell.appendChild(icon);
            				
            				var i=document.createElement("img");
            				i.src = "wi-weathericon " + forecast.icon;
            				iconCell.appendChild(i);
            

            that shows up with an empty square below the current left aligned image. I tried deleting the var icon and got just a blank sqaure…here is the code plus element from chrome.

                                            var iconCell = document.createElement("tr");
            				iconCell.colSpan = 2;
            				iconCell.style.textAlign = "center";
            				iconCell.className = "bright-weather-icon";
            				row.appendChild(iconCell);
            				
                                            var i=document.createElement("img");
            				i.src = "wi-weathericon " + forecast.icon;
            				iconCell.appendChild(i);
            
            

            chrome inspector shows this:

            < tr class="bright-weather-icon" style="text-align: center;">< img src="wi-weathericon night-rain">< /tr>
            
            

            and then the css shows this:

            .night-rain{
            	content: "";
            	height:70px;
            	width:105px;
            	display: block; 
            	background-image : url("/css/icon/45.png");
            	background-size: 105px 70px;
            	background-position: center;
            	text-align: center;
            }
            

            so I need that to be the class so it replaces it with the correct image…but still don’t know how to center that

            1 Reply Last reply Reply Quote 0
            • W Offline
              wegz15
              last edited by

              well I got it to work. I ended up having to set the left border to 50% in the css.

              1 Reply Last reply Reply Quote 0
              • 1
              • 2
              • 2 / 2
              • 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