Weird Whitespace with the WYSIWYG Editor

Topic: Weird Whitespace with the WYSIWYG Editor

Andrew Ford pro premium priority asked 2 years ago

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

HTML:

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

LessCSS:

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, https://mdbootstrap.com/snippets/standard/andrew_ford/4769027#html-tab-view

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.

Add comment

mlazaru staff answered 2 years ago