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.


mlazaru staff answered 2 years ago

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

https://mdbootstrap.com/snippets/standard/mlazaru/4771189

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


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
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 6.1.0
  • Device: N/A
  • Browser: N/A
  • OS: N/A
  • Provided sample code: No
  • Provided link: Yes