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

Fieldset help

Hi, I cant seem to get my fieldset to display correctly.&nbsp; I can't for the life of me figure out why either. It displays like this: HTML &lt;div class="main"&gt; &lt;!--- HEADER ---&gt; &lt;div class="header"&gt; &lt;/div&gt; &lt;!--- TABS ---&gt; &lt;div class="tabs"&gt; &lt;input type="button" name="Character"&gt; &lt;input type="button" name="Monster"&gt; &lt;input type="button" name="Settings"&gt; &lt;/div&gt; &lt;!--- CHARACTER INFORMATION ---&gt; &lt;div class="character-details"&gt; &lt;label&gt;NAME&lt;/label&gt; &lt;input type="text" name="character-name"&gt; &lt;label&gt;ANCESTRY&lt;/label&gt; &lt;input type="text" name="character-ancestry"&gt; &lt;label&gt;CULTURE&lt;/label&gt; &lt;input type="text" name="character-culture"&gt; &lt;label&gt;ARCHETYPE&lt;/label&gt; &lt;input type="text" name="character-archetype"&gt; &lt;label&gt;REPUTATION&lt;/label&gt; &lt;input type="text" name="character-reputation"&gt; &lt;label&gt;AGE&lt;/label&gt; &lt;input type="text" name="character-age"&gt; &lt;label&gt;BUILD&lt;/label&gt; &lt;input type="text" name="character-build"&gt; &lt;label&gt;HAIR&lt;/label&gt; &lt;input type="text" name="character-hair"&gt; &lt;label&gt;HEIGHT&lt;/label&gt; &lt;input type="text" name="character-heigh"&gt; &lt;label&gt;EYES&lt;/label&gt; &lt;input type="text" name="character-eyes"&gt; &lt;/div&gt; &lt;!--- ATTRIBUTES ---&gt; &lt;div class="character-attributes"&gt; &lt;label&gt;HEALTH&lt;/label&gt; &lt;label&gt;RESOLVE&lt;/label&gt; &lt;label&gt;ARMOR&lt;/label&gt; &lt;label&gt;STRENGTH&lt;/label&gt; &lt;label&gt;AGILITY&lt;/label&gt; &lt;label&gt;WITS&lt;/label&gt; &lt;label&gt;EMPATHY&lt;/label&gt; &lt;div&gt;&lt;input type="number" name="character-health-max"&gt; &lt;input type="number" name="character-health-current"&gt;&lt;/div&gt; &lt;div&gt;&lt;input type="number" name="character-resolve-max"&gt; &lt;input type="number" name="character-resolve-current"&gt;&lt;/div&gt; &lt;div&gt;&lt;input type="number" name="character-armor-max"&gt; &lt;input type="number" name="character-armor-current"&gt;&lt;/div&gt; &lt;div&gt;&lt;input type="number" name="character-strength-max"&gt; &lt;input type="number" name="character-strength-current"&gt;&lt;/div&gt; &lt;div&gt;&lt;input type="number" name="character-agility-max"&gt; &lt;input type="number" name="character-agility-current"&gt;&lt;/div&gt; &lt;div&gt;&lt;input type="number" name="character-wits-max"&gt; &lt;input type="number" name="character-wits-current"&gt;&lt;/div&gt; &lt;div&gt;&lt;input type="number" name="character-empathy-max"&gt; &lt;input type="number" name="character-empathy-current"&gt;&lt;/div&gt; &lt;/div&gt; &lt;!--- CRITS ---&gt; &lt;div class="crits"&gt; &lt;div&gt;&lt;label class="crits-label"&gt;Type&lt;/label&gt;&lt;/div&gt; &lt;div&gt;&lt;label class="crits-label"&gt;Injury&lt;/label&gt;&lt;/div&gt; &lt;div&gt;&lt;label class="crits-label"&gt;Fatal&lt;/label&gt;&lt;/div&gt; &lt;div&gt;&lt;label class="crits-label"&gt;Time&lt;/label&gt;&lt;/div&gt; &lt;div&gt;&lt;label class="crits-label"&gt;Effects&lt;/label&gt;&lt;/div&gt; &lt;div&gt;&lt;label class="crits-label"&gt;Heal&lt;/label&gt;&lt;/div&gt; &lt;fieldset class="repeating_crits"&gt; &lt;div&gt;&lt;select class="crit-type-select"&gt; &lt;option value=""&gt;&lt;/option&gt; &lt;option value="Physical"&gt;Physical&lt;/option&gt; &lt;option value="Physical"&gt;Mental&lt;/option&gt; &lt;/select&gt;&lt;/div&gt; &lt;div&gt;&lt;input class="crit-injury-input" type="text" name="injury"&gt;&lt;/div&gt; &lt;div&gt;&lt;select class="crit-fatal-select"&gt; &lt;option value=""&gt;&lt;/option&gt; &lt;option value="No"&gt;No&lt;/option&gt; &lt;option value="Yes"&gt;Yes&lt;/option&gt; &lt;/select&gt;&lt;/div&gt; &lt;div&gt;&lt;select class="crit-time-select"&gt; &lt;option value=""&gt;&lt;/option&gt; &lt;option value="round"&gt;Round&lt;/option&gt; &lt;option value="turn"&gt;Turn&lt;/option&gt; &lt;option value="shift"&gt;Shift&lt;/option&gt; &lt;option value="day"&gt;Day&lt;/option&gt; &lt;/select&gt;&lt;/div&gt; &lt;div&gt;&lt;input class="crit-effect-input" type="text" name="effects"&gt;&lt;/div&gt; &lt;div&gt;&lt;input class="crit-heal-input" type="text" name="heal"&gt;&lt;/div&gt; &lt;/fieldset&gt; &lt;/div&gt; CSS .sheet-main { display: grid; width: 100%; height: 900px; grid-gap: 4px; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 50px 30px 1fr 60px 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-areas:"header header header" "tabs tabs tabs" "char char char" "attri attri attri" "crit crit cond" "weapo weapo cond" "armor armor cond" "skill encum sess" "skill dark dark" "skill agen agen" "spell spell relat" "talen talen consum" "gear money person" "back back back"; } /*--- GENERAL CSS ---*/ input[type="text"] { width: 120px; font-size: 10pt; } input[type="number"] { width: 30px; font-size: 10pt; } label { font-weight: bold; font-size: 11pt; } /*--- HEADER CSS --- */ .sheet-header { grid-area: header; border: 2px solid; background-image: url(<a href="https://raw.githubusercontent.com/InquisitorTremayne/The-Mortal-Age-RPG/main/Header%20img.png?token=AOSFB6GBMHHN3DSZNKP6AYTAOWQZ6" rel="nofollow">https://raw.githubusercontent.com/InquisitorTremayne/The-Mortal-Age-RPG/main/Header%20img.png?token=AOSFB6GBMHHN3DSZNKP6AYTAOWQZ6</a>); background-size: cover; } /*--- TABS CSS --- */ .sheet-tabs { grid-area: tabs; display: inline-row; } /*--- CHARACTER DETAILS ---*/ .sheet-character-details { grid-area: char; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr; border: 2px solid; } /*--- CHARACTER ATTRIBUTES ---*/ .sheet-character-attributes { grid-area: attri; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-rows: 25px 45px; border: 2px solid; } /*--- CRITS ---*/ .sheet-crits { grid-area: crit; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-rows: auto; border: 2px solid; } .sheet-crits-label { font-size: 7pt; font-weight: normal; } .sheet-repeating_crits { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; } .sheet-crit-type-select { width: 80px; font-size: 10pt; } .sheet-crit-injury-input { width: 100px; font-size: 10pt; } .sheet-crit-fatal-select { width: 50px; font-size: 10pt; } .sheet-crit-time-select { width: 70px; font-size: 10pt; } .sheet-crit-effect-input { width: 100px; font-size: 10pt; } .sheet-crit-heal-input { width: 40px; font-size: 10pt; } Thanks!
1618937719
Andreas J.
Forum Champion
Sheet Author
Translator
Styling them isn't as straightforward as other parts of a sheet: <a href="https://wiki.roll20.net/CSS_Wizardry#Styling_Repeating_Sections" rel="nofollow">https://wiki.roll20.net/CSS_Wizardry#Styling_Repeating_Sections</a>
1618959644

Edited 1618959793
vÍnce
Pro
Sheet Author
Try wrapping your inner fieldset elements with a parent div using the ".sheet-crits" class.&nbsp; This should help match the column header layout that is used just above the repeating_crits fieldset.
vÍnce said: Try wrapping your inner fieldset elements with a parent div using the ".sheet-crits" class.&nbsp; This should help match the column header layout that is used just above the repeating_crits fieldset. Thanks, that got it to display correctly, but it pushed everything to the side.&nbsp; See below. The problem is the fieldset won't span the grid section.&nbsp; It puts all the fieldset info in a single column and pushes everything else to the right.&nbsp; Adding grid-auto-rows: auto; didn't seem to help either.&nbsp; It's gotta be something with the way that grid element is structured, right?
1619366385
Kraynic
Pro
Sheet Author
If you have the class identical, they should be using the same css. &lt;div class="exactly_the_same_name_for_both"&gt; &nbsp;&nbsp;&nbsp;&nbsp;label stuff here &lt;/div&gt; &lt;fieldset class="whatever"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="exactly_the_same_name_for_both"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;repeating section input field stuff here &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &lt;/fieldset&gt; That should display them on exactly the same grid.