At my institution I have been tasked with designing a student services hub. Using a template from Miracosta has made this process really straightforward except for embedding a functioning search bar on our Libraries services page.
I created an HTML file and then embedded it into the Canvas page using the following:
<iframe src="/courses/[COURSE ID]/files/[FILE ID]/download" width="100%" height="[WHATEVER WORKS]" data-api-endpoint="https://[CANVAS DOMAIN]/api/v1/courses/[COURSE ID]/files/[FILE ID]" data-api-returntype="File"></iframe>
The result looks like this on a desktop:
But looks like this on the mobile app:
The predicament is that I have another HTML file that displays the search bar perfectly on the mobile app, but spans across the entire page on a desktop and really looks quite bad and out of place. I will attach both files below for reference.
I guess my major questions are:
Thank you in advance,