CKEditor下的添加按钮不可见

Question

I have used CKEditor django plugin in my form modal . But when i try to show ADD button below the CKEditor, the button doesn't appear in the UI at all.

As shown in the below image, I have currently kept the Add button on the top of the CKEditor text box as its not appearing when placed at the bottom.

Below is the HTML code snippet

   <div class="row">
              <div class="col-md-12">
                <div class="form-group">
                  <label for="">Driver Name</label>
              <input type="text" class="form-control" name="dn" id="dnn" required="True" />
            </div>

            <div class="form-group">
              <label for="st">Driver Description</label>
              <textarea name="editor1" id="editor1"></textarea>
              <script>
                  CKEDITOR.replace( 'editor1' );
              </script>
            </div>
            <div class="modal-footer">
              <button type="submit" class="btn btn-primary up">
                ADD
              </button>
            </div>

          </div>
   </div>

<script src="https://cdn.ckeditor.com/4.5.6/standard/ckeditor.js"></script>

Can someone please suggest how to make the add button make it appear below ckeditor.

Answer 1

If you are using Bootstrap 4, You can use the Order feature if your elements are wrapped inside a flex container.

Your code should look similar to this:

<div class="row">
  <div class="d-flex">
    <div class="col-md-12">

      <div class="form-group">
        <label for="">Driver Name</label>
        <input
          type="text"
          class="form-control"
          name="dn"
          id="dnn"
          required="True"
        />
      </div>

      <div class="form-group">
        <label for="st">Driver Description</label>
        <textarea name="editor1" id="editor1"></textarea>
        <script>
          CKEDITOR.replace("editor1");
        </script>
      </div>

      <div class="modal-footer order-1">
        <button type="submit" class="btn btn-primary up">
          ADD
        </button>
      </div>

    </div>
  </div>
</div>

<script src="https://cdn.ckeditor.com/4.5.6/standard/ckeditor.js"></script>