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

Some issues with my sheet

1562394457

Edited 1562394588
Hey folks, I'm completely clueless again... Below you see the HTML code I use to create a new line for each skill of that character. Unfortunately, this does not work as intended/expected. Problem 1: I try to link two values, so I can work out a sum that should calculate my dice pool. (Standard Shadowrun, 1 attribute + 1 skill = pool.) Can it be that my select-command does not deliver the value of the attribute? Problem 2: The attributes generated by the fieldset-command do not show up in the attribites list of the character. What am I doing wrong? Problem 3: I have the destinct feeling, that those roll buttons generated with the fieldset will not work. Am I right? Any kind of shove in the right direction would be awesome. <fieldset class="repeating_a-fertigkeiten"> <table width="100%"> <tr> <td width="50%"><input class="texts2" type="text" name="attr_skill_name"></td> <td width="10%" align="center"><input class="values2" type="number" name="attr_stufe" /></td> <td width="20%" align="center"><select class="choose" name="attr_linked-attrib" value=""> <option value=""></option> <option value="@{attr_str}">STR</option> <option value="@{attr_kon}">KON</option> <option value="@{attr_ges}">GES</option> <option value="@{attr_rea}">REA</option> <option value="@{attr_wil}">WIL</option> <option value="@{attr_log}">LOG</option> <option value="@{attr_int}">INT</option> <option value="@{attr_cha}">CHA</option> <option value="@{attr_mag}">MAG</option> </select></td> <td width="10%" align="center"><input class="values2" type="number" name="attr_pool" value=value="@{stufe}+@{linked-attrib})" disabled="true" /></td> <td width="10%" align="center"><button type='roll' value="/roll @{pool}D6" name="roll_check" /></td> </tr> </table> (The classes used in this code are all CSS classes to style the sheet! I don't think that those matter, right?)
1562400912
Andreas J.
Forum Champion
Sheet Author
Translator
Using <table> to strycture your sheet is generally a bad idea, and in this situation could be the source of your problems. Replace all table things with <div> and see what's the result. Roll20 does some special within fieldsets to create the repeating sections, and I'm pretty sure the table thing is the problem, as I've never seen a fieldset that contains a table.
Hm, how else should I layout all those data boxes in a row? Float really ist more a pain in the a.. then it is a help so far. I admit, my skills are limited, very much limited indeed so I'd really would love to see how else to do that.
1562415360
Andreas J.
Forum Champion
Sheet Author
Translator
Flexbox and CSS Grid is the reccomended ways to create layout on sheets. Older sheets I've done have done well with just divs, dispaly:inline/block-inline with the occasional float. I think my Star Wars D6 contains some reoeation sections done without flexbox or CSS grid.
1562419414

Edited 1562419469
GiGs
Pro
Sheet Author
API Scripter
If youre using the sheet for your own purposes, and dont plan on publishing it to roll20, tables are fine. CSS is a superior version, but its harder to learn, and If your goal is to get something playable for just you and your group, if tables are easier, use them. That said, if you do have plans to publish it for others, or you just want to learn to be a better sheet designer, dispensing with tables and going the CSS route is the way to go. I do see an issue with the code: <option value="@{attr_kon}">KON</option> attr_ is not part of the attribute name.  When you create an attribute like this <input class="values2" type="number" name="attr_stufe" /> look at this bit: name="attr_stufe" Think of the attr_ here is a label: it tells roll20 "whatever follows this is my attribute name". So the attribute this creates is "stufe", and you access it with @{stufe}. When creating attributes, you need the attr_ part for roll20 to recognise it as an attribute, but you never use it after that. I cant say whether the roll button will work, that depends on the contents of those attributes it depends on. But the syntax is fine. I also notice an issue with the pool attribute value=value="@{stufe}+@{linked-attrib})" that should be value="@{stufe}+@{linked-attrib}" And if its a number, you might need to put inline roll brackets around it: value="[[@{stufe}+@{linked-attrib}]]"
Thank you very much, the inline brackets probably were the problem. I deltetd the whole design and now try to redo it from scratch, although I still don't understand how to place containers. Yeah, I already noticed the attr:-slipup but it didn't help. Maybe a sheet with tabs and repeating sections as a first try was way to ambitious. If only Shadowrun wasn't so darn complicated! xD I guess we can consider this thread /closed , since I start from scratch. But don't worry, I'll definitely will be back... xD.
1562431348
Andreas J.
Forum Champion
Sheet Author
Translator
Werner said: although I still don't understand how to place containers. Could you elaborate on what you mean with "container" in this context?
1562433873

Edited 1562434162
GiGs
Pro
Sheet Author
API Scripter
I realised I mispoke earlier. Andreas is right that tables can be finicky inside repeating sections and might not work at all, you are better off using other ways to lay out the contents for that. Before you go, a quick introduction to grid (which is really nice to use), and I imagine flexbox works very similarly. First, understand that anything in html surrounded by < > is an element, a html element . So, divs, labels, inputs, paragraphs (<p>), headings (<h4>), and so on is a html element. Second, some elements are containers . You put other elements inside them. <div> is the most common container. When using grid, you first create a container element, then everything one level below it is an item in that grid - a grid item .  To recreate the repeating section above as a grid with the same dimensions as your table, you;d do something like <fieldset class="repeating_a-fertigkeiten sheet-rollcontainer"> </fieldset I've here given the fieldset a second class, rollcontainer, to use for the grid definition. You can rename that anything you want. Then in CSS, create with the same name (remembering to put sheet- at the start of the name): .sheet-rollcontainer {      display: grid;       grid-template-columns : 5 fr 1 fr 2 fr 1fr 1fr ; width: 100%; } This defines a grid container, and the grid subitems will be organised into 5 columns - the first column will be 5 units wide, the next 1 unit, the next 2 units, etc. This is the same as making them 50%, 10% 20% 10% 10% as you have in your in HTML above. 1fr means 1 fraction of the whole. Since the total fr elements add up to 10, 1fr equals 10% of the total.  With this approach you dont have to give the subitems their own width, the grid does it for you. If you want to define a width for the entire repeating section, you'd add it there, as I've done on the last line. So your fieldset will look like <fieldset class="repeating_a-fertigkeiten sheet-rollcontainer"> <input class="texts2" type="text" name="attr_skill_name"> <input class="values2" type="number" name="attr_stufe" /> <select class="choose" name="attr_linked-attrib" value="">     <option value=""></option>     <option value="@{str}">STR</option>     <option value="@{kon}">KON</option>     <option value="@{ges}">GES</option>     <option value="@{rea}">REA</option>     <option value="@{wil}">WIL</option>     <option value="@{log}">LOG</option>     <option value="@{int}">INT</option>     <option value="@{cha}">CHA</option>     <option value="@{mag}">MAG</option> </select> <input class="values2" type="number" name="attr_pool" value="[[@{stufe}+@{linked-attrib}]]" disabled="true" /> <button type='roll' value="/roll @{pool}D6" name="roll_check" /> </fieldset> And as long as I havent forgotten something (CSS is not my forte!), and as long as your repeating section contains exactly 5 elements, that should layout your elements properly. Notice that using CSS techniques leads to much less work than individually styling elements and using tables. PS: select is a container element. The option elements are inside the select. the grid only counts elements in the first level of the container; select is in the first level, but options are a level beneath that so are ignored. It's a good idea to indent them as I have done here so you can see the relationships.
Awesomness! You radiate it!