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

Newbie on sheet CSS grid question.

January 28 (2 years ago)

Edited January 28 (2 years ago)

Hello fellow devs, recently I've decided to make a custom sheet for my fellow players; I'm well aware of what type of dedication and time consuming this means so I'm here wtih my first humble noobish question on CSS grids.

I've read the community wiki and the CSS guide linked on CSStricks.

Spent the whole afternoon and evening trying to figure out a simple task but I'm repeatdly failing at every approach.

I'm starting with something terribly simple, the name and gender of charachter forms input, this image shows my objective:


I want to recreate the same ratio in the CSS grid for each element, but everything seems to fail each time I try to set the elements in the grid cells.

I wont report here every approach I've tried( even flex displays and grid of grids) but let's start from this simpliest sample of my code:

.info-grid{
  display: grid;
  grid: 50px / 1fr 1fr 1fr 1fr;
  grid-gap: 3px;
  grid-auto-flow: row;
}

.info-grid-item{
  padding: 1px;
  place-self: center;
  border: 1px solid black;
}
<section class="info-grid">
    <label class="info-grid-item">NAME</label>
    <input class="info-grid-item" type="text" name="attr_name" value="">
    <label class="info-grid-item">GENDER</label>
    <input class="info-grid-item" type="text" name="attr_gender" value="">
</section>

Obatining this result in the sheet sandbox:

Labels seems to behave the worst in the grid cells, to shrink them I have to shrink the entire colum, and every element seems to "exceed" the cell dimension and overflow into the others ( that's why I enabled the borders) and nobody seems to behave to stay in the "center" of supposed cell.

I'm kinda at loss, if anybody want to give me any advice on how to correctly approach such simple use case it would be great.


Thank you for your attention.

January 28 (2 years ago)

Edited January 28 (2 years ago)
Oosh
Sheet Author
API Scripter

Your issue here is just the native styling on the elements you're using. Roll20 also applies some default styling to some elements. It's always worth checking by changing your problem element to a neutral <div> when you're learning, to check if you're running into an inbuilt HTML or Roll20 issue.

As an aside, it's always been advised to avoid using the id attribute on Roll20, since multiple character sheets can be open. However, since they sit in their own <iframe> DOM, it's perfectly valid to use ids to get labels working as they're supposed to. Ids only need to be unique inside their <iframe>, and in testing I've never been able to find a problem with using ids. Anyway, if you wanted to actually use the <label> elements as labels, you'd just need to add the ids and "for"s

<section class="info-grid">
<label class="info-grid-item" for="name">NAME</label>
<input class="info-grid-item" id="name" type="text" name="attr_name" value="">
<label class="info-grid-item" for="gender">GENDER</label>
<input class="info-grid-item" id="gender" type="text" name="attr_gender" value="">
</section>

You can also do the accepted Roll20 method of wrapping the input inside the label element to get them working (though that'll obviously change your grid setup) if you wanted to play it safe, but I think that method is no longer needed.


And then a bit of extra CSS to remove the inbuilt margins:

.charsheet .info-grid-item {
padding: 1px;
margin: 0;
border: 1px solid black;
}


The specificity needs to be bumped up a bit here (you can always use !important for testing, but try not to leave it in there), but that should fix the main issue.


I think Scott has a list of "reset" CSS he uses to clear out Roll20's applied styles on a handful of elements, though in this case I think those margins are HTML native, rather than Roll20.

January 29 (2 years ago)

Thank you for your answer, the most important part was discovering that I was missing the ".charsheet" qualifier before my classes, it was breaking the code before anything else.

Next I went for the IDs and obisuvly it aligned the input and labels.

Then I proceeded to style the elements with ID and fine tuning the columns spacing to match the desired size of input fields, the result was a great improvement :


.charsheet .info-grid{
  display: grid;
  justify-items: start;
  grid: 50px / 0.1fr 200px 0.1fr 20px;
}

.charsheet .info-grid-item{
  padding: 1px;
  margin: 0px;
  place-self: center;
  border: 1px solid black;
}

#nameInput{
  resize: horizontal;
  width: 200px;
}

#genderInput{
  resize: horizontal;
  width: 20px;
}


<section class="info-grid">
    <label class="info-grid-item" for="nameInput">NAME</label>
    <input class="info-grid-item" id="nameInput" type="text" name="attr_name" value="">
    <label class="info-grid-item" for="genderInput">GENDER</label>
    <input class="info-grid-item" id="genderInput" type="text" name="attr_gender" value="">
</section>

Now when I resize the sheet window the label boxes tend to flex and widen themselves again but without invading the other fields,  I guess it is because of the adoption of the FR unit in colums of the labels that gives them a "free expanding" depending on the window itself.


Well I guess this is an improvement for the future , thanks for your assistance.

January 29 (2 years ago)
GiGs
Pro
Sheet Author
API Scripter

If you want to create a gap between those elements you can add column-gap, like this:

.charsheet .info-grid{
  display: grid;
  justify-items: start;
  grid: 50px / 0.1fr 200px 0.1fr 20px;
column-gap: 5px; }

That will put a 5px gap between each column, change to suit.

January 29 (2 years ago)


GiGs said:

If you want to create a gap between those elements you can add column-gap, like this:

.charsheet .info-grid{
  display: grid;
  justify-items: start;
  grid: 50px / 0.1fr 200px 0.1fr 20px;
column-gap: 5px; }

That will put a 5px gap between each column, change to suit.


Regarding this aspect on VScode when I use the single commands as shown if I hover with the mouse over them a dialog box pop ups telling me that those commands shouldn't be used, both for rows and columns, instead I should use the shorthand command  gap which sets both of them at the same time.


January 29 (2 years ago)
GiGs
Pro
Sheet Author
API Scripter

You can use that if you like, but you have to sometimes ignore what VS Code says depending on your need. column-gap is fine.

January 29 (2 years ago)


GiGs said:

You can use that if you like, but you have to sometimes ignore what VS Code says depending on your need. column-gap is fine.


Understandable, thanks for the tips.