Hi there, I have been working on a custom character sheet for a game I'm making to play with friends. I've run into a lot of snags along the way with the coding and all that, and I've been able to solve most of them by searching through these forums and google search, but I've hit a dead end at this one spot. I've tried many, many different snippets of code and I can't make anything work right here.
So all I want to do is to make a default height for resizable textboxes for a repeating section. The repeating section is super basic, just has an input name, and a box for description to go into. But the default boxes are huge, and only a couple things would actually merit multiple lines. Alternatively, or even better, I'd like to have a section that auto-expands to the size of the text put in. I was able to find a code snippet that expanded horizontally, but not vertically, and text refused to wrap. I don't remember where I found that one, and it is no longer around on my sheet, sorry :(
Anyways, here is the relevant sections of code...
HTML: (The class='sheet-masteries' is for a tabbing function on the sheet.)
<div class="sheet-masteries">
<h2>Masteries</h2>
<h3>Combat Masteries</h3><fieldset class='repeating_masteries1'><input type='text' name='attr_masteryname' class='sheet-long'><textarea name='attr_masterynamedesc'></textarea></fieldset>
<h3>Knowledge Masteries</h3><fieldset class='repeating_masteries2'><input type='text' name='attr_masteryname' class='sheet-long'><textarea name='attr_masterynamedesc'></textarea></fieldset>
<h3>Crafting Masteries</h3><fieldset class='repeating_masteries3'><input type='text' name='attr_masteryname' class='sheet-long'><textarea name='attr_masterynamedesc'></textarea></fieldset>
<h3>Social Masteries</h3><fieldset class='repeating_masteries4'><input type='text' name='attr_masteryname' class='sheet-long'><textarea name='attr_masterynamedesc'></textarea></fieldset>
<h3>Practical Masteries</h3><fieldset class='repeating_masteries5'><input type='text' name='attr_masteryname' class='sheet-long'><textarea name='attr_masterynamedesc'></textarea></fieldset>
<h3>Magic Masteries</h3><fieldset class='repeating_masteries6'><input type='text' name='attr_masteryname' class='sheet-long'><textarea name='attr_masterynamedesc'></textarea></fieldset>
</div>
... ...
<script type="text/worker">
const buttonlist = ["skills","masteries","equipment","biography"];
buttonlist.forEach(button => {
on(`clicked:${button}`, function() {
setAttrs({
sheetTab: button
});
});
});
</script>
CSS:
textarea {
resize:both;
background-color: #4b4b4b;
color: #ececec;
border: 1.25px solid gray;
width: 100%;
}
... ...
input.sheet-long {
vertical-align: top;
width: 150px;
}
... ...
/* Tabs Stuff Here */
/*Configure the tab buttons*/
.charsheet .sheet-skills,
.charsheet .sheet-equipment,
.charsheet .sheet-masteries,
.charsheet .sheet-biography {
display: none;
}
.sheet-rolltemplate-default td {
padding: 1px;
line-height: 1.4em;
vertical-align: top;
}
.sheet-rolltemplate-default {
margin-left: -30px;
margin-right: 20px;
}
/* show the selected tab */
.charsheet .sheet-tabstoggle[value="skills"] ~ div.sheet-skills,
.charsheet .sheet-tabstoggle[value="equipment"] ~ div.sheet-equipment,
.charsheet .sheet-tabstoggle[value="masteries"] ~ div.sheet-masteries,
.charsheet .sheet-tabstoggle[value="biography"] ~ div.sheet-biography {
display: block;
}Put the tabbing code snippets in just in case they're relevant.
If any HTML/CSS geniuses can help me out, I'd greatly appreciate it. Thank you.
