[HELP] Inventory tab ?

Hi everyone, I would need your help for making an inventory for my players. Actually, i use the pokemon tabletop united character sheet from here : <a href="https://github.com/Roll20/roll20-character-sheets/tree/master/PokemonTabletopUnited" rel="nofollow">https://github.com/Roll20/roll20-character-sheets/tree/master/PokemonTabletopUnited</a> As you can see, the inventory is just some repeatable lines, in which my players often get lost because of all the items my game have. So i was thinking of having an inventory tab instead of a list of items at the end of the character sheet. Is it possible ?&nbsp;

It is possible. If you are looking for someone to do it for you, need some more information. Would you be happy with the items just moved to a separate tab or did you have something else in mind?

I already look into some courses of HTML to do some of the thing i wanted : As you can see, i made a new tab for inventory with two sections but the items repeat themself in the two sections I need 3 differents sections : - equipment - healing items - items I would like to have the "Item name" frame be less long and "Description" frame to be wider as the description will often take 2 lines

I see what you're doing there. If I am right, you copy and pasted the inventory html into the new tab. That'll work but you need to change the name of the class for the repeating field. Currently the inventory field looks something like this: &lt;div class='sheet-row'&gt; &nbsp; &nbsp; &lt;h3 class="sheet-header"&gt;Inventory&lt;/h3&gt; &nbsp; &nbsp; &lt;table class='sheet-table' align = "center" style="width:90%"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;tr&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class='sheet-table-header' align = "center"&gt;Cash&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td align = "center"&gt;&lt;input type='number' name='attr_Cash' class='sheet-shortfield'&gt;&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt; &nbsp; &nbsp; &lt;/table&gt; &nbsp; &nbsp; &lt;br /&gt; &nbsp; &nbsp; &lt;fieldset class='repeating_inventory'&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;table class='sheet-table' style = "width:100%;"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;tr&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;th&gt;Item Name&lt;/th&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;th&gt;Description&lt;/th&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;th&gt;Amount&lt;/th&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;tr&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class='sheet-shortfield6' style = "width:45%;"&gt;&lt;input type='text' class='sheet-shortfield' name='attr_InventoryName' /&gt;&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class='sheet-shortfield7' style = "width:45%;"&gt;&lt;input type='text' class='sheet-shortfield' name='attr_InventoryDesc' /&gt;&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;td class='sheet-shortfield8' style = "width:5%;"&gt;&lt;input type='number' class='sheet-shortfield' name='attr_InventoryQuantity' /&gt;&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/table&gt; &nbsp; &nbsp; &lt;/fieldset&gt; &lt;/div&gt; This part here is what you are looking for. &lt;fieldset class='repeating_inventory'&gt; You need to change the name of the class. I would recommend keeping one of the sections as 'repeating_inventory'. Change the other two to something like "repeating_inventoryHealingItems" or whatever makes sense to you. That should fix your sections from mirroring each other. As for the width of the different fields. You'll want to play around with the width values for the different fields. Maybe something like 25%, 65%, 5% would work out better for you. Do you plan to push these changes to the git repo? edit: Just noticed this in your picture. Unless you want multiple places to look at money, you do not need to copy the money field multiple times. What you're looking to copy is the "repeating_inventory" class.

you also want to make sure the name="attr_xxxx" field inside each fieldset is different, i've had issues with values from one repeating field applying to another somehow because of that

I have succeed to not have the sections repeating themself ^^ but i would like to know how to have a wider shortfield (the field where i writ the numbers for cash for example) For the cash here is what i have : With the code for cash : &lt;table class='sheet-table' align = "center" style="width:90%"&gt; &lt;tr&gt; &lt;td class='sheet-table-header' align = "center"&gt;Cash&lt;/td&gt; &lt;td align = "center"&gt;&lt;input type='number' name='attr_Cash' class='sheet-shortfield'&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; What do i change to show more than 3 numbers in "Amount" ?

Timer T. said: &lt;table class='sheet-table' align = "center" style="width:90%"&gt; &lt;tr&gt; &lt;td class='sheet-table-header' align = "center"&gt;Cash&lt;/td&gt; &lt;td align = "center"&gt;&lt;input type='number' name='attr_Cash' class='sheet-shortfield'&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; What do i change to show more than 3 numbers in "Amount" ? Just modify the width of they input field. &nbsp;You can do that one of two ways. &nbsp;If you want all fields with class="sheet-shortfield" to be longer, then you can modify the CSS of that class to include: width: 25px; Or whatever width you want it to be. &nbsp;If it's just this one field, then you can do something like this: &lt;input type='number' name='attr_Cash' class='sheet-shortfield' style='width: 25px;'&gt; the style element temporarily overrides the class style with a custom one.

OK IT STARTS TO LOOK VERY COOL ^^ thanks to all !! One last thing, i think, can i ahev a "description" field take two lines ? When i have a description which is too much longer, i can only see the last thing i wrote, is there a way to counter that ?

Timer T. said: When i have a description which is too much longer, i can only see the last thing i wrote, is there a way to counter that ? Instead of: &lt;input type='text' class='sheet-shortfield' name='attr_InventoryDesc' /&gt; You can use: &lt;textarea class="sheet-shortfield" name="attr_InventoryDesc"&gt;&lt;/textarea&gt; This will allow your description to be multiple lines (you m ay need to edit the CSS to keep it at the height you want). In Chrome, Firefox, and Safari browsers, the textarea will also have a handle in the bottom-right that will allow the user to resize it for themselves only (and the size is reset when the page reloads). You can also use the&nbsp; resize property to define how the textarea is able to be resized.

Nice, looks cool and my players are happy. Thanks to all.