Custom Character Sheet, broken tabs and tiny tables.

I'm working on making a custom character sheet for a home-brewed game I wanted to run, but I've run into some problems using tables in a repeating fieldset, and with using some radio-buttons tweaked to look like tabs. 

On the table, I don't know how to increase or change the width of the individual columns, which is causing some of the boxes to be unusably small.

For the tabs / radio-buttons, I haven't figured out how to increase the size of them, so that players click on the tab to swap between them. Rather than the empty space to the left of the tab.

Below is a link to my HTML code, with the problem table starting on line 339 and ending on line 377

https://pastebin.com/mPAfTWuP

Below is a link to the CSS code I'm using, with the problem section starting on line 474

https://pastebin.com/fJYV1Uew

I am not so good with tabs, because I just stole mine from another sheet. 

For the table/repeating section, I would strip out all your width modifiers there, make sure you break down your labels enough to have sufficient references for css.  A repeating section in my simple sheet:

HTML

<div class='melee-grid-container' >
     <h5>Weapon</h5>
     <h5>Skill Lvl</h5>
     <h5>Strike</h5>
     <h5>Parry</h5>
     <h5>Throw</h5>
     <h5>Range</h5>
     <fieldset class="repeating_weaponmelee">
         <div class='melee-grid-container' >
              <input class="sheet-input-center-aligned" type="text" value="" name="attr_melee_weapon_name" placeholder="Weapon Type" />
              <input class="sheet-input-center-aligned" type="number" value="1" name="attr_melee_weapon_skill_level" />
              <input class="sheet-input-center-aligned" type="number" value="0" name="attr_melee_weapon_strike" />
              <input class="sheet-input-center-aligned" type="number" value="0" name="attr_melee_weapon_parry" />
              <input class="sheet-input-center-aligned" type="number" value="0" name="attr_melee_weapon_throw" />
              <input class="sheet-input-center-aligned" type="number" value="0" name="attr_melee_weapon_range" />
         </div>
     </fieldset>
</div>

CSS

.sheet-melee-grid-container{
    display:grid;
    grid-template-columns: 213px 50px 50px 50px 50px 50px
}

Image:

Since I reference the same grid for the labels and the repeating section, they are all kept aligned.  I think the complicated class label from the repeating section was something inherited from a sheet I started altering and never got revisited.  The main thing to take from this is the "melee-grid-container" being used twice so that the css applies to both.

Kraynic,

Thanks for providing a sample of your sheet. creating a CSS object to organize the grid was exactly what I needed to do. Now I just need to fix the tabs.

Here's the section of the CSS Wizardy wiki that shows the Tabs stuff...

Though, to be honest, I've found it's easier to action buttons and sheet workers to do tabs now...you style the action buttons using CSS to look however you want to designate a "tab" and then use a sheet worker to set the attribute for the "sheet" display.

That sounds like an interesting approach, Finderski. Can you post an example of the html, css, and sheet worker where you use an action button to do this? Or point me to a sheet where you've done this.

GiGs said:

That sounds like an interesting approach, Finderski. Can you post an example of the html, css, and sheet worker where you use an action button to do this? Or point me to a sheet where you've done this.

Don't have time at the moment (need to head out), but the Savage Worlds Tabbed sheet uses this method now.  When I get back and have a little time, I'll post the stuff... :)

Ok, here's how I use action buttons for tabs...

HTML:

<div class="sheet-buttonbar">
	<div class="sheet-navbuttons">
		<button type="action" name="act_characterprofile1" class="sheet-topbuttons">U</button>
		<input type="checkbox" class="sheet-showVehicles" name="attr_vehicle" style="display: none;" />
		<button type="action" name="act_vehicletab3" class="sheet-topbuttons sheet-vehiclesT">T</button>
		<button type="action" name="act_journaltab4" class="sheet-topbuttons">n</button>
		<button type="action" name="act_configurationtab2" class="sheet-topbuttons">x</button>
	</div>
	<div class="sheet-functions">
		<input type="checkbox" class="sheet-useBenniesXP" name="attr_bennies" value="1" style="display: none;" />
		<button class="sheet-benniesxp" type="roll" name="roll_convertBennies" value="&{template:emote} {{name=@{character_name}}} {{does=rolls for XP on ?{Number of Bennies|1} un/spent bennies and gets [[?{Number of Bennies|1}d6>5]] extra experience point(s)!}}">S</button>
		<input class="sheet-isWC" type="hidden" name="attr_is_npc" />
		<button class="sheet-statblock" type="roll" name="roll_fullstatblock" value="/w gm &{template:statblock} @{chardesc} {{charatts=@{charatts}}} {{charskills=@{charskills}}} {{charderived=@{charderived}}} {{chargear=@{chargear}}} {{charhindrances=@{charhindrances}}} {{charedges=@{charedges}}} {{showspec=@{showspec}}} {{charspecabilities=@{charspecabilities}}} {{powercount=[[1d0+@{powercount}]]}} {{charpowers=@{charpowers}}}"><span class="sheet-showWCicon" name="attr_WCI"></span><img style="height: 28px;" src="http://imgsrv.roll20.net/?src=github.com/finderski/SWT/blob/master/BackgroundImages/statblock_profile.png%3Fraw%3Dtrue"</button>
	</div>
	<div class="sheet-docbuttons">
		<input type="hidden" name="attr_newcontent" value="read" class="sheet-newcontent" />
		<button type="action" name="act_releasetab5" class="sheet-topbuttons sheet-releasenotesbutton">N</button>
		<input type="hidden" name="attr_newdocumentation" value="read" class="sheet-newdocumentation" />
		<button type="action" name="act_documentationtab6" class="sheet-topbuttons sheet-documentationbutton">i</button>
	</div>
</div>
<input type='radio' class='sheet-characterT' name='attr_sheetTab' style="display: none;" value='1' checked />
<input type="radio" class="sheet-journalT" name="attr_sheetTab" style="display: none;" value="4" />
<input type='radio' class='sheet-vehiclesT' name='attr_sheetTab' style="display: none;" value='3' />
<input type='radio' class='sheet-configT' name='attr_sheetTab' style="display: none;" value='2' />
<input type='radio' class='sheet-releaseN' name='attr_sheetTab' style="display: none;" value='5' />
<input type='radio' class='sheet-documentatioN' name='attr_sheetTab' style="display: none;" value='6' />
<!--Character Sheet Tab-->
<div class='sheet-character'>
	<!--stuff-->
</div>
<div class='sheet-notes'>
	<!--stuff-->
</div>
<div class='sheet-vehicles'>
	<!--stuff-->
</div>
<div class='sheet-config'> 
	<!--stuff-->
</div>
<div class="sheet-release">
	<!--stuff-->
</div>
<div class='sheet-documentation'>
	<!--stuff-->
</div>

CSS:

/* Tab Stuff */
.sheet-character,
.sheet-config,
.sheet-vehicles,
.sheet-notes,
.sheet-release,
.sheet-documentation {
	display: none;
}
.sheet-release,
.sheet-documentation {
    background: rgba(255,255,255,0.75);
}
.sheet-characterT:checked ~ div.sheet-character,
.sheet-configT:checked ~ .sheet-config,
.sheet-vehiclesT:checked ~ div.sheet-vehicles,
.sheet-journalT:checked ~ div.sheet-notes,
.sheet-releaseN:checked ~ div.sheet-release,
.sheet-documentatioN:checked ~div.sheet-documentation {
	display: block;
	width: 100%;
	margin: 0px;
	padding: 0px;
}
/* Button Stuff */
.sheet-topbuttons {
    background-color: transparent;
    font-family: "Pictos";
    font-size: 2em;
    border: none;
    background-image: none;
    font-weight: bold;
    box-shadow: none;
    text-shadow: none;
    height: 28px;
    margin: 0px;
    padding: 0 5px 0 5px;
}

Sheet Worker:

const buttonlist = ["characterprofile1","vehicletab3","journaltab4","configurationtab2","releasetab5","documentationtab6"];
buttonlist.forEach(buttonlist => {
	on(`clicked:${buttonlist}`, function() {
		console.log(`${buttonlist} button was clicked!!`);
		let radioval = `${buttonlist}`;
		radioval = radioval.slice(-1);
		console.log(`Value for Radio Button is: ${radioval}`);
		setAttrs({ sheetTab: radioval });
		if (radioval === "5") {
			setAttrs({ newcontent: "read" });
		}
		if (radioval === "6") {
			setAttrs({ newdocumentation: "read" });
		}
	});
});

That does look pretty nifty, thanks! I look forward to playing around with it later.