Community

cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
debra_mansperge
Community Contributor

Anchor a div?

Jump to solution

Inspired by  @tom_gibbons  course on HTML I am trying to come up with a grid based home page for my courses.  He, very smartly, uses graphics files to layout his grid and anchors them to course content.  I'm too lazy to write all the 'alt' content so I decided to try and use flexbox grid classes from the styleguide.  I've gotten to the point where I like my layout and now I'm trying to anchor each item to a page in my course.  Here's the layout:

Home page grid layout

I haven't set it to the home page yet - I'm still playing with it.

The top box has been anchored - or rather, the text is anchored.  I would really like the whole div that contains it to be an active link, but every time I try to wrap an "<a>" tag around the div, the code gets stripped when I save it. 😞

Here's the code for the top box.  Any ideas on how to make the whole 'div' a link?

code to make responsive grid box

Or should I just use gifs and anchor them?

Tags (1)
1 Solution

Accepted Solutions
Anonymous
Not applicable

I can't see your Commons file because I don't have access, but if you aren't, I'd also try using some of the flexbox classes in order to make it the design a little easier. In particular, it would resize the columns on mobile browsers to also be single column just like in the app.

Here is a reworked version using the flexbox classes (col-xs-12 col-lg-4)

<div class="content-box">
    <div class="grid-row">
        <div class="col-xs-12 col-lg-4"><a class="btn" role="button" href="/#!" style="text-decoration: none; padding: 40px 20px; display: block; text-align: center;
            background: #D74061; color: #ffffff; font-weight: bold;margin: 10px auto"
>

            Chapter 2<br />Measuresments, Unity, and Density</a>
        </div>
        <div class="col-xs-12 col-lg-4"><a class="btn" role="button" href="/#!" style="text-decoration: none; padding: 40px 20px; display: block; text-align: center;
            background: #D74061; color: #ffffff; font-weight: bold;margin: 10px auto"
>

            Chapter 2<br />Measuresments, Unity, and Density</a>
        </div>
        <div class="col-xs-12 col-lg-4"><a class="btn" role="button" href="/#!" style="text-decoration: none; padding: 40px 20px; display: block; text-align: center;
            background: #D74061; color: #ffffff; font-weight: bold;margin: 10px auto"
>

            Chapter 2<br />Measuresments, Unity, and Density</a>
        </div>
        <div class="col-xs-12 col-lg-4"><a class="btn" role="button" href="/#!" style="text-decoration: none; padding: 40px 20px; display: block; text-align: center;
            background: #D74061; color: #ffffff; font-weight: bold;margin: 10px auto"
>

            Chapter 2<br />Measuresments, Unity, and Density</a>
        </div>
        <div class="col-xs-12 col-lg-4"><a class="btn" role="button" href="/#!" style="text-decoration: none; padding: 40px 20px; display: block; text-align: center;
            background: #D74061; color: #ffffff; font-weight: bold;margin: 10px auto"
>

            Chapter 2<br />Measuresments, Unity, and Density</a>
        </div>
    </div>
</div>

If only we had the ability to add our own CSS styles at the Course level....this could look so much cleaner. :smileycry:

View solution in original post

45 Replies
kona
Community Coach
Community Coach

 @debra_mansperge , this is above my level of expertise, but to get your question a little more visibility I’ve shared it with the Canvas Developers‌ group in the Community. They do a lot of coding and html (granted normally on the back end of Canvas), but I thought some might still be able to help. 

Kona

GideonWilliams
Community Champion

Had a play with this but not really an expert. Frustratingly found this site - Make Entire Div Clickable | CSS-Tricks  which says it should be OK to include <a> tags outside of <div>s but you are right - they are stripped. Not sure why?

It is very frustrating to have stuff like this blocked. Even more so when you could probably get the job done much quicker if you could include css on the page and make up nested tables with divs or even use something like this - https://divtable.com/generator/ 

Wonderful design by the way!

It is really frustrating when the code gets stripped.  I understand that they want to control for accessibility and function, but couldn't they just highlight the code that's not allowed?  I've started keeping a file open just to save my code before I save it in Canvas.  
To me, my design seems like a good way to improve accessibility - screenreaders can easily navigate the h2 links.  It's also easy to change the titles by using the RCE.  
I've tried experimenting with buttons this morning.  I think I'm going to have to give in and make some gifs to use as anchors.  Thanks for trying!

Appreciate what you say. The fact that greater range of code is allowed on other open LMS eg Moodle is a little frustrating. I like the way Blackboard deals with it - Security Management - Safe HTML | Blackboard Help 

Dunno. I used to be able to implement HTML in Bb Vista that would break and override the interface style sheet. That wasn't my intention, but it was the result. So I ran with it.

 @debra_mansperge ‌: like you, I also copy my experimental tags, now. But it took a while for me to learn that lesson.

Once upon a time, about 5 years ago, I was up at 3 am working on a course. I would save the content page and I could watch my code vanish from the code editor. I remember shouting, "Why? Why can't Canvas understand that I NEED ROUNDED CORNERS?!? Why can't I have the border-radius tag?!!!?"

No one answered.

Two years later I was teaching a workshop on Canvas HTML and made a video (no audio, because I didn't want any screaming) to demonstrate. At least they made changes so that you didn't have to watch your tags vanish in a puff of futility.

Canvas Changes HTML - YouTube 

I saw the video in your course - I understand your frustration!

debra_mansperge
Community Contributor

So I decided just to make the text into the links. (I am terrible at making gifs) I uploaded the page to commons if anyone is interested.  What's nice about it is that you can change the text in RCE and add the anchors there, too.  Then you can export the whole thing and edit the "<a>" tags to make the text white and un-underlined.  

Here's the final version in Chrome:

284961_flexbox in browser.JPG

And in the App (Android):

view of flexible grid page in canvas app  

And in Chrome browser for Android:

view of flexible grid page in android chrome browser

I'm still interested if someone can figure out how to make the whole container clickable.

Shar
Community Champion

Hi  @tom_gibbons 

For what it's worth, you can get the rounded borders with a class="border-round" on that div tag.

Cheers - Shar

tom_gibbons
Community Contributor

Excellent...

*steeples fingers*