UNSOLVED Standard calendar Determine text alignment

Clubjack

Hey guys.

Today I experimented a little with the standard calendar for a simple overview. So far I am satisfied. However, the text alignment bothers me a bit, as you can see in the picture. Is it possible to adjust this via the css?!
Calendar 1 and 2 looks good
The eventtitel and Symbol from calendar 3 is to much right
Eventtitel From 4 and 5 ist right alignment, but would Look better if its left

0_1577648082866_IMG_20191229_203356.jpg

sdetweil

@Clubjack so, how did you do 5 calendars?

affects how to fix them
left edge of 2 looks too far left compared to 1

show the config.js

Clubjack

Hey.
Here is the config from the first an second calendar. the others are created same way

{
                        module: "calendar",
                        header: "Test1",
                        position: "top_left",
                        config: {
                                maximumEntries: "7",
                                timeFormat: "absolute",
                                urgency: 1,
                                getRelative: 12,
                                fullDayEventDateFormat: "DD.MMM",
                                dateFormat: "DD.MMM HH:mm",
                                calendars: [
                                        {
                                                symbol: "toolbox",
                                                url: "https://calendar.google.com/calendar/ical/.../basic.ics"   }
                                ]
                        }                                                                                                                                                                                            },
                {
                        module: "calendar",
                        header: "Test2",
                        position: "top_left",
                        config: {
                                maximumEntries: "7",
                                timeFormat: "absolute",
                                urgency: 1,
                                getRelative: 12,
                                fullDayEventDateFormat: "DD.MMM",
                                dateFormat: "DD.MMM HH:mm",
                                calendars: [
                                        {
                                                symbol: "calendar-check",
                                                url: "https://calendar.google.com/calendar/ical/.../basic.ics"   }
                                ]
                        }
                },
......

sdetweil

@Clubjack said in Standard calendar Determine text alignment:

                    position: "top_left",

and the other positions?

top_right?

do you have any custom.css entries?

Clubjack

@sdetweil
Oh yes.
Calendar 4 an 5 are with the same settings, only Position is top_right.

I have an entry in custom.css, but without the entry it is the same alignment.

 body {

 }

.MMM-DarkSkyForecast .module-content {
        width: 550px;
}
.calendar .module-content {
        width: 550px;
}

sdetweil

@Clubjack right, .module-content doesn’t mean anything

U are lucky most modules don’t support multiple instances like that.

My ‘guess’ is that there is some padding wrap in front of the tables for the calendar.

I would use the developers window, elements tab, to explore the css tree for each.

Note that because they are the same module name, one css entry will affect all of them

Clubjack

What Do You mean with “developers window, elements Tab”? Where can i find it?

Clubjack

@sdetweil
Hey…
I tried something.
If one of the displayed event titles (calendar 3) gets longer, then the alignment fits.
This means that the calendar symbol and the event title align together.
It would be better if the calendar symbol were always aligned to the left and the event title follows it.

sdetweil

@Clubjack said in Standard calendar Determine text alignment:

What Do You mean with “developers window,

the developers window is opened with

keyboard = ctrl-shift-i (its a toggle, once, its on… next time its off)
at startup time = npm start dev

note that if you use a windows machine for development and a pi to display, you can ALSO display on your windows box, by going to http://pi_address:port (the config.js has to allow any system to connect so whitelist=[], and address= “”)
and then use the dev window THERE

Clubjack

@sdetweil
Hey…
In the meantime I managed to align everything. Via the custom.css.
Now I installed the MMM-GoogleTasks module according to the instructions and inserted my API ID.
Then I restarted the MM and since then I only have a black screen in a window called electron.
I hope I don’t have to set everything up now. My brain is starting to smoke.