[Solved] Data layout - icon and text in same cell with spacing


  • Module Developer

    Hi,

    I’m nearly finished with my MMM-Hive module, but just have one issue that I cannot get my head around.

    With the current code, the layout looks like this:
    0_1501308995994_frost_protect1.png

    Notice the snowflake icon is right next to the Frost Protect Enabled text.

    I would like it to look like this (proper icon spacing next to the text and also in line with the icon above) :
    0_1501309041342_frost_protect2.png

    This is the relevant code:

    		var targetTemperatureRow = document.createElement("tr");
    		if (this.config.showNext == true) {
    		var targetTemperatureCell = document.createElement("td");
    		targetTemperatureCell.colSpan = 5;	
    			if (this.insideTarget >= 1) {
    					targetTemperatureCell.innerHTML = "Frost Protect Enabled";
    					targetTemperatureCell.className = "light dimmed xsmall";
    					var frostCell = document.createElement("span");
    					frostCell.setAttribute("aria-hidden","true");
    					frostCell.className = "fa fa-snowflake-o";
    					frostCell.style.cssText="color:white;";
    					targetTemperatureCell.appendChild(frostCell);
    					targetTemperatureRow.appendChild(targetTemperatureCell);
    					}
    			else {	
    				targetTemperatureCell.innerHTML = this.config.targetTempText + " " + this.insideTarget + this.config.temperatureSuffix;
    				targetTemperatureCell.className = "light xsmall";
    				targetTemperatureRow.appendChild(targetTemperatureCell);
    				}}
    
    		table.appendChild(temperatureRow);
    		table.appendChild(targetTemperatureRow);
    

    I was looking at using flexbox, but I’m loathe to spend another x amount of hours and just want to get this module finished now :)

    If anyone has any ideas on the above, it will be greatly appreciated, and might prevent me from pulling any more hair out!

    Thanks


  • Module Developer

    I’ve been ‘googling’ since posting and have found the solution (may not be the best solution, but it is now working).

    I’ll put it here as it may help someone, or someone else may have a better suggestion:

    targetTemperatureCell.insertBefore(frostCell, targetTemperatureCell.firstChild);
    

Log in to reply
 

Looks like your connection to MagicMirror Forum was lost, please wait while we try to reconnect.