Atto plugins dropdown menus broken (atto_morefontcolors & atto_morebackcolors)

[matcho]

Plugins atto_morebackcolors and atto_morefontcolors add a dropdown menu to Atto toolbar, supposed to show a list of color squares that allow the user to pick a color.

With Adaptable theme, the dropdown menus are broken and the color squares are hidden (see attachments).

The CSS rule responsible for that is (example for atto_morebackcolors) : .atto_backcolor_button .dropdown-menu { min-width: inherit; } Manually setting a min-width of 50px fixes it.

Using "Clean" theme, the bug doesn't occur (see attachments). I therefore suppose that the incorrect min-width is inherited from Adaptable.

Thanks for your great work, Mathias

[Jeremy Hopkins]

Hi Matcho,

Thanks for reporting this. Are you able to fix this by adding an entry into the Adaptable theme settings "Custom CSS & JS"? By entering code in that field you can override our own style sheets and "fix" this problem on your site ahead of us patching it. If you are able to do that and post the css you use back here it would help us get this fix in more quickly.

[matcho]

Hi Jeremy,

Thanks for your quick answer.

I fixed the bug using custom CSS, but I've been lazy and fixed it at atto-plugins level, with the following code :

.atto_fontcolor_button .dropdown-menu {
    min-width: 50px;
}
.atto_backcolor_button .dropdown-menu {
    min-width: 50px;
}

I didn't find out which element the incorrect min-width was inherited from; I don't have a lot of time to sort this out better but I'll try.

Hope this helps. Greetings,

Mathias

[Info 3bits]

The only relationship with adaptable is the .dropdown class.

Atto inherit the width from the bootsrapbase and if the theme overwrite the class then it is applied:

.atto_morefontcolors_button .dropdown-menu {
    min-width: inherit;
}

From my point of view, the plugin styles should include the min-width value or even the width instead of inherit. So in my opinion is closer to a plugin bug than a Adaptable bug. We can't verify all the plugins are working well with Adaptable and especially when they use its own styles.

Anyway I will try to fix it. The proposed solution works well for the background colour. The font needs 135px min-width.

[matcho]

Thanks.

I will then file a bug to the plugins maintainers too, mentioning this page.

Mathias

[matcho]

Hi,

It seems that the Atto's default color picker "fontcolor" also suffers from the bug (btw: I misspelled the CSS selectors in a previous comment). FYI, the bug report to "atto_morefontcolors" maintainer : https://github.com/ndunand/moodle-atto_morefontcolors/issues/9

Greetings, Mathias

[Info 3bits]

fix #385

→ <<cset f3cf46e35383>>