Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

Grid Layout (CSS)

July 13 (6 years ago)

Edited July 13 (6 years ago)

Hello everyone o/
It's since a little time i try to use the grind layout of css : https://www.w3schools.com/css/css_grid.asp


I find a thread here who speak about this ... but i not really understand the solution they found :c 
https://app.roll20.net/forum/post/5919503/no-css-grid-layout-support

HTML:


CSS:


Preview:


If it's just CSS why the it's look like the display grid dont work ? :c 
The problem is from "grid-template-column" ? the CSS Styling not show it in color like he not know it.

Edit1: Sorry it's look like one part of the message is not here . I write it again :v
Edit2: It's good now o/ 

July 13 (6 years ago)
Jakob
Sheet Author
API Scripter

Power to the grid! (to anyone wondering: looks like the "sheet-" in front of classes in the CSS was missing)

July 13 (6 years ago)
Finderski
Pro
Sheet Author
Compendium Curator

The other thing I will mention...looks like the preview is from the preview tab and not from an actual game (this is an assumption based on the gray background in the preview); the preview tab is notoriously unreliable, and if it doesn't look right on that tab, you're better off saving the sheet and loading the game to see what it looks like in reality.

July 13 (6 years ago)

Edited July 13 (6 years ago)


Jakob said:

Power to the grid! (to anyone wondering: looks like the "sheet-" in front of classes in the CSS was missing)

But i never named a attribute or a class in "sheet-" ?it's a naming rule specific to roll20 ?  

Finderski said:

The other thing I will mention...looks like the preview is from the preview tab and not from an actual game (this is an assumption based on the gray background in the preview); the preview tab is notoriously unreliable, and if it doesn't look right on that tab, you're better off saving the sheet and loading the game to see what it looks like in reality.


It's look exactly the same as the preview 

Edit1: SORRY ! 



I will try to fix my problem with what i forget to Read. :c... The true here is i just clicked on CSS Wizardry xD 

July 13 (6 years ago)

Edited July 13 (6 years ago)
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator


Finderski said:

The other thing I will mention...looks like the preview is from the preview tab and not from an actual game (this is an assumption based on the gray background in the preview); the preview tab is notoriously unreliable, and if it doesn't look right on that tab, you're better off saving the sheet and loading the game to see what it looks like in reality.

Yep, although grid does work flawlessly in the preview window.


DamonReborn
 said:

The problem is from "grid-template-column" ? the CSS Styling not show it in color like he not know it.

The code highlighter doesn't recognize grid syntax, but the css is still valid.

July 13 (6 years ago)
Finderski
Pro
Sheet Author
Compendium Curator

Yeah, I'm not saying Preview tab is always wrong, just that if it doesn't look right in the Preview tab you should check in the actual game, too. :)

July 13 (6 years ago)
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator

Definitely good advice.

Thank you for your advice , i think the grid work now if i dont forget to add sheet- on every name o/ 
But i probably post again here if got stuck on something with this grid :C 
July 20 (6 years ago)

Edited July 20 (6 years ago)

Thx for your help, i'm almost done with the sheet o/ 
I just need to adjust some point ,like change the size and color of the title for each grid item.(i know how to do it then it's not a problem o/)
And i want to add a SUM of all the row of "Valeurs" from the "Inventaires" , i dont know if it's possible since it's in a repeating section ? and how do it ?
I can do a other post if it's needed ? because the question is totally different of the Title now :c 



Nobody know if it's possible ? 

July 22 (6 years ago)
GiGs
Pro
Sheet Author
API Scripter

It is possible, but you need to use a sheet worker.

I'll dig up the code for you when i have time, if no-one else answers.