Accepted Solutions
I am having this exact same problem with a table on my home page. When the page is viewed from Pages, everything auto-formats correctly, but when viewed as the Home page, the table does not automatically adjust to the new width. There is a shorter page width due to the Home page's "coming up" column on the right. An image at the top of the page and all text adjusts to the new width just fine, but the table of image links does not. It is too wide, and my students need to scroll to the right to view it all.
What's even more frustrating, I have copy/pasted the html exactly as it is onto the Syllabus page and set that as the Home page. When the table is copy/pasted onto the syllabus page, it DOES automatically format itself to fit the narrower Home page space. Unfortunately, the Syllabus page displays a long list of assignments at the bottom in alphabetical order that I don't want to display, and there is no way yet to disable that assignment list on the course syllabus page.
I am left with the choice between having my students scroll sideways to view the links, or have it formatted correctly as a Syllabus but with a long and unnecessary assignment list.
There's got to be a fix for one of these two problems. Please help someone. It's annoying. Since the same html works correctly as a Syllabus page, but not as a regular Page, I suspect it may be some problem with the style sheet?
Correct formatting as a Page:
Incorrectly formatted table as a Home page:
Correct formatting as a Syllabus, but unusable to me due to the assignment list at the bottom:
What is happening is not your table per say, but rather the images in your table. Your images have a fixed size, and so does your table, but Canvas tables will resize to fit the fixed-size images.
You will need to go into your HTML Editor, and change the width of your image from a set pixel width to a percentage of the cells they are in width. I have also found it very useful to set the width of my table to be a percentage also, then they always take up the same amount of space regardless of the width of their frame (Page, screen, whatever).
In the image below, the three navigation links are set in a one-row, three column table.
The table width is set at 100%, each cell of the table is set at 33%, and the row borders is set a "1" which eats up that final 1% of width. In pages, this table will take up 100% of the width, as the home page it will take up 100% of the width, on a mobile device it will take up 100% of the width.
When you create a table in Canvas using the RCE it automatically sets the size in pixels, but you can open Table Properties and convert the width to a percentage. The images you are using as buttons are also automatically sized in pixels, but you can set them as a percentage of the cell width using HTML.
The annotated HTML snippet below is for navigation buttons set in a table. It is a vertical array of several rows and two columns instead of a horizontal array, but I could not find a quick example for you. Substitute "picture" for "button", and you will see what I mean.
Below is how this will look - on a 24 inch monitor, on an iPad, as a content page, as a home page.................
I hope this helps,
KLM
- Reference
- Community Guidelines
- Security
- Developers
- Open Source
