Navigation

    MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord

    Table width, how do I increase it?

    Troubleshooting
    2
    2
    23
    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.
    • J
      jasondreher last edited by jasondreher

      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 class='player bright scrobbler-"+this.config.alignment+"'>";
      
      		albumart_html += "<div class='album-art-container'><div class='album-art'><img src='"+ this.image +"' width='150'></div></div>";
      		meta_html += "<div class='meta'><table class='small'><tr class='track-name bright'><td>"+this.title+"</td></tr><tr class='artist-name'><td>"+this.artist +"</td></tr><tr class='album-name dimmed'><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

      1 Reply Last reply Reply Quote 0
      • BKeyport
        BKeyport Module Developer last edited by

        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.

        1 Reply Last reply Reply Quote 0
        • 1 / 1
        • First post
          Last post
        Enjoying MagicMirror? Please consider a donation!
        MagicMirror created by Michael Teeuw.
        Forum managed by Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
        This forum is using NodeBB as its core | Contributors
        Contact | Privacy Policy