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

Help with tables?

Scheduled Pinned Locked Moved Solved Development
7 Posts 3 Posters 3.9k Views 3 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.
  • W Offline
    witschi87
    last edited by May 24, 2016, 8:56 AM

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

    R 1 Reply Last reply May 24, 2016, 9:09 AM Reply Quote 0
    • R Offline
      RedNax Module Developer @witschi87
      last edited by RedNax May 24, 2016, 9:11 AM May 24, 2016, 9:09 AM

      @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 class="module-content">
      	<div>
      		<table class="small">
      			<tr>
      				<td class="center fa fa-home"/>
      				<td rowspan="2" class="center large bright">18.1</td>
      				<td class="center fa fa-cog"/>
      				<td class="center">17.50</td>
      				<td class="center wi wi-barometer"/>
      				<td>0.90</td>
      			</tr>
      			<tr>
      				<td class="center bright wi wi-fire"/>
      				<td class="fa fa-tree"/>
      				<td class="center">15.06</td>
      				<td/>
      				<td/>
      				<td/>
      				<td/>
      			</tr>
      		</table>
      	</div>
      </div>```
      1 Reply Last reply Reply Quote 0
      • E Offline
        EoF
        last edited by May 24, 2016, 8:08 PM

        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.

        1 Reply Last reply Reply Quote 0
        • R Offline
          RedNax Module Developer
          last edited by May 24, 2016, 8:17 PM

          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!

          E 1 Reply Last reply May 24, 2016, 11:23 PM Reply Quote 0
          • E Offline
            EoF @RedNax
            last edited by EoF May 24, 2016, 11:25 PM May 24, 2016, 11:23 PM

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

            1 Reply Last reply Reply Quote 0
            • R Offline
              RedNax Module Developer
              last edited by May 25, 2016, 7:14 AM

              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><i class="fa fa-fire"> </td>
              

              instead of

                    <td class="fa fa-fire"></td>
              

              0_1464160002764_opemtherm2.png

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