Showing results for 
Show  only  | Search instead for 
Did you mean: 
Community Member

Embed a functioning and visually pleasing search bar in a Canvas page?


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: 

  1. Am I even tackling this correctly? 
  2. The search bar works, but on the app I seem to have to clear the cache on reset after two or three uses or the search bar stops working (being clickable). 
  3. I know there is a way to hide HTML from desktop view using this: <div class="hidden-desktop hidden-phone hidden-tablet no-print"> but is there a way to hide HTML from the mobile app? In such an instance I could use both search bars on the page, but only the correct one being displayed on the desktop and mobile app. 
  4. Should I be using something like this instead, but in the HTML portion of the RCE rather than uploading a file? 341115_pastedImage_3.png

Thank you in advance, 


0 Kudos
0 Replies