Topic: WYSIWYG not respecting its own bounding box if in a <td>

IAA_73 priority asked 2 years ago


I have found that putting a WYSIWYG widget inside a <td></td> wrapper causes the widget to not constrain the text within its bounding box. I don't think this is expected behavior.

I've created a snippet here that shows the issue. The first is not within a pair and if you fill it up with text it will "push down", but keep the text within the box.

However in the other two widgets, do the same thing and the text will break out of the bounding box and appear behind the other elements on the page.

https://mdbootstrap.com/snippets/standard/iaa_73/3780038

Am I doing it wrong?

Sample code:

<table>
        <tr valign="baseline">
            <td align="right" valign="top" nowrap="nowrap">Cons:</td>
            <td>
                <div class="wysiwyg" data-mdb-wysiwyg="wysiwyg" id="cons"></div>
            </td>
        </tr>
          <tr valign="baseline">
                <td align="right" valign="top" nowrap="nowrap">Pros:</td>
              <div class="wysiwyg" data-mdb-wysiwyg="wysiwyg" id="pros"></div>
         </tr>

        <tr valign="baseline">
            <td align="right" valign="top" nowrap="nowrap">bouns:</td>
            <td colspan="5" valign="top">
                <div class="wysiwyg" data-mdb-wysiwyg="wysiwyg" id="bonus"></div>
            </td>
        </tr>
</table>

Grzegorz Bujański staff answered 2 years ago


this is due to additional styles imposed by the tables. Just add an additional CSS that changes this:

tr div.wysiwyg, tr div.wysiwyg-content {
  max-height: 100%
}


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.11.0
  • Device: pc
  • Browser: edge
  • OS: win10
  • Provided sample code: Yes
  • Provided link: Yes