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

Grids and Fill from the left

February 04 (5 years ago)
Coal Powered Puppet
Pro
Sheet Author

So I am using a Fill from the Left series of Alternate Checkboxes and trying to put them in a Grid.  Which sounded great until I discovered it doesn't work.  The <span>s are treated as separate entities in a grid- causing them to spread out wrong- and Fill-from-the-Left doesn't work if the radio buttons aren't in the same container.    

Any ideas how to make this work?  I was using one giant container and non-breaking spaces to line things up, but I was hoping for something cleaner.

February 04 (5 years ago)
Kraynic
Pro
Sheet Author

Have you tried making the column for the background items (whatever is behind the spans) 0px wide?  I think I did something like that with some option radio buttons on mine to make them overlap correctly.

February 04 (5 years ago)
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator

Well, with grid, just define your grid area names and assign each span/checkbox to the correct area. You can define area names by either using grid-template-areas or by defining line names using grid-template-areas/columns.

February 05 (5 years ago)
Coal Powered Puppet
Pro
Sheet Author


Scott C. said:

Well, with grid, just define your grid area names and assign each span/checkbox to the correct area.

Yeah, but alternate radio buttons have a follow on <span> element...thingy. 

<input type="radio" class="alt_radio" name="attr_foo" value="1" /><span</span>
And for the fill from the left deal to work, it all has to be in the same container.  If I put the above code in a separate <div> or <span>, it breaks the radio button, fill-from-the-left effect.  

Or am I misunderstanding you?

February 05 (5 years ago)

Edited February 05 (5 years ago)
GiGs
Pro
Sheet Author
API Scripter

I'm not an expert on CSS, but do you need the span there? 

Another way to achieve this effect is a sheet worker, and checkbox inputs instead of radio, named something like "foo0, foo1, foo2, foo3, etc" each with a value of 1.

If a check box is clicked, it clears all checked boxes with a higher value name, and fills all checkboxes with a lower value. Here's one way to do it. It might seem more complex than the CSS approach, but isnt dependent on any particular layout.

// assuming you have checkboxes for values 0 to 5...
on('change:foo0 change:foo1 change:foo2 change:foo3 change:foo4 change:foo5', function(event) {
    getAttrs(['foo0', 'foo1', 'foo2', 'foo3', 'foo4', 'foo5'], function(v) {
        // slice here gets the last 'letter' of the attribute that triggered the event - which is always a number from 0 to 5.
        const num = parseInt(event.sourceAttribute.slice(-1)) || 0;
        const max = 5; // the biggest number in the set.
        const output = {}; // this is for the setAttrs, we plan to send all the other checkboxes with a value of 0 or 1         for(let i = 0; i <= max; i++) {             if(i !== num) {  // skip when num = i, because num is the attribute that was just changed manually.
                output[`foo${i}`] = (i < num) ? 1 : 0; // set everything below num to 1, and everything above to 0.
            }
        };
        // now save the set of attribute values
        setAttrs(output,{silent: true}); // make sure the changing of attributes doesnt retrigger this sheet worker.
    });
});



February 05 (5 years ago)
Coal Powered Puppet
Pro
Sheet Author

GiG...yes, the span is necessary in order for the fill-from-the-left to work.  The real radio/checkbox is invisible and placed over the decorated span.

I will try this in the morning.  I was working on soething like this without the ultra cool complicated stuff you got.

February 05 (5 years ago)

Edited February 05 (5 years ago)
GiGs
Pro
Sheet Author
API Scripter

Oh yes, I forgot how they worked.

With CSS grid, if you use named areas, can you place the invisible checkbox and the span at the same place? That's what Scott was referring to earlier.

HTML:

<div class="foo-container">     <input type="radio" class="foo0"" name="attr_foo" value="0" /><span class="foo0"></span>

    <input type="radio" class="foo1"" name="attr_foo" value="1" /><span class="foo1"></span>     <input type="radio" class="foo2"" name="attr_foo" value="2" /><span class="foo2"></span>     <input type="radio" class="foo3"" name="attr_foo" value="3" /><span class="foo3"></span>     <input type="radio" class="foo4"" name="attr_foo" value="4" /><span class="foo4"></span> </div>

CSS:

.sheet-foo-container {
    grid-template-areas:      "area0 area1 area2 area3 area4"
} .sheet-foo0 {gridarea: area0}

.sheet-foo1 {gridarea: area1}

.sheet-foo2 {gridarea: area2}

.sheet-foo3 {gridarea: area3}

.sheet-foo4 {gridarea: area4}

You'd also need to set the opacity and other styling stuff, and maybe z-order, but for the basic layout this seems like it should work.

Edit: I renamed some elements to make it more understandable which part of the code was doing which task.

You give each element you want to position a name, using the gridarea tag. And in grid-template-areas, you use those names to position the elements in the layout you want.

February 05 (5 years ago)

Edited February 05 (5 years ago)
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator

Yep, GiGs is demonstrating the code I was suggesting. CSS grid allows you to do a lot of layout options that previously required separate divs.
Edit: I'll also note that grid areas act like divs for positioning elements and using position:relative/absolute.

February 05 (5 years ago)
Coal Powered Puppet
Pro
Sheet Author

Something is not right; I am missing something.

HTML

        <div class="grid_3">
               
               <input type='radio' class="sheet-damage spot_0" value='1' name='attr_Wound' checked='true'><span class="spot_0"></span>
               
               <input type='radio' class="sheet-damage spot_1" value='1.001' name='attr_Wound'><span class="spot_1"></span>
               <input type='radio' class="sheet-damage spot_1" value='1.002' name='attr_Wound'><span class="spot_1"></span>
               <input type='radio' class="sheet-damage spot_1" value='1.003' name='attr_Wound'><span class="spot_1"></span>
               <input type='radio' class="sheet-damage spot_1" value='1.004' name='attr_Wound'><span class="spot_1"></span>
               
               <input type='radio' class="sheet-damage spot_2" value='1.011' name='attr_Wound'><span class="spot_2"></span>
               <input type='radio' class="sheet-damage spot_2" value='1.012' name='attr_Wound'><span class="spot_2"></span>
               <input type='radio' class="sheet-damage spot_2" value='1.013' name='attr_Wound'><span class="spot_2"></span>
               <input type='radio' class="sheet-damage spot_2" value='1.014' name='attr_Wound'><span class="spot_2"></span>
               
               <input type='radio' class="sheet-damage spot_3" value='2.001' name='attr_Wound'><span class="spot_3"></span>
               <input type='radio' class="sheet-damage spot_3" value='2.002' name='attr_Wound'><span class="spot_3"></span>
               <input type='radio' class="sheet-damage spot_3" value='2.003' name='attr_Wound'><span class="spot_3"></span>
               <input type='radio' class="sheet-damage spot_3" value='2.004' name='attr_Wound'><span class="spot_3"></span>
               
               <input type='radio' class="sheet-damage spot_4" value='3.001' name='attr_Wound'><span class="spot_4"></span>
               <input type='radio' class="sheet-damage spot_4" value='3.002' name='attr_Wound'><span class="spot_4"></span>
               <input type='radio' class="sheet-damage spot_4" value='3.003' name='attr_Wound'><span class="spot_4"></span>
               <input type='radio' class="sheet-damage spot_4" value='3.004' name='attr_Wound'><span class="spot_4"></span>
               
               <input type='radio' class="sheet-damage spot_5" value='3.011' name='attr_Wound'><span class="spot_5"></span>
               <input type='radio' class="sheet-damage spot_5" value='3.012' name='attr_Wound'><span class="spot_5"></span>
               <input type='radio' class="sheet-damage spot_5" value='3.013' name='attr_Wound'><span class="spot_5"></span>
               <input type='radio' class="sheet-damage spot_5" value='3.014' name='attr_Wound'><span class="spot_5"></span>
               
               <input type='radio' class="sheet-damage spot_6" value='3.021' name='attr_Wound'><span class="spot_6"></span>
               <input type='radio' class="sheet-damage spot_6" value='3.022' name='attr_Wound'><span class="spot_6"></span>
               <input type='radio' class="sheet-damage spot_6" value='3.023' name='attr_Wound'><span class="spot_6"></span>
               <input type='radio' class="sheet-damage spot_6" value='3.024' name='attr_Wound'><span class="spot_6"></span>
               
               <input type='radio' class="sheet-damage spot_7" value='3.031' name='attr_Wound'><span class="spot_7"></span>
               <input type='radio' class="sheet-damage spot_7" value='3.032' name='attr_Wound'><span class="spot_7"></span>
               <input type='radio' class="sheet-damage spot_7" value='3.033' name='attr_Wound'><span class="spot_7"></span>
               <input type='radio' class="sheet-damage spot_7" value='3.034' name='attr_Wound'><span class="spot_7"></span>
               
               <input type='radio' class="sheet-damage spot_8" value='3.041' name='attr_Wound'><span class="spot_8"></span>
               <input type='radio' class="sheet-damage spot_8" value='3.042' name='attr_Wound'><span class="spot_8"></span>
               <input type='radio' class="sheet-damage spot_8" value='3.043' name='attr_Wound'><span class="spot_8"></span>
               <input type='radio' class="sheet-damage spot_8" value='3.044' name='attr_Wound'><span class="spot_8"></span>
               
               <input type='radio' class="sheet-damage spot_9" value='3.051' name='attr_Wound'><span class="spot_9"></span>
               <input type='radio' class="sheet-damage spot_9" value='3.052' name='attr_Wound'><span class="spot_9"></span>
               <input type='radio' class="sheet-damage spot_9" value='3.053' name='attr_Wound'><span class="spot_9"></span>
               <input type='radio' class="sheet-damage spot_9" value='3.054' name='attr_Wound'><span class="spot_9"></span>
               
               <input type='radio' class="sheet-damage spot_10" value='3.061' name='attr_Wound'><span class="spot_3"></span>
               <input type='radio' class="sheet-damage spot_10" value='3.062' name='attr_Wound'><span class="spot_3"></span>
               <input type='radio' class="sheet-damage spot_10" value='3.063' name='attr_Wound'><span class="spot_3"></span>
               <input type='radio' class="sheet-damage spot_10" value='3.064' name='attr_Wound'><span class="spot_3"></span>
            </div>

CSS

.sheet-grid_3 {
    display: grid;
    grid-template-columns: 70px 70px 70px 70px 70px 70px 70px 70px 70px 70px 70px; 
    grid-template-rows: auto;
    grid-template-areas: "area0 area1 area2 area3 area4 area5 area6 area7 area8 area9 area10";
}
.sheet-grid_3 .sheet-spot_0 { gridarea: area0;}
.sheet-grid_3 .sheet-spot_1 { gridarea: area1;}
.sheet-grid_3 .sheet-spot_2 { gridarea: area2;}
.sheet-grid_3 .sheet-spot_3 { gridarea: area3;}
.sheet-grid_3 .sheet-spot_4 { gridarea: area4;}
.sheet-grid_3 .sheet-spot_5 { gridarea: area5;}
.sheet-grid_3 .sheet-spot_6 { gridarea: area6;}
.sheet-grid_3 .sheet-spot_7 { gridarea: area7;}
.sheet-grid_3 .sheet-spot_8 { gridarea: area8;}
.sheet-grid_3 .sheet-spot_9 { gridarea: area9;}
.sheet-grid_3 .sheet-spot_10 { gridarea: area10;}

What is looks like:

What it is suppose to look like:


February 05 (5 years ago)
Andreas J.
Forum Champion
Sheet Author
Translator

First of all, I'm not entirely sure you can assign several separate tags to an area, if each of those groupings of 4 dots would be inside a single div, and the div given the proper class, that could work better. Have you inspected how the sheet looks like with the browser developer tools and turned on the grid display? it could show what's going on.

February 05 (5 years ago)
Coal Powered Puppet
Pro
Sheet Author

Apparently you are right; I assigned each item to its own area and redefined the area size.  It lines up better, but now its in two rows...which is shouldn't be.  The code is still putting each of the radio button and span in separate grid sections.

February 05 (5 years ago)
Andreas J.
Forum Champion
Sheet Author
Translator
Usually I use grid for the large layout parts, and then flexbox to make each "block" look as they should.
February 05 (5 years ago)

Edited February 05 (5 years ago)
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator

Grid doesn't care about stacking. If you tell it to put 100 elements in one grid area, it'll put 100 elements in that grid area. The problem is that you are using the wrong property name for grid area. It is grid-area, not gridarea. You've also got an issue with how you're organizing it though. Each of your radio button/span combos needs it's own grid area. Like this for your spot 1 set:

HTML

<div class="grid_3">
    <input type='radio' class="sheet-damage spot_0" value='1' name='attr_Wound' checked='true'><span class="spot_0"></span>
    
    <input type='radio' class="sheet-damage spot_1-1" value='1.001' name='attr_Wound'><span class="spot_1-1"></span>
    <input type='radio' class="sheet-damage spot_1-2" value='1.002' name='attr_Wound'><span class="spot_1-2"></span>
    <input type='radio' class="sheet-damage spot_1-3" value='1.003' name='attr_Wound'><span class="spot_1-3"></span>
    <input type='radio' class="sheet-damage spot_1-4" value='1.004' name='attr_Wound'><span class="spot_1-4"></span>
</div>

CSS (Note: the columns are declared for all of your data, but I only adjusted the html and grid-area declarations for the spot_1 set)

.sheet-grid_3 {
    display: grid;
    grid-template-columns: auto 70px auto auto auto auto 70px auto auto auto auto 70px auto auto auto auto 70px auto auto auto auto 70px auto auto auto auto 70px auto auto auto auto 70px auto auto auto auto 70px auto auto auto auto 70px auto auto auto auto 70px auto auto auto auto; 
    grid-template-rows: auto;
    grid-template-areas: "area0 . area1-1 area1-2 area1-3 area1-4 . area2-1 area2-2 area2-3 area2-4 . area3-1 area3-2 area3-3 area3-4 . area4-1 area4-2 area4-3 area4-4 . area5-1 area5-2 area5-3 area5-4 . area6-1 area6-2 area6-3 area6-4 . area7-1 area7-2 area7-3 area7-4 . area8-1 area8-2 area8-3 area8-4 . area9-1 area9-2 area9-3 area9-4 . area10-1 area10-2 area10-3 area10-4";
    position:relative;
}
.sheet-grid_3 .sheet-spot_0 {
    grid-area: area0;
}
.sheet-grid_3 .sheet-spot_1-1 {
    grid-area: area1-1;
}
.sheet-grid_3 .sheet-spot_1-2 {
    grid-area: area1-2;
}
.sheet-grid_3 .sheet-spot_1-3 {
    grid-area: area1-3;
}
.sheet-grid_3 .sheet-spot_1-4 {
    grid-area: area1-4;
}

EDIT: If it weren't for the need for the spans to line up with the checkboxes, I would probably use flexbox for this, but since the spans are needed grid is about your only choice using this method of passing the values. I've got an idea for another method of passing the values, but I'll need to experiment later today after work.

February 05 (5 years ago)
GiGs
Pro
Sheet Author
API Scripter


Scott C. said:

The problem is that you are using the wrong property name for grid area. It is grid-area, not gridarea. 

Oops, that was my typo.

February 09 (4 years ago)
Coal Powered Puppet
Pro
Sheet Author

I have got it to work...kinda.  There is some spacing/styling issues, but it all in a line now.  Thank you both for all you help.