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

Help with CSS grid

April 25 (3 months ago)
Maïlare
Pro
Sheet Author
API Scripter

Hello,

My code for CSS grid doesn't work and I don't know why. I don't see any error in my code, can you help me please ?

Here the pastebin link of my code

HTML Code

CSS Code

Thanks for you help.


April 25 (3 months ago)
Vialmada
Pro
Sheet Author

Try it after removing "&family=MedievalSharp" from the Font Import line. 'Tis a guess based on Roll20 article: https://wiki.roll20.net/Building_Character_Sheets

The important section is Google Fonts:

"NOTE: Do NOT use any fonts that contain eval in the name (e.g. MedievalSharp). That string (even when in the middle of a font name) causes security issues with Roll20 and the CSS will get thrown out completely."

April 25 (3 months ago)
Maïlare
Pro
Sheet Author
API Scripter

Hello. I have removed it but it's not the problem.

April 25 (3 months ago)

Edited April 25 (3 months ago)
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator

Using your code without any edits, it appears to work. Here's the layout I get by putting that code into a custom game:

That is the layout I'd expect to see based on my reading of your css.

April 25 (3 months ago)

Edited April 25 (3 months ago)
Maïlare
Pro
Sheet Author
API Scripter

Hello Scott. It does'nt work because in my grid-template-area, I have make this :

/*PC wrappers*/
    .pc-principal {
        display: grid;
        gap: 1px;
        grid-template-columns: repeat(2, 50%);
        grid-auto-rows: minmax(50px, auto);
        grid-template-areas:
            "perso      perso"
            "carac      health"
            "bourse     honneur"
            "attributs  affDiv"
            "attributs  carRace"
            "resMag     resMag"
            "charge     charge"
            "competence competence";
    }

The "Santé" box (health in the grid-template-area) should be next to the "Caractéristiques" box (carac in the grid-template-area).

April 25 (3 months ago)
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator

ah! sorry, the content of the carac section threw me because it looked placed correctly, missed that it was stretched out. The issue is that your tab control display has a higher specificity than the pc-principal styling, so it is forcing it to be display: block. To fix the issue, I'd change this section of your css:

    /*PJ (PC) sheet*/
    .charsheet .pc-principal,
    .charsheet .pc-equipment,
    .charsheet .pc-grimoire,
    .charsheet .pc-necromancy,
    .charsheet .pc-notes {
        display: none;
    }
 
    .charsheet .tabstoggle[value="PC_principal"] ~ div.pc-principal,
    .charsheet .tabstoggle[value="PC_equipment"] ~ div.pc-equipment,
    .charsheet .tabstoggle[value="PC_grimoire"] ~ div.pc-grimoire,
    .charsheet .tabstoggle[value="PC_necromancy"] ~ div.pc-necromancy,
    .charsheet .tabstoggle[value="PC_notes"] ~ div.pc-notes {
        display: block;
    }

to be this:

.charsheet .tabstoggle:not([value="PC_principal"]) ~ div.pc-principal,
    .charsheet .tabstoggle:not([value="PC_equipment"]) ~ div.pc-equipment,
    .charsheet .tabstoggle:not([value="PC_grimoire"]) ~ div.pc-grimoire,
    .charsheet .tabstoggle:not([value="PC_necromancy"]) ~ div.pc-necromancy,
    .charsheet .tabstoggle:not([value="PC_notes"]) ~ div.pc-notes {
        display: none;
    }

And apply the same logic to all your other display controls. 

This will ensure that your tab display logic will only override the display setting of that tab's content when it needs to be hidden.


Also, for your grid setup, I'd recommend using 1fr instead of 50% for your column widths. This will function nearly identically, but will take the size of your gap into account as well.

April 25 (3 months ago)
Maïlare
Pro
Sheet Author
API Scripter

I have modified it and it works.

Thanks Scott.