Aligning Tile Data on Dashboard - How to Top Align Rows

🛎️ Get Help
1

Probably a simple answer, but how do you TOP Align the data/rows in these tiles that I have in my Dashboard? I want the rows in the various tiles to align. Several of the tiles are now CENTER aligning the rows/data in the tile. Where do I insert the CSS to correct this? Can you provide the example for me? Thanks,

I tried to add:
}
#tile-109[style="background-position"] {*
** background-position: top;**
}

This did not work. It appears I am trying to Top align the table in the tile. Perhaps the "tbody". Not sure. Help?

Ron

Hubitat Desktop Screenshot II
Hubitat Desktop Screenshot II891×775 41.3 KB

Hubitat Desktop Screenshot
Hubitat Desktop Screenshot2746×1909 392 KB

2

I bookmarked this to look at this later today, if you can wait... I just need to look at the DIV element that the attribute contents sits in and whether we can add an alignment style element through CSS. One issue may be whether the DIV sits within another and is condensed, meaning it may be hard to get the contents at the top of the tile.

If you are familiar with the Developer Tools in your browser you could likely work out the element references needed in CSS by traversing the contents of the dashboard. It's not a bad exercise to go through to familiarise yourself with the structure.

3

I can wait. No hurry. Thanks. I've tried inspecting the page and all I see is the tile number (107 in this case) and a table. I'm not a developer. Seems like others would have top aligned data tables/rows in dashboard tiles on Hubitat. Any help is appreciated.

Thanks,

Ron

Hubitat Desktop Screenshot IIi
Hubitat Desktop Screenshot IIi2125×739 158 KB

Another inspection screenshot for tile #107 on my Dashboard. Not sure how to modify the tables position in the tile?

Hubitat Desktop Screenshot IV
Hubitat Desktop Screenshot IV1187×777 95.9 KB

4

Nice work drilling down to the tile. Hover over the tile-contents div, two rows below tile div you have highlighted on the right, it should hopefully highlight the section of the tile on the left in the actual dashboard, that will give you an idea of whether the div that contains the TB table is a "snug" fit for the table, or if it extends up to the top of the tile.

5

Ok, you got me interested, give me a moment :slight_smile:

6

Hubitat Desktop Screenshot V
Hubitat Desktop Screenshot V2466×1391 511 KB

OK Not sure what you meant but it appears that the table "body" is not the full tile.

7

And I thought that this was a simple NOOB question LOL

8

Yeah, not as simple as it could be. I have setup an editor for things like this, but don't include this at the moment. Too many other projects to keep my occupied.

It's not the table contents that we need to align, it's outside of that... Though I can't quite get it to work as I expect.... I'll keep trying...

9

No problem. Just a cosmetic nice to have. Thanks

10

Try this, adjusting the tile number to suit:

#tile-3 .tile-primary { visibility: visible;
position: absolute;
top: 0%; }

Stolen, as many CSS solutions are, from the Noobs CSS topic, in this case the positioning example:

2 Likes
11

This worked. Many thanks!

Ron

Hubitat Desktop Screenshot VI
Hubitat Desktop Screenshot VI2394×1563 297 KB

1 Like
12

I thought Tile Builder had an option to force this, I guess not.

@garyjmilne I know away for awhile still, just @ing you for future reference

1 Like
13

There is some standard CSS code available in the Rooms module that makes sure that TB content expands to completely fill the tile container. Not in a position to give specifics at the moment but it’s in there.

2 Likes
14

No worries boss, enjoy your time away :wink:

1 Like
15

I'm using Tile Builder for my tiles. Are you talking about the rows area? Not sure what "rooms" module refers to?

Ron

16

There are 5 unique modules in Tile Builder, one of which is called Rooms. If you look at the very first post in this thread you will see each of the 5 discussed with examples.

17

This was the code I was referring to that might be useful.

/* This CSS generated by Tile Builder Rooms version: Tile Builder Rooms v1.1.0 (9/21/23 @ 08:24 PM) /
/ Make the tile background transparent and allow all the tiles to overflow to adjacent tiles./
[class='tile']{background-color:rgba(128,128,128,0) !important; overflow:visible !important}

/* Hide all of the Tile Titles. /
[class='tile-title']{visibility:hidden}

/* Make sure the contents expand to fill the entire tile and eliminate the gaps between the tiles. If there are still gaps make sure setting Gridgap on Layout tab is set to a 0 between quotation marks! /
[class='tile-contents']{width:calc(100% - var(--myRoomGap) ) !important; height:calc(100% - var(--myRoomGap) ) !important}

/* Make sure the image tiles are configured correctly. The image fills the tile and the tiles are place in the far background. */
.tile.image .inset-auto img {object-fit:fill}
.tile.image {background-color: rgba(128,128,128,0) !important; z-index:-3 !important}

/* Hide any classes using the 3d_rotation symbol/class and then append some visible text which has the effect of replacing it. 3d_rotation is the first in the picklist so it has been picked for convenience./
[class='3d_rotation']{visibility:hidden}
[class*='3d_rotation']::after{color:green; visibility:visible !important;content:'\00A0\00A0\00A0\00A0'; transform:translateX(-100%) !important; position: absolute; outline: 2px dotted blue}

/* Tile Builder Section 2 - Tile Classes Start Here */
:root {--myUnderline-color:purple; --myGreen-color:lime; --myRed-color:red; --myOrange-color:orange; --myRoomGap:0px;}

1 Like