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

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

Scheduled Pinned Locked Moved Troubleshooting
2 Posts 1 Posters 1.2k Views 1 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.
  • M Offline
    mongo116 Module Developer
    last edited by mongo116 Jul 29, 2017, 11:17 AM Jul 29, 2017, 6:23 AM

    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

    1 Reply Last reply Reply Quote 0
    • M Offline
      mongo116 Module Developer
      last edited by Jul 29, 2017, 7:47 AM

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