Custom character sheet and fieldset feature - style

Hello,

I didn't find any information on the forum, so I'm asking here.

I am requiring your help about the fieldset feature. I want to adapt the new inputs style added by the fieldset with the previous cases, but it's like impossible, even with the [class], or the [name] tag on the CSS tab. My character sheet is in French, but that's not important here.

HTLM

            <div class="sheet-row skills">
   
                <h3 class="sheet-titre-4">Capacités</h3><h4 class="sheet-sous-titre-1">(Vous avez 40 % à répartir entre 3 capacités.)</h4>

                <div class="sheet-col">

                    <input style="margin-bottom: 1px" type="text" placeholder="Première technique" name="attr_char_skill_Nom_1"/><input style="margin-bottom: 1px" type="text" placeholder="Effet" name="attr_char_skill_Effet_1"/><br />
                    <input style="margin-bottom: 1px" type="text" placeholder="Deuxième compétence" name="attr_char_skill_Nom_2"/><input style="margin-bottom: 1px" type="text" placeholder="Effet" name="attr_char_skill_Effet_2"/><br />
                    <input style="margin-bottom: 1px" type="text" placeholder="Troisième aptitude" name="attr_char_skill_Nom_3"/><input style="margin-bottom: 1px" type="text" placeholder="Effet" name="attr_char_skill_Effet_3"/><br />

                    <fieldset class="repeating_matos">
                        <input style="margin-bottom: 1px" type="text" class="repeating_skill_Nom" placeholder="Nouvelle technique" name="attr_char_skill_Nom_4"/><input style="margin-bottom: 1px" type="text" class="repeating_skill_Effet" placeholder="Effet" name="attr_char_skill_Effet_4"/><br />
                    </fieldset>

                </div>

            </div>

And the CSS :

.charsheet .sheet-skills .sheet-col input[name*="attr_char_skill_Nom"],
.repeating_matos input.repeating_skill_Nom{
    width: 30%;
}

.charsheet .sheet-skills .sheet-col input[name*="attr_char_skill_Effet"],
.repeating_matos input.repeating_skill_Effet{
    width: 67%;
}

What it looks like today :

I tried many many things, like:

input.repeating_skill_Nom{
    width: 30%;
}

or even

.charsheet .sheet-skills .sheet-col input[name*="attr_char_skill_Nom"],
.charsheet .sheet-skills .sheet-col .repeating_matos .repeating_skill_Nom input[name*="attr_char_skill_Nom"],
input.repeating_skill_Nom{
    width: 30%;
}

.charsheet .sheet-skills .sheet-col input[name*="attr_char_skill_Effet"],
.charsheet .sheet-skills .sheet-col .repeating_matos .repeating_skill_Effet input[name*="attr_char_skill_Effet"],
input.repeating_skill_Effet{
    width: 67%;
}

but impossible to change anything and I don't understand why... So, is it even possible to modify the style of this feature?? I'm getting crazy :O

Thanks for your help!

It's done in a special way due to how roll handles filedset and creates the repeating sections.

The wiki have some example on styling repeating sections: https://wiki.roll20.net/CSS_Wizardry#Styling_Repeating_Sections

I recently added a fairly simple sheet to Roll20 where I'm styling some repeating sections, which you can also take a look at as an working example: https://github.com/Roll20/roll20-character-sheets/tree/master/Quest-rpg

With character sheet creation, it's always best to check the community documentation in general: https://wiki.roll20.net/Building_Character_Sheets

Can you modify inputs outside of the div the same way?

Often with inputs in roll20, it helps to put the type in the css, like

input[type="text"].repeating_skill_Nom{
    width: 30%;
}

Or increasing specificity even more

.charsheet input[type="text"].repeating_skill_Nom{
    width: 30%;
}

.charsheet input[type="text"].repeating_skill_Nom{
    width: 120px;
}

When I have multiple items in a repeating section to style together, I often put them inside a div, and put a class on that div. It makes it fairly easy to apply styling. Like:

  <fieldset class="repeating_matos">
    <div class="my-style">
     <input style="margin-bottom: 1px" type="text" class="repeating_skill_Nom" placeholder="Nouvelle technique" name="attr_char_skill_Nom_4"/><input style="margin-bottom: 1px" type="text" class="repeating_skill_Effet" placeholder="Effet" name="attr_char_skill_Effet_4"/>
    </div>
  </fieldset>

Thank you very very much for your answers!

I tried your code lines, GiGs, and the absolute values in pixel works! Thank you!

But, to be honest, that annoys me a bit as I'm looking for the % value of the available dimensions, as people may have larger screens or want larger character sheets, so things with pixel values may sometimes appear broken.

Do you know if it's even possible? :x

Maybe! The 30% is 30% of something - but there are multiple layers of containers in a repeating section that might have different dimensions. With a bit of investigative work you could find the dimensions of those hidden containers and find the correct % you need to use.

Finiariel said:

But, to be honest, that annoys me a bit as I'm looking for the % value of the available dimensions, as people may have larger screens or want larger character sheets, so things with pixel values may sometimes appear broken.

Do you know if it's even possible? :x

This should be possible, and I'm sure there are sheet that does this to some extent, I just haven't spent time on learning this.

• Using min-width and max-width could be useful?
• Also check out the other options to px and percentages: What’s The Difference Between PX, EM, REM, %, VW, and VH?

I'm not that familiar with using the others, but most of them have some benefits over always using pixels.

Well, knowing a part of my CSS already uses the % without any problems, it makes me crazy that the <fieldset> features struggles that hard with it...

I tried to separate the fieldset with the previous lines (as on my screenshot), it's not working. I even tried to use the div:

div.mes-capacites{
    max-width: 100%;
    width: 100%;
}

.charsheet .sheet-skills .sheet-col input[name*="attr_char_skill_Nom"]{
    max-width: 100%;
    width: 30%;
}

.charsheet .sheet-skills .sheet-col input[name*="attr_char_skill_Effet"]{
    max-width: 100%;
    width: 67%;
}

.repeating_capacites input.repeating_capacites_Nom{
    max-width: 100%;
    width: 20%;
}

.charsheet input.repeating_capacites_Effet{
    max-width: 100%;
    width: 47%;
}

The fun fact is that:

• The very first version, WITHOUT the fieldset:

.charsheet .sheet-skills .sheet-col input[name*="attr_char_skill_Nom"]{
    width: 30%;
}

.charsheet .sheet-skills .sheet-col input[name*="attr_char_skill_Effet"]{
    width: 67%;
}

• And this version on absolute values WITH the fieldset

.charsheet .sheet-skills .sheet-col input[name*="attr_char_skill_Nom"],
.charsheet input.repeating_capacites_Nom{
    width: 200px;
}

.charsheet .sheet-skills .sheet-col input[name*="attr_char_skill_Effet"],
.charsheet input.repeating_capacites_Effet{
    width: 400px;
}

are both perfectly available. But the fieldset is really...

And I had a look at your website on the values, but the % is the only one that interests me, as it said :

• %: Relative to the parent element.
  
• % is similar to VW and VH but it is not a length that is relative to viewport’s width or height. Instead, it is a percentage of the parent element’s width or height. Percentage units are often useful to set the width of margins, as an example.
• Column Widths: If you edit the layout of an Elementor Column, you’ll notice that there is only one width sizing unit available – %. Column widths only work well and responsively when using percentages, so no other option is given.

I'm pretty sure I'm doing mistakes in CSS, as I'm not used to it... But of what I do understand, I... don't understand what's is the problem :D

To understand the structure of a fieldset you need to look at it on a live character sheet page, and use your browser's inspector tools. Rightclick on something inside the fieldset and select Inspect, or Inspect Element, or something with the word Inspect in.

You'll find there that each row of the repeating section is in a div with the repitem class, and all rows are inside the repcontainer class. None of these are actually inside the fieldset class. 

The structure of this layout might be making your % width style work a bit weirdly. You may have to specify the repitem or repcontainer in your CSS style to gett he width % to work properly. 

I've never used a width % in a repeating section, but that's where I'd look if something is iffy.

Thank you very much for your help. It was precious!

The best I could do is to use the absolute values in pixel, in the CSS... Still, it pretty works, but I hope no one would have to expand the character sheet :D

HTML (and I don't even know if that's correct as the only one example in https://wiki.roll20.net/CSS_Wizardry#Styling_Repeating_Sections made the fieldset outside the repcontainer/repitem div (and I don't understand at all what it's supposed to do, because when I did it, I saw added buttons that doesn't work XDDD))

            <div class="sheet-row skills">
   
                <h3 class="sheet-titre-4">Capacités</h3><h4 class="sheet-sous-titre-1">(Vous avez 40 % à répartir entre 3 capacités.)</h4>

                <div class="sheet-col">

                    <input style="margin-bottom: 1px" type="text" placeholder="Première technique" name="attr_char_skill_Nom_1"/>
                    <input style="margin-bottom: 1px" type="text" placeholder="Effet" name="attr_char_skill_Effet_1"/><br />

                    <input style="margin-bottom: 1px" type="text" placeholder="Deuxième compétence" name="attr_char_skill_Nom_2"/>
                    <input style="margin-bottom: 1px" type="text" placeholder="Effet" name="attr_char_skill_Effet_2"/><br />

                    <input style="margin-bottom: 1px" type="text" placeholder="Troisième aptitude" name="attr_char_skill_Nom_3"/>
                    <input style="margin-bottom: 1px" type="text" placeholder="Effet" name="attr_char_skill_Effet_3"/><br />

                    <div class="repcontainer" data-groupname="repeating_my-repeating-section">
                        <div class="repitem">
                            <fieldset class="repeating_capacites">
                                <div class="mes-capacites">
                                    <input style="margin-bottom: 1px" type="text" placeholder="Nouvelle technique" name="attr_char_skill_Nom_4"/>
                                    <input style="margin-bottom: 1px" type="text" placeholder="Effet" name="attr_char_skill_Effet_4"/><br />
                                </div>
                            </fieldset>
                        </div>
                    </div>
                </div>
            </div>

CSS

.charsheet .repcontainer .repitem {
    width: 810px;
}

.charsheet .sheet-skills .sheet-col input[name*="attr_char_skill_Nom"]{
    width: 30%;
}

.charsheet .sheet-skills .sheet-col input[name*="attr_char_skill_Effet"]{
    width: 60%;
}

Oh and, there's something strange in the live character sheet. I have some space I don't know where it comes from, as it's not in my code. Is it contained in the repcontainer/repitem construction itself, you think?

Oh and, there's something strange in the live character sheet. I have some space I don't know where it comes from, as it's not in my code. Is it contained in the repcontainer/repitem construction itself, you think?

Those likely comes from the "col" class you're using, it's part of roll20's built in CSS classes that that can be used to create simple rows and columns, and it seems likely they introduce some things of their own to do so. If you don't want to use roll20's column/row system, just avoid using those name. More info:

• https://wiki.roll20.net/Building_Character_Sheets#Roll20_columns.2Frows