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

[HELP] Flex Box and Repeating Section

1548371472
Finderski
Pro
Sheet Author
Compendium Curator
So...not sure what I'm doing wrong, nor how to fix it...here's what's happening: not sure why the input box isn't aligned at the top with the text area.  Here's the HTML <div class="sheet-HeroicPath"> <input type="checkbox" class="sheet-hideHJ" name="attr_hideHJ" /><span class="sheet-showHJ"></span> <h1 class="sheet-sectionTitle" data-i18n="heros-journey">Hero's Journey</h1> <div class="sheet-HJ"> <h3 class="sheet-hjItem sheet-result" style="text-align: center;" data-i18n="result">Result</h3> <h3 class="sheet-hjItem sheet-event" data-i18n="table-event">Table/Event</h3> <fieldset class='repeating_HeroicPath'> <input type="text" class="sheet-hjItem sheet-result" name="attr_hpResult" /> <textarea class="sheet-hjItem sheet-event" name="attr_hptableevent"></textarea> </fieldset> </div> </div> And here's the CSS: .sheet-HJ {   display: inline-flex;   width: 100%;   flex-flow: row wrap;   justify-content: flex-start;   align-items: flex-start; } .sheet-hjItem {   /*border: 1px solid red;*/   flex: 0 0 auto;   align-self: flex-start;   box-sizing: border-box;   margin: 0 0 4px 0; } .sheet-result {   width: 19.5%;   border: none;   border-bottom: 1px solid black;   text-align: center;   margin: 0 2px 0 0; } .sheet-event {   width: 79.5%;   border: none;   border-bottom: 1px solid black;   margin: 0 0 0 2px; } h3.sheet-result, h3.sheet-event {   display: inline-flex;   border: none; } textarea.sheet-event {   width: 79%;   height: 13px;   max-width: 79%;   min-width: 79%;   min-height: 13px; } NOTE: the textarea height of 13px was because that aligned nicely with the text input in jsfiddle...I was trying to figure out the correct height for it in Roll20 when I got the behavior above...
1548376213
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
I'd make sure your sheet-hj is actually displaying as flex via the inspector. You might be running afoul of a priority issue.
1548382396
Finderski
Pro
Sheet Author
Compendium Curator
Scott C. said: I'd make sure your sheet-hj is actually displaying as flex via the inspector. You might be running afoul of a priority issue. So, sheet-HJ is displaying as a flex, but unfortunately, the repeating items are not directly in sheet-HJ, but in repitem div within sheet-HJ. :-/ I was hoping to keep my code cleaner by not having to recreate the sheet-HJ div within the repeating section, but looks like I may have to...
1548388528
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
Ah, missed that. Then you can use display:content  to essentially eliminate the .repitem container.
1548389825
Finderski
Pro
Sheet Author
Compendium Curator
Where would that go?
1548391626
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
You'd set your repitem to that; although it may not work as the buttons for moving/deleting items may get screwed up, bit worth a shot. Brief article on it:<a href="https://css-tricks.com/get-ready-for-display-contents/" rel="nofollow">https://css-tricks.com/get-ready-for-display-contents/</a>
1548409979
Finderski
Pro
Sheet Author
Compendium Curator
Cool. &nbsp;Thanks, I'll see what happens.