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 .
×
Advertisement Create a free account

Repeating fieldsets and Tables

1414419618

Edited 1414419682
Casey
Sheet Author
Are repeating fieldsets inside tables known not to work? They definitely aren't working for me on the dev server. Example: <table> <thead> <tr><th>Item</th><th>Notes</th></tr> </thead> <tbody> <fieldset class="repeating_tomes"> <tr> <td><input type="text" name="attr_tome_name" /></td> <td><input type="text" name="attr_tome_notes" /></td> </tr> </fieldset> </tbody> </table>
1414421559
Brian
Sheet Author
API Scripter
The only legal children elements of tbody are zero or more tr elements. (The same applies to thead and tfoot.) The only legal children elements of table are one of: Optional caption element Zero or more colgroup elements Optional thead element One tfoot element Either zero or more thead elements, or one or more tr elements OR: Optional caption element Zero or more colgroup elements Optional thead element Either zero or more tbody elements, or one or more tr elements Optional tfoot element The most likely cause of your problem is that the HTML5 specification does not permit a fieldset element in that location. As an alternative, you could create table-like behavior with div elements and CSS display values table, table-row, and table-cell.
1414489970
Casey
Sheet Author
Thanks for the detailed response Brian, unfortunately I already know the requirements for table elements. Roll20's case is a bit different, due to its DOM manipulation. If you look at the rendered HTML near a repeating element, you'll find that Roll20 removes the fieldset and its children elements from the location where they are in the sheet, and places them before it. This serves just as a place to store the elements for duplicating later. When the script adds a new repeating element, it duplicates and fills the templated data inside the children of the fieldset, it doesn't include the fieldset itself. So, in theory the example I posted should work, since HTML is never actually rendered in that way (with <fieldset> being children of a <tbody> or <table>). Or at least it shouldn't be. I didn't step through all of Roll20's code to see what it is doing exactly. That said, I suspect repeating fieldsets in tables could work and that it is a bug in Roll20's javascript. In the meantime I will port my tables to divs, which is rather unfortunate :| But at least it will work.
1414492307
Casey
Sheet Author
Taking another look I see the DOM manipulation I mentioned before is storing the fieldset template outside the location where the fieldset appears in the markup, but in the case of tables, is still inside the table structure, leading to the behavior you mentioned originally. :(
1414518437
Casey
Sheet Author
Some bad news and good news. The bad news is that, for my case, CSS tables won't work. My tables are somewhat complicated and require colspan and rowspan equivalents, which CSS tables just doesn't have . Something hacky could probably be worked out using a relative positioned wrapper and absolutely positioning the cells, with a few floats sprinkled in just might work. But that would take too long and is way to hacky for my tastes. The good news is flexbox is awesome . I was able to emulate the style of tables I was looking for, albeit with a crap ton more markup in a cross browser (only firefox and chrome tested). Here is a sample (also featuring awesome 9-patched SVG CSS3 border-image ): Full screen preview here For anyone interested in replicating this I recommend the lightweight flexbox grid library as an alternative to the grid system provided by Roll 20. Also feel free to check out my code on github.
1414603742
chatty
KS Backer
Sheet Author
Wow! You have inspired me to make my own sheets non-sucky!