Help with tables?


  • Module Developer

    trying to throw together a little module to monitor my openthermgateway.

    Running into a layout problem whjich i can’t get my head around. Keep in mind i’m not experienced in html/js coding so be nice

    The below code generates a table of which the second column is spanned over all rows (2). However on the second row the result is as the below pic. The second column on the second row is displayed before the second (rowspanned) column on the first row.

    Am i overlooking anything in my code?

    Thanks!
    Arrow depicts where i would expect the image to appear…

    0_1464076591634_openthermtable.png

    
    		var table = document.createElement("table");
    		table.className = "small";
    
    		var row = document.createElement("tr");
    		table.appendChild(row);
    
    		var homeIconCell = document.createElement("td");
    		homeIconCell.className = "fa fa-home";
    		row.appendChild(homeIconCell);
    
    		var roomTemperatureCell = document.createElement("td");
    		roomTemperatureCell.className = "large bright";
    		roomTemperatureCell.setAttribute("rowspan", "0");
    		roomTemperatureCell.innerHTML = this.roomTemperature;
    		row.appendChild(roomTemperatureCell);
    
    		var setpointIconCell = document.createElement("td");
    		setpointIconCell.className = "fa fa-home";
    		row.appendChild(setpointIconCell);
    
    		var setPointCell = document.createElement("td");
    		setPointCell.className = "setpoint";
    		setPointCell.innerHTML = this.setPoint;
    		row.appendChild(setPointCell);
    
    		var chPressureIconCell = document.createElement("td");
    		chPressureIconCell.className = "wi wi-barometer";
    		row.appendChild(chPressureIconCell);
    
    		var chPressureCell = document.createElement("td");
    		chPressureCell.innerHTML = this.chPressure;
    		row.appendChild(chPressureCell);
    		
    		var row = document.createElement("tr");
    		table.appendChild(row);
    		
    		var flameIconCell = document.createElement("td");
    		flameIconCell.className = "align-left bright wi " + this.flame;
    		row.appendChild(flameIconCell);
    		
    		var OutsideIconCell = document.createElement("td");
    		OutsideIconCell.className = "fa fa-image";
    		row.appendChild(OutsideIconCell);
    
    		var outsideTempCell = document.createElement("td");
    		outsideTempCell.className = "outsideTemp";
    		outsideTempCell.innerHTML = this.outsideTemperature;
    		row.appendChild(outsideTempCell);
    		
    		
    		wrapper.appendChild(table);
    
    


  • Can you show us the generated html? And I think rowspan="0"is not cross-browser compatible. You should use rowspan="2".


  • Module Developer

    @witschi87

    Thanks for your reply. The rowspan="2"didn’t make any difference unfortunately.

    Seems to have something to do with the fa ioons…

    Here’s the html:

    <div>
    	<div>
    		<table>
    			<tr>
    				<td>
    				</td><td>18.1</td>
    				<td>
    				</td><td>17.50</td>
    				<td>
    				</td><td>0.90</td>
    			</tr>
    			<tr>
    				<td>
    				</td><td>
    				</td><td>15.06</td>
    				<td>
    				</td><td>
    				</td><td>
    				</td><td>
    			</td></tr>
    		</table>
    	</div>
    </div>```


  • Personally, I wouldn’t use a table for this. I would use divs and CSS styling to get what you want. Could even have a parent div (in place of table .small) and make it relative then absolute position your children if you’d like.

    As far as your current structure, what is the name of the icon that you want moved? fa-tree? I can’t tell what that is supposed to be.


  • Module Developer

    yeah, the fa-tree (which is a icon of a tree in fontawesome) needs to move. …
    This issue only happens when the columns contain icons. You can define as many as you want, they all appear before the rowspanned one. As soon as i add a td with innerHTML text it appears in the correct place… As stated earlier i’m not all that versed in all this…

    I’ll have a look at using divs…

    Thanks!



  • @RedNax Very simple example :p

    http://codepen.io/anon/pen/jrNEzy

    Edit: I also did not use position: relative / position: absolute for this. I’m not sure, but that might be an even better way to go.

    Also, I have no idea if this works like I planned in any other browser. I use chrome, so meh.


  • Module Developer

    Well you did help me solve it, but not using divs.

    Turned out i had to put the icon in an inside the and not directly in the

          </td><td><i> </i></td>
    

    instead of

          <td></td>
    

    0_1464160002764_opemtherm2.png


Log in to reply
 

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