Possible to allow more flexible styling?

[eddyyanto]

I am showing the scheduler UI on an iPad and the text and icon seemed small. I tried to add custom styling using template node but it seemed that some of the styling are hard-encoded in the HTML element.

Here's the screenshot of the UI and the css styling that I used.

<style>
body.nr-dashboard-theme {
    font-size: 25px !important;
}
md-list-item.md-2-line .md-list-item-text{
    height:50px;
}
</style>

Is there a way to scale the whole UI such as the rows, text and icon bigger or hide a certain button?

[fellinga]

Hi @eddyyanto,

thanks for reaching out to me. I just pushed 1.16.0 where I slightly modified the CSS so that overriding should be a little easier. Try something like this:

<style>
body.nr-dashboard-theme {
    font-size: 25px !important;
}
md-list-item.md-2-line .md-list-item-text{
    height:120px;
}
#ui-ts-e0d75601502b9a02 .weekDay{
    width: 70px !important;
    line-height: 70px !important;
}
</style>

This would improve the readability of the list items for example.

You can see the classes that I am using here.

Let me know how it goes!

PS: I forgot to mention that it is necessary to add the ID of your time-scheduler node. So you have to replace "e0d75601502b9a02" with whatever your time-scheduler node id is.

[eddyyanto]

Thanks @fellinga! That helped! I ended up with your suggestion on overriding the CSS classes as well as hard-coding them in the module file. As my use case is a slightly different due to the embedded browser rendering engine that made the text and UI far too small compared to the standard mobile browser.

Granted, I understood the hard-coding might be overwritten should there be future update to the module.