cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Community Member

Student app renders page differently - why?

Jump to solution

I'm creating an infographic-style page in Canvas and the iOS student app appears to be rendering it differently to browsers (both desktop and mobile browsers). 

Browser:

Screenshot

App:

App screenshot

Why is there whitespace at the bottom of the cloud image on the app? I'm not so familiar with the Canvas student app - is this common behaviour?

[Incidentally, the page is a combination of stacked divs (with text paragraphs) and images with the colour matching the div background. All of them have 0 margins, which is why this gap is so annoying.]

Labels (1)
1 Solution

Accepted Solutions
Highlighted

Thanks for your reply Ryan.Seilhamer@ucf.edu. I've found a solution! But it's not via the theme editor.

(Incidentally, I tried adding a custom class with "margin: 0; padding: 0;" to the mobile app CSS file in the theme editor, and using it on the divs, but the margin remained.)

The solution was to set the image to "display: block;" 

What I suspect was happening is that the app adds a margin to the bottom of inline elements (or maybe inline-block elements, or maybe just images - I haven't tested that!) to account for a baseline - so changing to block display sidesteps that rendering idiosyncrasy. 

View solution in original post

7 Replies
Highlighted
Surveyor

Hi d.ellis@auckland.ac.nz‌, I think that will be down to the difference in the way the app browser implements HTML compared to the other browsers you'll be testing on. Maybe have a look at the Canvas Mobile CSS to see if anything can be done there.

Highlighted

Thanks n.adamson@ljmu.ac.uk, I was afraid that would be the case! I wonder what browsing engine the app uses - and why it couldn't just use Gecko or WebKit instead.

0 Kudos

d.ellis@auckland.ac.nz‌,

The mobile app pulls in information from the API, cleans it up and re-renders it for the app. So, as you guessed it, they aren't using a built-in browser to render the content 1:1. The only solution is to have your Canvas admins to add some CSS to the mobile CSS in the theme editor for it to use the correct font. It's a hurdle, but it will work. Here are some examples:

https://community.canvaslms.com/message/50131-mobile-styles-css-in-the-canvas-app 

If you need anything else, just ask! 

Highlighted

Thanks Ryan - the font isn't really an issue here, it's the margin / padding differences on the image or div. I assume that something in the app (or its HTML rendering) is adding the whitespace, because the images and div already have their margins and padding zeroed. Our admins are very unlikely to add custom CSS to fix one page, alas Smiley Sad 

0 Kudos
Highlighted

d.ellis@auckland.ac.nz‌,

Yeah, unfortunately, is your admins are unwilling to write you a custom CSS class to handle the margins, then you really don't have really have any other options. I'd still suggest you ask because if they gave you one custom class (specific for mobile) it wouldn't have any effect on the rest of Canvas. 

Highlighted

Thanks for your reply Ryan.Seilhamer@ucf.edu. I've found a solution! But it's not via the theme editor.

(Incidentally, I tried adding a custom class with "margin: 0; padding: 0;" to the mobile app CSS file in the theme editor, and using it on the divs, but the margin remained.)

The solution was to set the image to "display: block;" 

What I suspect was happening is that the app adds a margin to the bottom of inline elements (or maybe inline-block elements, or maybe just images - I haven't tested that!) to account for a baseline - so changing to block display sidesteps that rendering idiosyncrasy. 

View solution in original post

Highlighted

That's great you found a solution that worked and thanks for sharing. Yeah, it's not trivial to manage CSS between the web and mobile app, so kudos for keeping at it.