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] Simple CSS not so simple.

1536581479

Edited 1536586170
Leothedino
Sheet Author
Working on the styling of a sheet, a simple 'character basics' box. I've done something (or not done something) and the age label and input refuse to sit nicely next to the race label and input. Anybody with more experience able to see through my amateur mistake? HTML  <div class='sheet-3colrow'> <div class='sheet-col'> <table class='basic-char'> <tr> <td><label class='form-title'>Name:</label></td> <td><input class='charbox' type='input'></td> </tr> <tr> <td><label class='form-title'>Race:</label></td> <td><input class='racebox' type='input'></td> <td><label class='form-title'>Age:</label></td> <td><input class='agebox' type='input'> </td> </tr> </table> </div> </div> CSS /*Top Character box */ table.sheet-basic-char { border: 2px solid black; background-color: #FFFFFF; } label.sheet-form-title { font-size: 1.4em; margin:5px; position:left; } input.sheet-charbox { width:150px; border-left: 2px solid #000; border-radius: 0px; } input.sheet-racebox { border-left: 2px solid #000; border-right: 2px solid #000; border-radius: 0px; width:80px; } input.sheet-agebox { width:40px; border-left: 2px solid #000; border-radius: 0px; } .charsheet th, td { border: 2px solid; border-left: 1px; border-right: 1px; }
1536583019
Andreas J.
Forum Champion
Sheet Author
Translator
I've been told that one shouldnct use the roll20 css classes(col, rowcol etc), but I still do. Generally, I've also heard that one should avoid tables when styling stuff, they are night inpossible to get to look right(but I still have them). And my sheets are horrible hackjobs, at least partially thanks to those two points. Go check the css wizardy wiki page and the create character sheet wiki page, i think they had at least some sensible advice.
Andreas J. said: I've been told that one shouldnct use the roll20 css classes(col, rowcol etc), but I still do. Generally, I've also heard that one should avoid tables when styling stuff, they are night inpossible to get to look right(but I still have them). And my sheets are horrible hackjobs, at least partially thanks to those two points. Go check the css wizardy wiki page and the create character sheet wiki page, i think they had at least some sensible advice. Interesting. I use them because my experience with CSS is just so much further behind my HTML. I have the wiki at the top of my bookmarks, I admit I thought this was such a 'beginner mistake' that the wiki was above it. But i'll check it out, thanks for the reply!
1536585971

Edited 1536587136
Leothedino
Sheet Author
Sadly couldn't find anything that helped in the wiki. I've tried stripping each part of the CSS out, replacing one bit at a time and in a number of orders. I've turned days of work upside down and taken lines of code out to isolate it. The issue seems so black and white. Turns out -any- piece of CSS I add forces this content to snap to the right and become stuck solid. Never encountered this in college and 6 hours of battling this... my coffee machine is working at max capacity. lol.  I'm hoping it's just a schoolboy error i've made, and not a weird 'this doesn't work with roll20' limitation as this is a basic table :S  Edit: Also just tried out replacing the <Label> tag with <Strong> to see if it was an incompatibility. This didn't work either. If I use no element/tag at all it sits fine, perfectly, and looks just as I want it... without looking at all 'how' I want it, if you get my meaning.  
1536617032
GiGs
Pro
Sheet Author
API Scripter
It's because you've set the race and charcbox inputs at different widths. The <td> sets up a column, and all cells in the same column will be as wide as the widest td cell.  To fix this you can use colspan  <div class='sheet-3colrow'> <div class='sheet-col'> <table class='basic-char'> <tr> <td><label class='form-title'>Name:</label></td> <td colspan="3"><input class='charbox' type='input'></td> </tr> <tr> <td><label class='form-title'>Race:</label></td> <td><input class='racebox' type='input'></td> <td><label class='form-title'>Age:</label></td> <td><input class='agebox' type='input'> </td> </tr> </table> </div> </div> This will make the second column in that row span over 3 columns, freeing up the second row to use their own widths. A better approach though would be to abandon tables, and use <br> or <p> for line breaks, and set the width of elements as you need them. But i understand the appeal of tables - they are fairly simple when youre starting out, so keep using them if you prefer. I often still use them in repeating sets and rolltemplates. But once layout starts getting tricky, it's a good idea to look into other options.
Thanks for the assistance, I had actually abandoned the table before you sent this, and going for <br> or <p> is what I settled on. Pretty glad we had similar ideas. Fine for some content (when not oppressed on either side), but as you say, tables don't play well with various other elements and styling. 
1536643869

Edited 1536644333
Jakob
Sheet Author
API Scripter
Actually, you shouldn't really use line breaks and paragraphs for layout like this either :D. Really, CSS grid will do similar things to a table, except that you actually have really nice control over the placement of elements. It takes a bit of getting used to, but here's how you could have done using grid. Disclaimer: you can of course play with the widths and pixel values to adjust the precise look. Also, I'd add some padding et cetera, plus I haven't tested this in Roll20, the roll20 styling might affect the inputs such that they would need some extra care. <div class='sheet-basic-char'> <label class='sheet-form-title'>Name:</label> <input class='sheet-charbox' type='text'> <label class='sheet-form-title'>Race:</label> <input class='sheet-racebox' type='text'> <label class='sheet-form-title'>Age:</label> <input class='sheet-agebox' type='text'> </div> .sheet-basic-char { display: grid; width: 280px; grid: auto / 80px 80px 80px 40px; } .sheet-charbox { grid-column: span 3; } .sheet-basic-char, .sheet-basic-char label, .sheet-basic-char input { border: 1px solid black; } (by the way, there's  a few other things wrong with your HTML... you want your inputs to have type "text", not type "input"; also, to work correctly in Roll20, all inputs need a name="attr_foo" attribute, where foo is the attribute name you want to use). Addendum:   an even better  way of doing this would be to wrap the inputs into the corresponding labels. This would have the nice extra effect that clicking the label would send the cursor into the input. It's a bit more annoying to style, though.
1536649805

Edited 1536649843
Leothedino
Sheet Author
Thanks Jakob, i'll play around with that when I get back to the PC, i'd imagine it's just what I was looking to do. I admit, I found the 'text' and 'input' errors early hours of this morning myself, especially the 'attr_foo' one too. Turned out my sheet wasn't saving/remembering any inputs, I had a good eye roll  at myself for that one :P 
1536654869
Jakob
Sheet Author
API Scripter
Leothedino said: Thanks Jakob, i'll play around with that when I get back to the PC, i'd imagine it's just what I was looking to do. I admit, I found the 'text' and 'input' errors early hours of this morning myself, especially the 'attr_foo' one too. Turned out my sheet wasn't saving/remembering any inputs, I had a good eye roll  at myself for that one :P  Don't worry too much, it's a pretty common beginner mistake :). Please do play around with it. CSS grid is awesome, and will take care of your layout needs. It also obviates the need for the terrible sheet-col and sheet-2colrow etc classes built into Roll20.
Oh does this mean I can set the whole sheet into a grid, not just smaller tables? :O  I guess it would make sense, they are all containers, after all. Right?
1536656998
Jakob
Sheet Author
API Scripter
Leothedino said: Oh does this mean I can set the whole sheet into a grid, not just smaller tables? :O  I guess it would make sense, they are all containers, after all. Right? Yep!
1536657168

Edited 1536657615
Leothedino
Sheet Author
I just whipped out the column codes, replaced them with the grid... the amount of control I have now! It's already responding to different gutter widths and not just exploding all over the page when one size is 1px too big. Seriously, thanks so much man, this is amazing!
1536658148
Jakob
Sheet Author
API Scripter
Nice! Glad that this helped you.