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

[mongo116]

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:

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) :

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

[mongo116]

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);