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

Short text fields

1590259639
Chomik
Pro
Sheet Author
Is there a way to make text input field - but only to like 5-10 characters? I do attack table for OGL D&D 5E game, and whole text inputs are too big to the data I put in those. Nominally columns Range , Mod and DMG could certainly by only few character wide and be more than enough. Here is my code: <div class="sheet__descriptions"> <table> <tr> <th>Attack</th> <th>Range</th> <th>Mod</th> <th>Roll</th> <th>DMG</th> <th> </th> <th>Type/Quality</th> </tr> <tr> <td> <input type="text" name="attr_attack1"> </td> <td> <input type="text" name="attr_range1" value="5 ft."> </td> <td> <select name="attr_att_mod1"> <option value="@{str_mod}">Str</option> <option value="@{dex_mod}">Dex</option> </select> </td> <td> <input type="number" name="attr_att_roll1" value="@{att_mod1}+@{prof}"> </td> <td> <input type="text" name="attr_dmg1"> </td> <td> +<input type="number" disabled="true" name="attr_dmg_bon1" value="@{att_mod1}"> </td> <td> <input type="text" name="attr_att_type1"> </td> </tr> <tr> <td> <input type="text" name="attr_attack2"> </td> <td> <input type="text" name="attr_range2" value="5 ft."> </td> <td> <select name="attr_att_mod2"> <option value="@{str_mod}">Str</option> <option value="@{dex_mod}">Dex</option> </select> </td> <td> <input type="number" name="attr_att_roll2" value="@{att_mod2}+@{prof}"> </td> <td> <input type="text" name="attr_dmg2"> </td> <td> +<input type="number" disabled="true" name="attr_dmg_bon2" value="@{att_mod2}"> </td> <td> <input type="text" name="attr_att_type2"> </td> </tr> <tr> <td> <input type="text" name="attr_attack3"> </td> <td> <input type="text" name="attr_range3" value="5 ft."> </td> <td> <select name="attr_att_mod3"> <option value="@{str_mod}">Str</option> <option value="@{dex_mod}">Dex</option> </select> </td> <td> <input type="number" name="attr_att_roll3" value="@{att_mod3}+@{prof}"> </td> <td> <input type="text" name="attr_dmg3"> </td> <td> +<input type="number" disabled="true" name="attr_dmg_bon3" value="@{att_mod3}"> </td> <td> <input type="text" name="attr_att_type3"> </td> </tr> <tr> <td> <input type="text" name="attr_attack4"> </td> <td> <input type="text" name="attr_range4" value="5 ft."> </td> <td> <select name="attr_att_mod4"> <option value="@{str_mod}">Str</option> <option value="@{dex_mod}">Dex</option> </select> </td> <td> <input type="number" name="attr_roll1" value="@{att_mod4}+@{prof}"> </td> <td> <input type="text" name="attr_dmg4"> </td> <td> +<input type="number" disabled="true" name="attr_dmg_bon4" value="@{att_mod4}"> </td> <td> <input type="text" name="attr_att_type4"> </td> </tr> <tr> <td> <input type="text" name="attr_attack5"> </td> <td> <input type="text" name="attr_range5" value="5 ft."> </td> <td> <select name="attr_att_mod5"> <option value="@{str_mod}">Str</option> <option value="@{dex_mod}">Dex</option> </select> </td> <td> <input type="number" name="attr_att_roll5" value="@{att_mod5}+@{prof}"> </td> <td> <input type="text" name="attr_dmg5"> </td> <td> +<input type="number" disabled="true" name="attr_dmg_bon5" value="@{att_mod5}"> </td> <td> <input type="text" name="attr_att_type5"> </td> </tr> </table> </div>
1590260596
GiGs
Pro
Sheet Author
API Scripter
Are you asking if you can limit the size of text boxes? If so, yes. Create a class in css with the width you want, like .charsheet input[type="text"].sheet-width5, .charsheet input[type="number"].sheet-width5{     width: 5em; } Then just add the end bit that starts with sheet- to whichever textboxes you want to limit. For example: <input type="text" class="width5" name="attr_att_type4"> Note that the class name width5 is taken from the CSS above. They must match. The CSS above works for text and number inputs. Feel free to change the width and class name to whatever you want. In this case I put the size at 5em, an em unit is about 1 character, and scales with the font. You probably want it a bit wider than that. You can test by trial and error. You can also use specific pixel values, like     width: 32px; Try different values out and find the wone that works best. You can add as many CSS classes as you like. If you wanted to add another for checkboxes, just add .charsheet input[type="checkbox"].sheet-mycheckbox {     width: 3em; } and so on.
1590282014
Chomik
Pro
Sheet Author
@GiGs, cool, it works and looks great! I could even limit the Select element that way with in... HTML: <select class="width5" name="attr_att_mod1"> CSS: .charsheet select.sheet-width5{ width: 5em; } Result:
1590299163
GiGs
Pro
Sheet Author
API Scripter
Great! yes, you can resize all elements this way, and add any other styling you want - making text a different color (color:red;), or making it bold (font-weight: bold;) and much more. Googling CSS will get you lots of options.
1590326120
Andreas J.
Forum Champion
Sheet Author
Translator
<a href="https://wiki.roll20.net/Building_Character_Sheets#Guides" rel="nofollow">https://wiki.roll20.net/Building_Character_Sheets#Guides</a> MDN is a good source for reading up on HMTL and CSS, and getting familiar with things.