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.

    MMM-cryptocurrency side by side top bar

    Scheduled Pinned Locked Moved Troubleshooting
    5 Posts 2 Posters 2.1k Views 2 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.
    • S Offline
      StacheEnthusiast
      last edited by

      Currently, the currencies are displaying vertically with lots of padding. How can I alter the css to have them displaying side by side in the top bar?

      This is what it currently looks like.
      Current State

      And this is what I would like it to look like
      What I Would Like

      Any help is greatly appreciated!

      S 1 Reply Last reply Reply Quote 0
      • S Offline
        StacheEnthusiast @StacheEnthusiast
        last edited by

        @StacheEnthusiast

        Update: I have taken the cowards way out and trimmed the currencies and duplicated the modules config into different regions of the config.js like top_left, top_center, and top_right. This has solved the issue.

        N 1 Reply Last reply Reply Quote 0
        • N Offline
          ninjabreadman @StacheEnthusiast
          last edited by

          Hi @StacheEnthusiast, in getDom() at MMM-cryptocurrency.js:164 it creates the layout for the module in a table. It loops through, and for each currency creates a tr (table row) and td (table cell).

          It looks a bit like this:

          0_1520721637727_Screen Shot 2018-03-10 at 5.33.03 PM.png

          So I think if you take the tr creation outside of the loop, it should work:

          getDom: function() {
              if (this.config.displayType == 'logo' || this.config.displayType == 'logoWithChanges') {
                  this.folder = (this.config.coloredLogos ? 'colored/' : 'black-white/')
                  return this.buildIconView(this.result, this.config.displayType)
              }
              var data = this.result
          
              var wrapper = document.createElement('table')
              wrapper.className = 'small mmm-cryptocurrency'
          
              var tableHeader = document.createElement('tr')
              tableHeader.className = 'header-row'
          
              var tableHeaderValues = [
                  this.translate('CURRENCY'),
                  this.translate('PRICE')
              ]
              if (this.config.headers.indexOf('change1h') > -1) {
                  tableHeaderValues.push(this.translate('CHANGE') + ' (1h)')
              }
              if (this.config.headers.indexOf('change24h') > -1) {
                  tableHeaderValues.push(this.translate('CHANGE') + ' (24h)')
              }
              if (this.config.headers.indexOf('change7d') > -1) {
                  tableHeaderValues.push(this.translate('CHANGE') + ' (7d)')
              }
              for (var i = 0; i < tableHeaderValues.length; i++) {
                  var tableHeadSetup = document.createElement('th')
                  tableHeadSetup.innerHTML = tableHeaderValues[i]
                  tableHeader.appendChild(tableHeadSetup)
              }
              wrapper.appendChild(tableHeader)
          
              var trWrapper = document.createElement('tr') // moved from below
              trWrapper.className = 'currency' // moved from below
          
              for (i = 0; i < data.length; i++) {
                  var currentCurrency = data[i]
          //      var trWrapper = document.createElement('tr')
          //      trWrapper.className = 'currency'
                  var name
                  if (this.config.displayLongNames) {
                      name = currentCurrency.name
                  } else {
                      name = currentCurrency.symbol
                  }
          
                  var tdValues = [
                      name,
                      currentCurrency.price,
                  ]
                  if (this.config.headers.indexOf('change1h') > -1) {
                      tdValues.push(currentCurrency.percent_change_1h + '%')
                  }
                  if (this.config.headers.indexOf('change24h') > -1) {
                      tdValues.push(currentCurrency.percent_change_24h + '%')
                  }
                  if (this.config.headers.indexOf('change7d') > -1) {
                      tdValues.push(currentCurrency.percent_change_7d + '%')
                  }
          
                  for (var j = 0; j < tdValues.length; j++) {
                      var tdWrapper = document.createElement('td')
                      var currValue = tdValues[j]
                      // If I am showing value then set color
                      if (currValue.includes('%')) {
                          tdWrapper.style.color = this.colorizeChange(currValue.slice(0,-1))
                      }
                      tdWrapper.innerHTML = currValue
                      trWrapper.appendChild(tdWrapper)
                  }
          //      wrapper.appendChild(trWrapper)
              }
              wrapper.appendChild(trWrapper) // moved from above
              return wrapper
          },
          

          I’ve not run this code, as I don’t use MMM-cryptocurrency, but I think it should work. Just be careful when modifying your MMM-cryptocurrency.js to only replace the getDom() function. I also don’t think this should break any of the module’s functionality or styling.

          Worst case, you can always use git checkout MMM-cryptocurrency.js to revert to the original version.

          Problem with config or JavaScript? Copy/paste it into JSHint.
          Check out the detailed walkthroughs on install, config, modules, etc.

          S 1 Reply Last reply Reply Quote 1
          • S Offline
            StacheEnthusiast @ninjabreadman
            last edited by

            @ninjabreadman
            Wow, terrific answer and thank you. I will give this a shot and post what I come up with. My attempt at setting the tr widths from custom.css was getting no where.

            N 1 Reply Last reply Reply Quote 0
            • N Offline
              ninjabreadman @StacheEnthusiast
              last edited by

              @StacheEnthusiast You’re right. Tables don’t take styling very well; table rows (tr) insist on taking their own line, so there’s no easy way to move them beside each other. The proposed solution above should circumvent this, putting all the cells (td) into a single row.

              Problem with config or JavaScript? Copy/paste it into JSHint.
              Check out the detailed walkthroughs on install, config, modules, etc.

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