Enhanceable Content Question - CSS Broken?

[mterborg]

Hello,

Last spring I started working on a Canvas site for this fall's classes.  I discovered enhanceable content  tabs. I followed the code from  one of many sites (i.e. https://atguides.humboldt.edu/m/canvas_instructor_guides/l/768704-how-do-i-create-tabs-in-my-canvas-....)  and it worked well.  I was looking forward to using this design in my courses. Unfortunately, something seems to have happened. While the design still works somewhat, the tabs were replaced by  black text on a blue bar. The text is illegible and is also presented in an unordered list. 

I did a quick search for the code to see if something changed or if I did something incorrectly, but couldn't find any information. Does anyone know what happened? Will it be fixed or will I need to abandon expandable tabs and revert back to a simpler layout?

Thank you.

https://community.canvaslms.com/t5/Canvas-Question-Forum/Formatting-tabs-in-Canvas-page/td-p/197474

[Chris_Hofer]

Hi @mterborg ...

I could be wrong, but I don't think it has to do with CSS.  The HTML code sample that I have in a course (I'm a Canvas admin at our school) still seems to work.  But, as @James has pointed out in the topic you linked to at the bottom of your question, "One thing to watch out for is that Canvas has announced they are deprecating the "enhanceable_content tabs" behavior as Chris mentioned. It's also been 3 years since they announced the deprecation and it's still there. They want institutions to supply their own CSS and JavaScript to make it work, but for the time being, it continues."  [Solved: Re: Formatting tabs in Canvas page - Instructure Community (canvaslms.com)]

My sample code looks something like this:

<div class="enhanceable_content tabs">
   <ul>
      <li><a href="#fragment-1">Tab One</a></li>
      <li><a href="#fragment-2">Tab Two</a></li>
      <li><a href="#fragment-3">Tab Three</a></li>
   </ul>
   <div id="fragment-1">Tab 1 content</div>
   <div id="fragment-2">Tab 2 content</div>
   <div id="fragment-3">Tab 3 content</div>
</div>

And, if you wanted colored tabs, you could do one of these two things ... filling in your own colors with hex values:

<div class="enhanceable_content tabs">
   <ul>
      <li style="background-color: #acf53d;"><a href="#fragment-1">Tab One</a></li>
      <li style="background-color: #c0f56e;"><a href="#fragment-2">Tab Two</a></li>
      <li style="background-color: #8eeb00;"><a href="#fragment-3">Tab Three</a></li>
   </ul>
   <div id="fragment-1">Tab 1 content</div>
   <div id="fragment-2">Tab 2 content</div>
   <div id="fragment-3">Tab 3 content</div>
</div>

or

<div class="enhanceable_content tabs">
   <ul style="background-color: #dcfa70;">
      <li><a href="#fragment-1">Tab One</a></li>
      <li><a href="#fragment-2">Tab Two</a></li>
      <li><a href="#fragment-3">Tab Three</a></li>
   </ul>
   <div id="fragment-1">Tab 1 content</div>
   <div id="fragment-2">Tab 2 content</div>
   <div id="fragment-3">Tab 3 content</div>
</div>

Does your code look similar to any of these examples?

[mterborg]

Thanks, I didn't realize it was being deprecated.  I found it as i was stumbling across the web looking for Canvas resources.

Here's my code:

I think it's similar to yours.

<div class="enhanceable_content tabs">
<ul>
<li><a href="#tab-1">First Tab </a></li>
<li><a href="#tab-2">Second Tab </a></li>
<li><a href="#tab-3">Third Tab </a></li>
</ul>
<div id="tab-1">
<p>Tab 1 content.</p>
</div>
<div id="tab-2">
<p>Tab 2 content.</p>
</div>
<div id="tab-3">
<p>Tab 3 content.</p>
</div>
</div>

My Tabs

I also  used your colored version and this is what the results were Colored Tabs 

I hope the images come through. I tried uploading them but I don't have permission to do so. The course that's hosting them is a beta course, no student involvement  nor does it have proprietary content. Just a few images.

Thanks for your help. It makes sense that they're pushing institutions to host their own style sheets. If I had the code, I might see if I could figure out who I needed to ask.

Oh, the code was working beautifully up until mid this week or mid last week. Then something happened. It also seems to be impacting the settings area.

[Chris_Hofer]

Hi again, @mterborg ...

Thanks for sharing your code.  The two additional links that you included are behind a username/password, so I would not be able to get past those.  You'll have to figure out a different way to share your images if you choose to do so.  Regarding your code that you also shared...  The only difference I see in your code is the last half where you are including paragraph <p> </p> tags.  I'm not sure why you are doing this.  Not saying it's wrong, but have you tried removing those tags so that it looks more like my examples?  (You'll notice my examples don't include those kinds of tags at all.)  I did try pasting in your code to a new blank page in my own sandbox course, and after I saved the page, it looked fine.  The tabs worked as expected, and I could see the different content within each one.  So, maybe the paragraph tags are fine the way they are, too.

Is there anything else you can pinpoint about your HTML code or the content you are including that would cause things to look different?

[mterborg · Accepted solution]

Hi, 

Thank you for your assistance. After reading your earlier message I decided to see wha would happen if I viewed the site in Safari. I don't typically use this site as it's not officially supported by Canvas and our students' platform is Chrome. So I cannot use it if it doesn't work in Chrome. The result was that it works just fine. I'm glad it worked even though it hadn't been working on any site where I encountered it in Chrome.  This made me wonder if it was a profile problem. So I switched profiles and tried it again. It works beautifully, While I'm not sure what went wrong in the other profile, I'm' not sure I care. Though it does intrigue me - slightly. I'm still happy to upload the images in a Google Drive folder and share them with you if you're interested. I assume you're not as the problem has been somewhat resolved. 

Thanks again for your help.