How do I indicate the active tab in a tabbed interaction?
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
I am working with this never ending home page of my Student Resource Center. I abandoned graphic buttons on my tabs, which I got to work, but didn't translate when the page jumped to Spanish so I switched to an H4 text with a highlight on them to be able to be translated. Now I have the visual I was looking for.
I have two questions.
1. Is there a way to add some code that will indicate active tab when it's clicked? I'm thinking white with red lettering but can't figure out how to do that like you'd do with a button in other applications.
2. Is there any way to constrain these tabs so they don't wrap to three lines? It's not bad when this isn't the home page with the side bars on the right. It doesn't look like there's a way to turn that off. My tech guy put it in a table and that blew up the tabbed functionality.
Hoping the hive mind has some brilliance here. Thanks!!
Solved! Go to Solution.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Thank you @jmarrapodi for including a screenshot with your questions. I don't think there is an easy way to force your tab labels not to wrap, and it would be difficult anyway to predict the browser window size for viewers.
For making the active tab more visible, have you viewed the Canvas HTML Editor Allowlist? That limits the CSS and HTML that users can use in the Rich Content Editor. If the elements that will meet your needs are not there, you could look to edit the CSS for your account or subaccount. You could add a class that would incorporate the changes that will benefit your students. For more information on that, please visit the Canvas Guides page How do I upload custom JavaScript and CSS files to an account?
