Problem with specific CSS rules

Problem with specific CSS rules

by Joseph Rézeau -
Number of replies: 6
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators

In quiz questions it looks like the specific CSS rules are not correctly applied in the Moodle app. For instance, with a GapFill question inside a quiz we can see that the rules are:

  1. OK on a website
  2. only half OK on the Moodle App on an Android tablet
  3. not OK at all in https://mobileapp.moodledemo.net/

This is problematic when developing in mobileapp.moodledemo.net/, as we can't see the correct results. As far as I can remember those specific CSS rules used to work there.

Average of ratings: -
In reply to Joseph Rézeau

Re: Problem with specific CSS rules

by Dani Palou -
Picture of Core developers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers
Hi Joseph,

where are those CSS rules defined? Is it a Moodle theme? Or is it the mobilecssurl setting defined in Site administration > Mobile app > Mobile appearance?

Cheers,
Dani
Average of ratings: -
In reply to Dani Palou

Re: Problem with specific CSS rules

by Joseph Rézeau -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators

Hi Dani,

For the GapFill question type they are defined at question\type\gapfill\mobile\styles_app.css

and for my own RegExp question type they are defined at question\type\regexp\mobile\styles_app.css

Note that for RegExp question type the css rules work OK on the Moodle App on an Android tablet but do not at all in https://mobileapp.moodledemo.net/

Thanks for your help,

Joseph

Average of ratings: -
In reply to Joseph Rézeau

Re: Problem with specific CSS rules

by Dani Palou -
Picture of Core developers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers
Hi Joseph,

ok, thanks for the info, now I see they're plugins adapted to the app.

I'm not sure why the styles aren't loaded in the webapp, maybe it's a CORS issue. Can you please open the Console in Chrome DevTools and check if you see any error when you enter your site? You can also check the of the app to see if you find the styles in there. If the webapp fails to load the plugin styles you should probably see an error in the console and the styles won't be in the .

When we use the browser to develop the app we always open it with some flags to make it work:

--allow-file-access-from-files --disable-web-security --allow-running-insecure-content --no-referrers --unlimited-storage --auto-open-devtools-for-tabs --user-data-dir=PATH_TO_DATA_DIR

You can see more info in this documentation page: Moodle Mobile development using Chrome or Chromium.

Cheers,
Dani
Average of ratings: -
In reply to Dani Palou

Re: Problem with specific CSS rules

by Joseph Rézeau -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators

Hi Dani,

In the console I'm getting tons of error messages. Indeed it shows that the css files are not loaded, because of a CORS issue.

I've put all the parameters in the Chrome properties, including the user-data-dir

Extract from error messages:

Average of ratings: -
In reply to Dani Palou

Re: Problem with specific CSS rules

by Joseph Rézeau -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators

In the documentation page: Moodle Mobile development using Chrome or Chromium.

1.- I don't understand this passage:

How to open the browser:

"Path to chrome\chrome.exe" --allow-file-access-from-files --disable-web-security --allow-running-insecure-content --no-referrers --unlimited-storage --auto-open-devtools-for-tabs  --user-data-dir=PATH_TO_DATA_DIR

That's not how you open a browser in Windows.

2.- The doc is missing an important information on how to retrieve user-data-dir=PATH_TO_DATA_DIR

Found the info on this page (for Chromium): https://chromium.googlesource.com/chromium/src/+/master/docs/user_data_dir.md

3.- The docs says (about the parameters) "NOTE: Since Moodle 3.0 an onwards this shouldn't be necessary since the Web Service layer supports CORS requests apart from download assets such as your branded css."

So, are those parameters necessary or not necessary (I'm using Moodle 3.10)?

Average of ratings: -
In reply to Joseph Rézeau

Re: Problem with specific CSS rules

by Dani Palou -
Picture of Core developers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers
Hi Joseph,

I updated the documentation to fix those points, thanks for the feedback.

1) The documentation explains how to launch Chrome from the command line. I found this guide about how to add those parameters to the Chrome launcher in windows and I've added to the documentation.

2) I added the link to user data dir that you provided.

3) I modified the note, now it's:

NOTE: Since Moodle 3.0 an onwards this shouldn't be necessary for WebService calls since the Web Service layer supports CORS requests, but it could still be needed to download some files.

The note was added because initially these parameters were needed to make WebService calls work, now they're no longer needed for that but you still need to use them to download some files like plugin styles.

Cheers,
Dani
Average of ratings: -