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 Input Field Alignment Question

May 21 (4 years ago)

Edited May 21 (4 years ago)

I'm in the early stages of trying to put together a character sheet for a new game.

I have the start of a basic bio section in the first of 3 columns.


I would like to have the input fields either;

1) Extend to fill the remaining space in the row after the label

2) OR, aligned down the right hand edge of the column


html for the sheet currently looks like this (I have removed a section which sets up a series of tabs to try and simplify the example);


<div class="sheet-section-character">

<div class="sheet-3colrow">

<div class="sheet-col">

I'm a column

<div class="sheet-row">

Character Name:  <input type="text" name="attr_CharacterName" style="width:70px"/>

</div>

<div class="sheet-row">

Year of Birth:  <input type="number" name="attr_YearOfBirth" style="width:70px"/>

</div>

<div class="sheet-row">

Current Year:  <input type="number" name="attr_CurrentYear" style="width:70px"/>

</div>

<div class="sheet-row">

Age:  <input name="attr_Age" type="number" value="@{CurrentYear}-@{YearOfBirth}" style="width:70px;" disabled="disabled"/>

</div>

</div>

<div class="sheet-col">

So am I

</div>

<div class="sheet-col">

Me too

</div>

</div>

</div>


Any help would be greatly appreciated.


May 21 (4 years ago)

Edited May 21 (4 years ago)
Andreas J.
Forum Champion
Sheet Author
Translator

You could try: width: calc(100% - 70px);

That would strech the input to full with, and then remove 70px from it's length( as that's the length of the <label>)

You could just try with width: 100%; and see how that goes, or experiment with the values inside calc();


It will be easier for you to start writing the CSS in a separate file rather than embedded in the html, as to keep the content(HTML) and styling(CSS) separate.

Check https://wiki.roll20.net/Building_Character_Sheets and the related pages & links if you already haven't.


Unfortunately neither of those have worked.

I've started again using flex which is proving easier to get things into the right places with.

May 23 (4 years ago)

Edited May 23 (4 years ago)
vÍnce
Pro
Sheet Author

I started using CSS Grid and Flexbox.  You should get much better control.

https://wiki.roll20.net/Designing_Character_Sheet_Layout



May 23 (4 years ago)
Andreas J.
Forum Champion
Sheet Author
Translator

Lawman41 said:

I've started again using flex which is proving easier to get things into the right places with.

Yes, flexbox and css grid is much better for sheet layout than using those built-in rows/columns roll have. https://wiki.roll20.net/BCS/Layout

the roll20 rows/colmns are okay for really simple stuff, but when you try to style your sheet more, they become problematic as it's less clear how they work, and you'd need to start to do tons of changes to how they show up.