Q about a two-line entry in Grid Iron 3

RapidWeaver Classic Stacks
1

Hello World,
Good Morning Weavers,

I hope you and your families are doing well in these uncertain times and you manage to enjoy the nature and not only think about work;-)

Ok, it doesn’t work completely without work and so I would like to post a question in the forum, because I can’t get ahead with a task.

I’m working at a clients timetable, based on Grid Iron 3 and Google Spreadsheet.
Everything works fine - thanks again for some helpful input from @greg and team from Chilidog;-)
Service at its best…!

One of the used columns needs a two-line entry, others only one line. For better separation of the weekdays I want to use a colored background.
With a colored background it works only with this line…

<div style="background-color:#f39345;"Ballett Erwachsene Anfänger
09:45 - 11:15

(I tried with a markdown code ** for bold - but it doesn’t work in this case…)

Now my question.
The two-line entry determines the dimension for one cell height and the background is ok… Seems 55 px…
But the first column is dependent on another line of code I didn’t find. Looks like a padding…?

I checked the element and realized, that I had to add this coding > line-height: 55px;

But I don’t know where - tried to change the relevant »stacks_page_page7.css« or the RW-Inspector - but It doesn’t work at all:

table#grid-iron-stacks_in_2018474_page7.dataTable tbody tr td {
color: rgba(0, 0, 0, 1.00);
font-size: 18px;
padding: 0px 0px !important;
text-align: center;
vertical-align: middle;

Here the access to the page (dot) please replace:

https://ballettschule-niederkassel(dot)de/test/
RW Version 8.6.2 (20836)
Stacks 4.0.4
Grid Iron 3.4.5
Foundry 2.2.1.0
Google Spreadsheet

I would be very happy about any help.
Thanks
Roger

2

Rodger,

I can’t seem to get the link above to work, perhaps the site is down?

I also don’t understand what exactly you are looking for.

3

Hi Doug,
thanks for your interest…
I think, if you get access to the site, you will understand what I mean. I took the . dot out of the adress - so here it is complete:


My interest is the first column - I’m looking for the correct code and place to fill up the background as the second column.
I know the code is > line-height: 55px;
But I don’t know where and how to insert it to the PageInspektor.
Do you have any idea?
Thanks
Roger
4

okay,
I don’t have grid iron so I’m just looking at the html.

I want to first see if I understand what you are doing:
Are manually typing the stuff like this into the Google Spread-sheet?

<div style="background-color:#f39345;" <="" div=""><strong>Ballett Erwachsene Anfänger</strong><br>09:45 - 11:15</div>

I’m not sure what the <="" div="" is there for? Might be a typo?

And the line you want the height to be taller on is this?

<div style="background-color:#f39345">Dienstag</div>

Is this also something you typed into the spreadsheet?

I see two options that would work, There may be an easier way but since I don’t have Grid Iron I can’t say.

Option One:

Where you added the inline style to add the background color, simply add the line height to the style statement:

<div style="background-color:#f39345;line-height: 55px;">Dienstag</div>

The Second Option:

Element the inline styling and instead put a class name on the <div statements.

<div class="my-orange-col-0">Dienstag</div>

<div class="my-orange-col-1"><strong>Ballett Erwachsene Anfänger</strong><br>09:45 - 11:15</div>

Then define the CSS for that class:

.my-orange-col-0 {
   background-color:#f39345;
   line-height: 55px;
}
.my-orange-col-1 {
   background-color:#f39345;
}

You can of course name the classes anything you like.

The second option might seem more difficult, but this way you can make further styling changes more easily, and it would be less stuff being added to the spreadsheet.

1 Like
5

Hi, Doug,
thanks, as always - that was really precise - thanks for your detailed support. It works perfectly.
I used your more complex suggestion 2 and adjusted it, because I want to use a different color for each day of the week. And you’re right, now I can easily coordinate this color with the client in CSS;-)
One circumstance I would like to refine, because it still disturbs me when using a smartphone i.e. my iphone 11…
If the cell content is more extensive, another 3rd line is formed and I think, there must be a possibility to define the “line-height” not by an absolute number.
I tried it with 100%, but it does not work.
Maybe I want too much from a simple Excel cell - but maybe there is a way…?

Thanks for your advice.
Have a good week…
Roger

6

Hi Roger,

If I understand what. you are looking for is to change the entire row color?

As I said I don’t have Grid Iron, so I’m look at the HTML it produces. So what we want to do is add the class to one of the parents of the table Cell. CSS doesn’t provide a “parent” selector so it wouldn’t be possible with just CSS .

A little bit of JavaScript along with some Simpler CSS would do the trick.

I have some simular routines in JavaScript so I could put something together pretty easily, It probably wouldn’t be more than 30 lines or so.

I need to know if my assumptions are correct:

  • You enter the code <div class="my-whatever" in the spreadsheet cell?
  • You want the entire row to change and not just the cell?

There also might be an easer way with Grid Iron.

7

Okay Roger(@Roger) ,

I found some code I had and did a little change to do what I think you want.

If I understand that you want the entire row to change the background color, here we go:

I set it up so the CSS class name for the row will need to start with my-row and can be anything you want.
The class name (inside the cell can be on any element, even a blank element. That way, you can add the markdown stying for-the text.

So here is an example.

The CSS:

        .my-row-blue {
            background-color: blue;
        }

        .my-row-red {
            background-color: red;
        }

        .my-row-green {
            background-color: green;
        }

You can change or add as many as you want as long as the class name starts with my-row.

Then inside the cell of the table on the row, you want to change the color on, I’d add an empty span.

<span class="my-row-red"></span>

It shouldn’t show up or effect formatting at all.

Then add this Javascript to the page inspector Javascript area:

function ready(callbackFunction) {
    if (document.readyState != 'loading')
        callbackFunction(event);
    else
        document.addEventListener("DOMContentLoaded", callbackFunction)
}
ready(event => {
    let SelectionList = document.querySelectorAll('[class*="my-row"]');
    SelectionList.forEach(tableItem => {
        let classToAdd = "";
        let listOfClasses = tableItem.classList;
        listOfClasses.forEach(aClass => {
            if (aClass.startsWith("my-row")) {
                classToAdd = aClass;
            }
        });
        let TR = tableItem.parentNode.parentNode;
        TR.classList.add(classToAdd);
    });
});

This code should add any of the class names that start with my-row to the row element.
I don’t have the stack, so I tested it with some simple HTML.

Let me know if you use this or have questions.

8

This isn’t necessary. GridIron provides some CSS classes for you. You can target an individual row, odd rows, or even rows (same with columns). Here is an example row:

<tr class="gridiron-stacks_in_2018474_page7-even gridiron-stacks_in_2018474_page7-row-1 even" role="row"><td class="gridiron-stacks_in_2018474_page7-col-even gridiron-stacks_in_2018474_page7-col-0" tabindex="0"><div class="my-monday-col-0">Montag</div></td><td class="gridiron-stacks_in_2018474_page7-col-odd gridiron-stacks_in_2018474_page7-col-1"><div class="my-monday-col-1"><strong>Kreativer Kindertanz 4/5 Jahre</strong><br>15:00 - 15:45 Uhr</div></td></tr>

This should allow you to use tr.even and td.odd selectors.

Hope that helps.

-Greg

1 Like
9

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.