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

Custom Character Sheet Help!!!

Hello, I'm new at HTML and CSS, but I have been doing good for some custom sheets for my solo gaming. I always have found this problem but has not found and effective way to resolved. My problem is that when write a line like this "<div class="subcontainer_scrip">Scrip <input class="line-box8" type="number" name="attr_scrip"></div>" I get the result I want  Now my question is is there any way to move the word "scrip" down so it will be align with the number box? Thanks for any help,  Warlord
1728625085

Edited 1728629055
Mago
Sheet Author
hello there, you can apply an inline style or alter the CSS class of the div tag to adjust the line-height (Inline) style="line-height: 12px;" (CSS) .charsheet .subcontainer_scrip { line-height: 12px; } i also suggest that you should avoid having tags inside other tags, unless you want something very specific to overlap <div class="subcontainer_scrip">Scrip</div> <input class="line-box8" type="number" name="attr_scrip"/>
Thanks, I will try that
1728661397
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
Going to give a different view on the nested elements question. Nesting elements is one of the core features of html. It can be taken to extremes, but nesting an input and it's label in the same container is often the right call; and allows easy layout styling with things like CSS flexbox and CSS grid. What you don't want to do though is 1) have text directly in a div or 2) have that label be just text with the input next to it. I'd do your html like: <label class="subcontainer_scrip">     <span>Scrip</span>     <input class="line-box8" type="number" name="attr_scrip"> </label> This will allow you to style the text, input, and the container independently. It also allows you to add translations to your sheet by adding a data-i18n  property to the span. Changing the div to a label makes it so users can click on the input itself or the text label to move their cursor into the input and start typing. To style it so that the text is aligned with the input's bottom, you can simply use flexbox: .subcontainer_scrip{     display: flex;     align-items: end; }
ok, I got it now, now when I put something with the label tag the color change to grey, is there a way to change this?
1728669683
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
yes, you control it with your css. Note that I would recommend prepending all css declarations for the sheet with  .ui-dialog .tab-content .charsheet . This will ensure that your css overrides Roll20's default css.