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

stuck

1506985210

Edited 1507005531
Cowtankerous
Sheet Author
how to make the repeatable areas always display instead of being blocked by display:none (so i can keep my flexbox tabs
1507019941

Edited 1507019952
Jakob
Sheet Author
API Scripter
What do you mean? The fieldset is always set to display: none, which you could theoretically override, but there's no good reason to do so. Perhaps you instead want to add some CSS rules for the .repcontainer[data-groupname="repeating_blabla"] and .repcontainer[data-groupname="repeating_blabla"] .repitem selectors? But it's hard to say what you actually want.
i've been building a character sheet using flexboxes as tabs, and for whatever reason they all were affected. so i had to re-enable them manually
<a href="https://codepen.io/vulpesigni/pen/yyZYNy" rel="nofollow">https://codepen.io/vulpesigni/pen/yyZYNy</a> is what i used as a base and it is honestly the easiest method i've found for doing tabs
but things get a lot more complicated for doing the other things i need to do, like making dots fill to the left (it is a white wolf style sheet). because all of the posts assume everything is visible but when you use tabs.... ugh.
1507022979

Edited 1507023097
Jakob
Sheet Author
API Scripter
Okay, I have no clear idea what you mean, because your writing is quite incoherent, but I think &nbsp;the issue is that the input[type=radio], div { &nbsp; display: none; } from the above code pen is making your radios, divs, et cetera not display? (by the way, you MUST NOT use this code literally, because it contains IDs, which do not work like they should in character sheets once more than one sheet is open at the same time - but I'll ignore this for what follows for simplicity). If that is indeed the problem, then the solution is easy: add more specificity to the rules. So, instead of input[type=radio], div { &nbsp; display: none; } input[type=radio]:checked + label + div { &nbsp; display: block; } use input[type=radio].sheet-tab-selector, div.sheet-tab { &nbsp; display: none; } input[type=radio].sheet-tab-selector:checked + label + div { &nbsp; display: block; } and add the .sheet-tab-selector and .sheet-tab classes to your tab inputs and divs, respectively. Or better, use&nbsp; input[type=radio].sheet-tab-selector:not(:checked) + label + div { &nbsp; display: none; } instead of the above two selectors. None of this will work quite literally (well, it will work when only one sheet is open, but you shouldn't use it), since you cannot use for-linked labels in character sheets, but maybe that's a place to start...
coal powered puppet said you can use the tabs if the character sheets are popped out. but it still remains a mystery why it is hiding the rep item containers
and i have tested this, it is weird i agree. but if it sounds stupid but it works.... it isn't stupid.
.charsheet .repcontainer .repitem, .repcontainer, .repitem, .sheet-filtered-box { display:block; } seems to be the reference from the wiki but there is nothing telling it to display:none to begin with
1507030929
Jakob
Sheet Author
API Scripter
Share your HTML and CSS, perhaps. Then it'd be easy to figure out the problem.
my theory on this is label's aren't attributes, and aren't unique in anyway, so in this instance of using an id on a label doesn't have any interference one way or another on multiple sheets open/closed because the radio itself isn't referenced
<a href="https://pastebin.com/hR5RGLwS" rel="nofollow">https://pastebin.com/hR5RGLwS</a> just keep in mind i'm tinkering with the dot fills atm, and trying to make rep items re-appear&nbsp;
1507033066

Edited 1507036081
Cowtankerous
Sheet Author
the 'tabs' work fine, even with multiple different people opening them. the issues i have currently: 1. trying to use wod dot fill&nbsp; 2. repeating sections vanished. 3. i'm still filling in information (building the sheet) 4. need to fix the space between the tabs to be smaller (vertical)
all of the 'disfunctional' sections have been moved out of their normal tab, and put at the bottom until they are fixed (if you wondered)
1507037624

Edited 1507040517
Jakob
Sheet Author
API Scripter
Some observations on a VERY quick glance: Using html as a selector does not do anything. You probably want every "html" selector to be ".charsheet" instead. TimesNewRoman is not a font. "Times New Roman" (including the quotes!) is. Do not use fieldset { display: block !important}. You do not &nbsp;want your fieldset displayed, but the div.repcontainer immediately afterwards. Delete this CSS rule. In fact, also delete ALL the style tags on all your fieldsets in the HTML. &nbsp; None of your repeating section display anything because of the following rule: div:not(.other){ &nbsp; display: none; } This will hide every &nbsp;div that does not have the other &nbsp;class, in particular it will hide all &nbsp;the repcontrols (the Add and Modify buttons) for all repeating sections. Delete this rule . It currently just hides every div on the sheet (since the other class in the HTML actually becomes sheet-other once the parser sees it). The .largedialog rule doesn't do anything. Delete it. Any CSS rule with ".no" inside does not work currently, since it (to clarify, it &nbsp;refers to the class in the HTML)&nbsp;becomes .sheet-no once the parser sees it. Maybe you want to change that to ".sheet-no" (or find a more descriptive name). EDIT: &nbsp;Just to reiterate, this code uses IDs. Don't use IDs. Your "theory" on IDs happens to have no bearing on the fact that IDs WILL be problematic once several sheets are open at the same time (unless they're popped out, but you cannot depend on that). The problem is not multiple people opening them, the problem is multiple sheets being opened by one person. But I'll not repeat myself on this, just be aware that you are creating a non-functional sheet if you use IDs.
several points. thanks for noticing the font. the largedialog handles the flexbox tab labels (in the character sheet). to quote the wiki here on the ids on labels is FINE. take a deep breath hold exhale, relax. i appreciate the help. "This does mean that you cannot utilize ID-linked &lt;label&gt; elements (eg, &lt;label for="my_id"&gt;My Label Text&lt;/label&gt; ). You can place elements inside the label to link them together (eg, &lt;label&gt;Label Text &lt;input ... /&gt;&lt;/label&gt; ), although that can come at the expense of some flexibility in your CSS." now i need a way to hide divs, that doesn't hide the rep item containers, else i can just force them visible if no other means. i still need to get the dot fill to work and i'm struggling with it.&nbsp;
1507067239
Lithl
Pro
Sheet Author
API Scripter
Cowtankerous said: several points. thanks for noticing the font. the largedialog handles the flexbox tab labels (in the character sheet). to quote the wiki here on the ids on labels is FINE. take a deep breath hold exhale, relax. i appreciate the help. "This does mean that you cannot utilize ID-linked &lt;label&gt; elements (eg, &lt;label for="my_id"&gt;My Label Text&lt;/label&gt; ). You can place elements inside the label to link them together (eg, &lt;label&gt;Label Text &lt;input ... /&gt;&lt;/label&gt; ), although that can come at the expense of some flexibility in your CSS." This quote agrees with Jakob. You cannot make use of ids, because the sheet's HTML will be duplicated for each character you open. IDs must be unique across a page, and you will violate this requirement if you include ids in your character sheet. Since the label functionality of selecting the linked form element depends on ids being unique, this will also break that. A simple example: If a label element is linked to id "foo", and there are multiple elements with id "foo" on the page, the behavior of clicking the label is undefined. Most likely, it will select the last "foo" element in the page, but it cannot select more than one, nor decide which one to select based on which instance of the label you clicked. Remove the ids from your html.
explain this section then please. <a href="https://wiki.roll20.net/Building_Character_Sheets#Only_Use_Classes.2C_not_IDs" rel="nofollow">https://wiki.roll20.net/Building_Character_Sheets#Only_Use_Classes.2C_not_IDs</a>
the labels are the only things with ids the wiki says it is fine.
at this point all i'm hearing is spazzing, no explanations, no offer of help, and the wiki directly counterdicts what you're saying.
i just want to find a way to make functional tabs work, with dot fill to the left (white wolf cWoD style) thats all i'm trying to do. and for whatever reason it WORKS FINE on all the html editors i test (even without ids) but it does not work in conjuction on roll20 without some weird side effects. i'm not trying to make trouble i just need them both to work.
does roll20 support SCSS (SASS) ?
i got it figured out. dots and tabs are working now.
1507148796
Lithl
Pro
Sheet Author
API Scripter
Cowtankerous said: the labels are the only things with ids the wiki says it is fine. No, the wiki says using ids is not &nbsp;fine. The title of the section is even "Only Use Classes, not IDs". Cowtankerous said: does roll20 support SCSS (SASS) ? No
yeah i got it sorted out, again my apologies, but the wiki should be changed to explicitly say, the example leads one astray as it did to me, i apologize especially to jakob i hope the rest of your day went better though i did get it working, it did have the flaw of opening tabs on the first sheet opened. i reworked it so it doesn't do that. will label for Attribute work? or is that going to cause similar problems? or is there a working known solution to make labels clickable and linked to a checkbox
1507227015
Lithl
Pro
Sheet Author
API Scripter
As the wiki says, you can put the input inside the label, and clicking the label will select the input without needing ids. &lt;label class="sheet-my-label"&gt;Label text&lt;input type="checkbox" name="attr_example" class="sheet-my-input"&gt;&lt;/label&gt;