stuck

1506985210

Edited 1507005531
Cowtankerous
Pro
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
Pro
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.
1507022176
Cowtankerous
Pro
Sheet Author
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
1507022429
Cowtankerous
Pro
Sheet Author
https://codepen.io/vulpesigni/pen/yyZYNy is what i used as a base and it is honestly the easiest method i've found for doing tabs
1507022548
Cowtankerous
Pro
Sheet Author
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
Pro
Sheet Author
API Scripter
Okay, I have no clear idea what you mean, because your writing is quite incoherent, but I think  the issue is that the input[type=radio], div {   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 {   display: none; } input[type=radio]:checked + label + div {   display: block; } use input[type=radio].sheet-tab-selector, div.sheet-tab {   display: none; } input[type=radio].sheet-tab-selector:checked + label + div {   display: block; } and add the .sheet-tab-selector and .sheet-tab classes to your tab inputs and divs, respectively. Or better, use  input[type=radio].sheet-tab-selector:not(:checked) + label + div {   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...
1507026797
Cowtankerous
Pro
Sheet Author
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
1507026887
Cowtankerous
Pro
Sheet Author
and i have tested this, it is weird i agree. but if it sounds stupid but it works.... it isn't stupid.
1507027068
Cowtankerous
Pro
Sheet Author
.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
Pro
Sheet Author
API Scripter
Share your HTML and CSS, perhaps. Then it'd be easy to figure out the problem.
1507032502
Cowtankerous
Pro
Sheet Author
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
1507032939
Cowtankerous
Pro
Sheet Author
https://pastebin.com/hR5RGLwS just keep in mind i'm tinkering with the dot fills atm, and trying to make rep items re-appear 
1507033066

Edited 1507036081
Cowtankerous
Pro
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  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)
1507033108
Cowtankerous
Pro
Sheet Author
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
Pro
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  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.   None of your repeating section display anything because of the following rule: div:not(.other){   display: none; } This will hide every  div that does not have the other  class, in particular it will hide all  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  refers to the class in the HTML) becomes .sheet-no once the parser sees it. Maybe you want to change that to ".sheet-no" (or find a more descriptive name). EDIT:  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.
1507043145
Cowtankerous
Pro
Sheet Author
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 <label> elements (eg, <label for="my_id">My Label Text</label> ). You can place elements inside the label to link them together (eg, <label>Label Text <input ... /></label> ), 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. 
1507067239
Brian
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 <label> elements (eg, <label for="my_id">My Label Text</label> ). You can place elements inside the label to link them together (eg, <label>Label Text <input ... /></label> ), 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.
1507113374
Cowtankerous
Pro
Sheet Author
explain this section then please. https://wiki.roll20.net/Building_Character_Sheets#Only_Use_Classes.2C_not_IDs
1507113408
Cowtankerous
Pro
Sheet Author
the labels are the only things with ids the wiki says it is fine.
1507113453
Cowtankerous
Pro
Sheet Author
at this point all i'm hearing is spazzing, no explanations, no offer of help, and the wiki directly counterdicts what you're saying.
1507114069
Cowtankerous
Pro
Sheet Author
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.
1507117454
Cowtankerous
Pro
Sheet Author
does roll20 support SCSS (SASS) ?
1507145316
Cowtankerous
Pro
Sheet Author
i got it figured out. dots and tabs are working now.
1507148796
Brian
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  fine. The title of the section is even "Only Use Classes, not IDs". Cowtankerous said: does roll20 support SCSS (SASS) ? No
1507193998
Cowtankerous
Pro
Sheet Author
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
Brian
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. <label class="sheet-my-label">Label text<input type="checkbox" name="attr_example" class="sheet-my-input"></label>