Canvas Support

Icon button dropdown menu

1 reply · opened Apr 12, 2021

Ooleg_king2Apr 12, 2021

Hello!
I have several issues with Canvas template:

  1. Flat buttons in design can be disabled, but disabled button visually appears like enabled one (just not works :)

  2. Button with button-border style is bigger than button without this style. I wanted to make a filter filled with buttons (bordered for inactive filter item, and filled button - for selected filter item), but this looks weird. Maybe you can add a couple of styles to match such button sizes?

  3. Can I use some system styles to change icon's colors? I know that I can make my own styles for all basic colors (with 'color' css property), but I think it should be included in template stylesheet, isn't it? Something like text-green, text-red and so on. This can be used for icons and texts, where color doesn't mean danger of success, and means just a color.

  4. Can I make dropdown menu from a icon button like this (not best one, but you can see what I need): https://prnt.sc/11b6gqq ?
    If yes, can you provide me with an example code?

Thank you in advance!

SSemicolon WebSTAFFApr 13, 2021

Hello,

Thanks for the suggestions.

  1. This currently does not exist and we will definitely try adding them in the Future Updates.

  2. The Default Buttons included with Canvas and the Border Buttons are provided as-is. Customizations must be done manually in order to extend them. Currently we are working on better managed CSS for Buttons which will be released with Canvas 7 in the near future. Meanwhile, you can consider using the Outline Buttons from Bootstrap: https://getbootstrap.com/docs/4.6/components/buttons/#outline-buttons .

  3. Unfortunately, this is not included. For Text/Icon Colors, you can currently use only the Bootstrap Colors: https://getbootstrap.com/docs/4.6/utilities/colors/#color . But thanks for this suggestion, we will try including a wider gamut of color with Canvas 7.

  4. Sure. You can consider using this Code:
    [ch_pre]
    .dropright .dropdown-toggle::after {
    display: none;

    }

     [
     Plan 1
     $10
 ](#)
 [
     Plan 2
     $100
 ](#)
 [
     Plan 3
     $1000
 ](#)

[/ch_pre]

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard