Topic: Weird Whitespace with the WYSIWYG Editor

Andrew Ford priority asked 1 year ago

There seem to be approximately 25px of whitespace that I cannot get rid of when I add the WYSIWYG editor to my site.


  <div class="form-group m-0">
    <div class="wysiwyg" id="txtarea" data-mdb-wysiwyg="wysiwyg">


form {
  .form-group {
    .wysiwyg {
      border: none;
      &-toolbar {
        display: none;
      &-content {
        position: relative;
        top: -25.59px;
        min-height: 100px;
        border: none;
        box-shadow: none;

With setting top: -25.59px, I am only moving the [contenteditable="true"] area up. Making the weird whitespace area now underneath.

I made snippet,

And I would like to request there is a single option to disable/remove the entire toolbar. People would have to make the CSS rule .wysiwyg-toolbar { display: none; } or add all the [data-mdb-wysiwyg-*="false"] attributes listed under the API tab with the "false" value.

Mateusz Lazaru staff answered 1 year ago

I was able to get rid of the whitespace using margin-bottom: -25px;, check out my snippet:

We will check why does this space appear and discuss adding an option to hide the toolbar.

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 6.1.0
  • Device: N/A
  • Browser: N/A
  • OS: N/A
  • Provided sample code: Yes
  • Provided link: Yes