Resizing Buttons

[melissa_kreider]

I found the Canvas Style Guide through this group - awesome BTW. But, I now want to make my buttons all the same width. I don't know where to place the code?

[Stef_retired]

 @melissa_kreider ​, the link you posted is returning a page error. Could you post the code you're using for the buttons? BTW, if you're using code similar to what's displayed in the main blog post of Creating an inviting course home page , you could use a  style="width=auto%" attribute for the buttons, which would allow them to resize relative to the size of the browser.

[melissa_kreider]

I am indeed using a simliar code...

<p><a id="" class="Button Button--secondary" style="line-height: 1.5;" title="Student Resources" href="https://community.canvaslms.com/courses/13/modules/122" data-api-endpoint="https://asudigitalschool.instructure.com/api/v1/courses/13/modules/122" data-api-returntype="Module">Student Resources</a></p>

[Stef_retired]

 @melissa_kreider ​, by removing the line-height element in your HTML and replacing it with width and height parameters, you can make every button the same width and height:

<p><a id="" class="Button Button--secondary" style="width: 20px; height: 10px;" title="Student Resources" href="https://community.canvaslms.com/courses/13/modules/122" data-api-endpoint="https://asudigitalschool.instructure.com/api/v1/courses/13/modules/122" data-api-returntype="Module">Student Resources</a></p>

When you put that code in a Canvas page, and save it, you'll immediately see that the width and height parameters I selected won't accommodate the text within, as those attributes override the width of the text contained in the button. So you'll need to do some careful testing and retesting to make sure that you've assigned enough pixels to display the button text.

[melissa_kreider]

Thank you! I will play with it and see what I can do.

[Stef_retired]

...but that won't make them equal in size. To do that, you'd want to insert the same specific number of pixels for each button. Post the code, and we'll play with it.

[jacob_standish]

If you are going to have a whole lot of buttons, I'd use the class "btn-block" to make all buttons the same width as the containing div.

[cc_armidale]

It's a couple of years since this thread was active, but I was looking to set button widths and found it this morning. After some experimenting, I found the percentage width HTML coding useful for my purposes. It made the buttons a consistent width on my Canvas pages. Because I wasn't worried about height, it did the job. All of my buttons are now the same width, and if the text is too long to fit in a single line the button automatically resizes to accommodate it. If you want consistent width and height, this may not be what you need.

I'll take some sample code from the fantastically helpful Buttons on Canvas pages thread:

<a class="btn" title="Front Page" href="https://community.canvaslms.com/courses/346426/pages/front-page" data-api-endpoint="https://weber.instructure.com/api/v1/courses/346426/pages/front-page" data-api-returntype="Page">Plain Button</a></p>

To this I'll add the style code (blue and bold for visibility) to set the button width:

<a class="btn" style="width: 40%;" title="Front Page" href="https://community.canvaslms.com/courses/346426/pages/front-page" data-api-endpoint="https://weber.instructure.com/api/v1/courses/346426/pages/front-page" data-api-returntype="Page">Plain Button</a></p>

You can change the percentage to any number that is appropriate for your purposes.

This won't work for everyone and every Canvas page, but for what I'm doing in my courses, it neatens things up very nicely.