Megabit/Blazorise

[Bug]: Markdown editor table icon takes the whole row

Closed this issue · 3 comments

Blazorise Version

1.7.0

What Blazorise provider are you running on?

None

Link to minimal reproduction or a simple code snippet

The Markdown component has a menu (icons/buttons) on the top. One specific table button has the class "table" and takes the row component.

Current look:
Image

Old look with 1.6.2 version:
Image

Affected providers:
Bootstrap 4 - https://bootstrapdemo.blazorise.com/tests/markdown
Bootstrap 5 - https://bootstrapdemo.blazorise.com/tests/markdown
Material - https://materialdemo.blazorise.com/tests/markdown

Steps to reproduce & bug description

Use Markdown component with table

What is expected?

The table icon/button looks the same as the other icons/buttons

What is actually happening?

The table icon/button takes the whole row

What browsers do you see the problem on?

Chrome, Microsoft Edge

Any additional comments?

No response

It seems the problem is in how the button class is named. It is defined as a table, which is basically using the Bootstrap default table class.

The solution might be to use prefixes for toolbar buttons.

Not for self: use toolbarButtonClassPrefix on https://github.com/Ionaru/easy-markdown-editor

Setting ToolbarButtonClassPrefix="mde" also doesn't seem to help.

The problem with table button and the .table class is that it is defined in bootstrap leading to the shown issue.

Setting ToolbarButtonClassPrefix="mde" also doesn't seem to help.

The problem with table button and the .table class is that it is defined in bootstrap leading to the shown issue.

It's because ToolbarButtonClassPrefix isn't passed down to the JS. We need to fix it for 1.7.1.