Div styles not working in mobile app

Div styles not working in mobile app

by b k -
Number of replies: 10

I have installed the Atto: Styles plugin and it's working just fine. However, when I look at pages I have created using these styles in the mobile app, they styling is not present. When I inspect elements, the classes are there just fine. (using the webapp)

Here is what it looks like in the browser. This is correct. The yellow bit is what is styled:

working

But here is what it looks like in the mobile app. No yellow callout:

not working

I placed the css for these styles here for the Boost theme:

css

I have tried putting a copy of the Atto: Styles css in a file and then including the url to that file here (I know it's blank in the images, but I put in the URL)

mobile

I'm not sure if the above setting is exclusively for styling the interface in the mobile app. In any case I couldn't get it to work but perhaps the file was not in an accessible place.

I am using 3.8.2+ (Build: 20200408).

Any help would be much appreciated. My pages won't make sense unless I can style them. This seems like something really basic to expect.

I have read this page https://docs.moodle.org/dev/Moodle_Mobile_Themes but I can't find my answer.



Average of ratings: -
In reply to b k

Re: Div styles not working in mobile app

by Noel De Martin -
Picture of Core developers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers
Hi there,

Before looking further into this can you please confirm that your site has an active Premium subscription? The App Plans we announced are already being applied and custom CSS is not working unless the site has a Premium subscription.
Average of ratings: -
In reply to Noel De Martin

Re: Div styles not working in mobile app

by b k -

> Before looking further into this can you please confirm that your site has an active Premium subscription?

Oh, well that would be it then. No. I don't have one. I guess there is still old documentation that needs to be updated.

In any case, I can see why custom css to change the interface would be a reasonable feature for the paid version. But that pages and books can't have any styling? That seems a bit counter productive if there is the notion that people should be creating in-Moodle content rather than uploading PDF's. Perhaps you could re-consider and allow pages to have custom css. Not being able to have anything more than bold/italics/underline seems a bit extreme.

Thanks for your work on the app. I appreciate all the effort folks are making.

Average of ratings: -
In reply to b k

Re: Div styles not working in mobile app

by Noel De Martin -
Picture of Core developers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers
Yes we need to update some docs on that, I'll look into it.

About your use-case in particular, I think you can use inline styles for pages and books. I've tried the following on a site and it works in the app as well:

<p style="border-left: 2px solid green;padding-left:5px;">Foo bar</p>

I understand it's not ideal, specially if non-technical users are going to write pages. But it wouldn't be trivial to limit css to some parts of the app, because at the moment we are adding the remote CSS file without doing any processing. And I don't think that's a rabbit hole we want to get ourselves into.

I guess the ideal solution here would be to use a custom editor, similar to this one (although this one relies on classes and not inline styles). But I doubt that you can find one that fits your exact needs.
Average of ratings: -
In reply to Noel De Martin

Re: Div styles not working in mobile app

by b k -
>But it wouldn't be trivial to limit css to some parts of the app, because at the moment we are adding the remote CSS file without doing any processing.

Right. that makes sense.

>I guess the ideal solution here would be to use a custom editor, similar to this one (although this one relies on classes and not inline styles).

Yes, that's the plugin that got the whole thing rolling.

Thanks for your clarification. If it really is an all or nothing, I think I would consider the Moodle app non-functional if it couldn't display basic css without a premium subscription. Can you imagine a web browser in 2020 that didn't support css? Any way, I know these projects are complicated and decisions are difficult. Thanks for your work.
Average of ratings: -
In reply to b k

Re: Div styles not working in mobile app

by Noel De Martin -
Picture of Core developers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

> If it really is an all or nothing, I think I would consider the Moodle app non-functional if it couldn't display basic css without a premium subscription. Can you imagine a web browser in 2020 that didn't support css?

Well I guess that's something you can discuss in the thread about app plans. I don't think it's a fair comparison to make, because Moodle is not a web browser.

> that's the plugin that got the whole thing rolling.

It looks like that plugin is open source, maybe you can fork it or submit a PR adding the ability to use inline styles smile. Even if you don't, you could open an issue to let them know about this upcoming limitation in the app.

Either way, you have some options.

Average of ratings: -
In reply to Noel De Martin

Re: Div styles not working in mobile app

by b k -
>Either way, you have some options.

Yes, thank you. Probably all the plugins that add formatting to atto should be made aware of this.

>I don't think it's a fair comparison to make, because Moodle is not a web browser.

Moodle is not a web browser, but since the beginning it has been viewed in a web browser. So I guess I was more comparing the app to a web browser. And it sounds like the app has no problem supporting styles in books or pages, but that it's being disabled for non-paying customers. And I'm not against a fremium model, that's what makes the internet go round. It just seems like a drastic place to draw the line.

But as long as teachers/admin users can be made aware of the limitation then that's fine.
Average of ratings: -
In reply to Noel De Martin

Re: Div styles not working in mobile app

by Andreas Egger -

Sorry but from all the announcements about the Moodle App plan it wasn't made clear (at least to me), that App CSS branding really also meant that no (non-branding) CSS classes would be applied anymore.

This means that my Moodle-Site really isn't useable any more for my students from one day to the next. And no I'm not a school, I'm a single teacher with approx. 50-80 students who use moodle on a small webserver. 

I simply can't afford to pay 499€ a year just so that my students are able to view my content accordingly!

I can't quickly change every single content on my page from using css classes to just simple 'style="..."' format.

I understand that you need to make money, but this should have been user base and use case dependent. For single teachers like me who work at a school which doesn't supply any learning management system Moodle and your app had been a blessing. Now (at least for me) it has turned into a disaster in the midst of Corona and homeschooling.

Average of ratings: -
In reply to Andreas Egger

Re: Div styles not working in mobile app

by Noel De Martin -
Picture of Core developers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers
The problem is that it isn't trivial to distinguish branding from non-branding CSS customizations. That's why we had to disable all custom CSS.

It seems like the TinyMCE editor provides some good customizations that are rendered with inline styles. Can you use it to adapt your content?
Average of ratings: -
In reply to Noel De Martin

Re: Div styles not working in mobile app

by Andreas Egger -
I understand that it's not trivial to change that but it is also not trivial for me to change all my content accordingly:
Here is an example with css classes applied:
without classes (images size off, borders around the label missing, font sizes and styles gone etc.):

I already had a look at maybe changing all the content directly in the database but as I use combined classes like <div class="homework, backgroundred"> this is not an easy task.
Yes I can adapt for new content to use styles directly, but this makes it really hard to get the same outcome as before: Applying a maximum of 10 different classes in htmlplus-view is way easier than manually typing the complete styles.

Just an idea: I didn't have a look at how your app loads css styles but couldn't you just load the default app-concerned css-styles after the custom css-file (if the user hasn't booked the premium tier) thus making sure that every alteration is effectively overwritten (!important) afterwards by your defaults?
Average of ratings: -
In reply to Andreas Egger

Re: Div styles not working in mobile app

by Noel De Martin -
Picture of Core developers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

> Just an idea: I didn't have a look at how your app loads css styles but couldn't you just load the default app-concerned css-styles after the custom css-file (if the user hasn't booked the premium tier) thus making sure that every alteration is effectively overwritten (!important) afterwards by your defaults?

The way that CSS works, this is not feasible. When styles are applied it's true you can use !important to override other definitions. But then !important could be used in the custom CSS and the most specific selector is applied, regardless of the order in which the css was loaded.

We could also remove !important from the custom CSS file, but that involves parsing and treating CSS. And that is a slippery slope that would create more problems.

Even if we could achieve it somehow, we would end up breaking inline styles because !important also takes precedence over that. It'd be necessary to use !important inline and that's another set problems. That would, for example, break the output generated by TinyMCE which is at the moment one of the few options to style content without being a developer.

Average of ratings: -