MagicMirror² v2.13.0 is available! For more information about this release, check out this topic.

Table width, how do I increase it?



  • How do I increase the text width on my module? I want to show the album art and info, but the info gets broken up into multiple lines.

    Below is part of my code and a picture of what happens. The “meta_html” is the table I want to change

    	getDom: function() {
    		var wrapper = document.createElement("div");
    		var albumart_html = '';
    		var meta_html = '';
    		var html = "<div>";
    
    		albumart_html += "<div><div><img src="&quot;+ this.image +&quot;" /></div></div>";
    		meta_html += "<div><table><tr><td>"+this.title+"</td></tr><tr><td>"+this.artist +"</td></tr><tr><td>"+this.album+"</td></tr></table></div>";
    		html += albumart_html;
    		html += meta_html;
    		
    		html += "</div>";
    		wrapper.innerHTML = html;
    
    		//var wrapper = document.createElement("div");
    		//wrapper.innerHTML = this.config.text;
    		return wrapper;
    
    		
    	},
    

    9d726ef9-08f2-4773-9b2a-7e51dbcbfdae-image.png


  • Module Developer

    I set my table with a variable width using a percentage for my module.

    https://www.w3schools.com/tags/tag_table.asp is a good place to start, and you can then adjust things like the <td> tag as needed.

    jsfiddle.net is a good place to play, as well, FYI. You can build your JS up and get it working, then all ya gotta do is translate to MM spec.


Log in to reply