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.1k 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.
    • W Offline
      wegz15
      last edited by wegz15

      Hello,

      I’m trying to modify someones weather app to make it span across the bottom of the right side of the page. The initial module looks like it was just copy pasted from the default weather forecast module. It is the MMM-weatherforecast by jharttech. I’ve reach out to him with no response, so I’m asking here. What I want is basically 3 rows by 2 cells with the first row being the day spanning 2 cells, second being a weather icon spanning 2 cells, and the third row being the hi and low temperature. I’ve got almost everything figured out except getting the icon centered between the two cells. If I take out the code he added and add test text the text is centered between two cells. I cannot figure this out. I’ve tried colspan, changing them between tr, td, and span. Nothing I am doing seems to be working right.

        var table = document.createElement("table");
      		table.className = this.config.tableClass;
      
      		switch (this.config.layout){
      		case "horizontal":
      			for (var f in this.forecast) {
      				var forecast = this.forecast[f];
      
      				var row = document.createElement("td");
      				if (this.config.colored) {
      					row.className = "colored";
      				}
      				table.appendChild(row);
      
      				var dayCell = document.createElement("td");
      				dayCell.colSpan = 2;
      				dayCell.className = "day";
      				dayCell.innerHTML = forecast.day;
      				row.appendChild(dayCell);
      				
      				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 degreeLabel = "°";
      				if(this.config.scale) {
      					switch(this.config.units) {
      					case "metric":
      						degreeLabel += " C";
      						break;
      					case "imperial":
      						degreeLabel += " F";
      						break;
      					case "default":
      						degreeLabel = "K";
      						break;
      					}
      				}
      
      				if (this.config.decimalSymbol === "" || this.config.decimalSymbol === " ") {
      					this.config.decimalSymbol = ".";
      				}
      
      				var maxTempCell = document.createElement("td");
      				maxTempCell.innerHTML = "Hi:" + forecast.maxTemp.replace(".", this.config.decimalSymbol) + degreeLabel;
      				maxTempCell.className = "max-temp";
      				row.appendChild(maxTempCell);
      
      				var minTempCell = document.createElement("td");
      				minTempCell.innerHTML = "Lo:" + forecast.minTemp.replace(".", this.config.decimalSymbol) + degreeLabel;
      				minTempCell.className = "min-temp";
      				row.appendChild(minTempCell);
      
      				if (this.config.showRainAmount) {
      					var rainCell = document.createElement("td");
      					if (isNaN(forecast.rain)) {
      						rainCell.innerHTML = "";
      					} else {
      						if(config.units !== "imperial") {
      							rainCell.innerHTML = parseFloat(forecast.rain).toFixed(1) + " mm";
      						} else {
      							rainCell.innerHTML = (parseFloat(forecast.rain) / 25.4).toFixed(2) + " in";
      						}
      					}
      					rainCell.className = "align-right bright rain";
      					row.appendChild(rainCell);
      				}
      
      S 1 Reply Last reply Reply Quote 0
      • S Offline
        sdetweil @wegz15
        last edited by

        @wegz15 wrap that cell in a div, which is 3 wide, the center the 2 cell image in the div

        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

          How exactly would I do that? I’m still trying to learn javascript. I’ve watched several videos and most of it has not clicked yet.

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

            @wegz15 use the same code u have to make a div object, and then append the image to that, and append the DIV to the dom

            var iconCell = document.createElement("tr");
            				iconCell.colSpan = 3;
            				iconCell.style.textAlign = "center";
            				iconCell.className = "bright-weather-icon";
            				row.appendChild(iconCell);
            var iconDiv = document.createElement("div");
            var icon = document.createElement("span");
            				icon.style.textAlign = "center";
            				icon.className = "wi-weathericon " + forecast.icon;
            				iconDiv.appendChild(icon);
                                            iconcell.appendChild(iconDiv)
            

            Sam

            How to add modules

            learning how to use browser developers window for css changes

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

              @sdetweil that does not load anything. I copied and pasted it as you wrote it. It just says “Loading…”

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

                So, I got it to load. There was a capitalization mistake. It still won’t center. Looking at it in the inspector I noticed that the class name is the cell image I want to display. How would I get the class to be standardized and the source html to change based on the weather? So there is basicall nothing in the cell for it to center. The colspan attribute does not show up as well.

                <tr class= "bright-weather-icon" style="text-align: center;">
                   <div>
                       <tr class="wi-weathericon night-cloudy" style="text-align: center;"> </tr>
                   </div>
                </tr>
                
                S 1 Reply Last reply Reply Quote 0
                • 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
                        • 1
                        • 2
                        • 1 / 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