ubc-web-services / ubc_ckeditor_widgets

Adds some common widgets to CKeditor
0 stars 2 forks source link

"Three Columns" Plugin: Columns Are Too Narrow and Do Not Flow Properly Through the Page #17

Closed franceslui closed 5 months ago

franceslui commented 5 months ago

Problem/Motivation

The columns generated by the "Three Columns" plugin are too narrow and do not flow through the page correctly.

Steps to reproduce

  1. Configure a text format such as "Basic HTML".
  2. Drag the "Three Columns" plugin from the "Available buttons" section to the "Active toolbar" section.
  3. Save the text format configuration page.
  4. Create a new page.
  5. Use the "Three Columns" plugin on the toolbar of the body to create 3 columns.
  6. Add a substantial amount of text to each of the three generated columns.
  7. Save the new page.

Observed Behavior

The columns in both the text editor and the saved page are very narrow and do not flow through the page properly.

Screenshots

Notes When the "Three Vertical Cards" plugin is also moved from the "Available buttons" section to the "Active toolbar" section in the same text format configuration page, the "Three Columns" plugin generates columns that are not narrow and flow through the page correctly.

Screenshots with "Three Vertical Cards" Plugin Enabled

joelpittet commented 5 months ago

As a side note, the reason the editor looks incorrect is that a class doesn't get applied. I believe it was missing widget-column-options this is needed for the CSS and JS to function... strange is it kicks in when the other button is added

occupant commented 5 months ago

Thanks @joelpittet @franceslui , this really helped narrow it down. The model > view conversion for classes was mistakenly omitted from the columns widgets but WAS included with the 3 column widgets - that's why it worked when that widget was enabled vs with it disabled.

I've added the conversion to all of the appropriate widgets and the latest release 3.1.20 corrects the issue.