Кнопка добавления под CKEditor не видна - PullRequest
Новая
       75

Кнопка добавления под CKEditor не видна

0 голосов
/ 07 февраля 2020

Я использовал CKEditor django плагин в моей модальной форме . Но когда я пытаюсь показать кнопку ADD под CKEditor, кнопка вообще не появляется в интерфейсе пользователя.

Как показано на рисунке ниже, в настоящее время я сохраняю Добавить кнопку в верхней части текстового поля CKEditor , поскольку она не отображается при размещении внизу.

enter image description here

Ниже HTML фрагмент кода 

   <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>

Может кто-нибудь подсказать, как сделать так, чтобы кнопка добавления отображалась под ckeditor.

1 Ответ

0 голосов
/ 01 апреля 2020

Если вы используете Bootstrap 4, вы можете использовать функцию Order , если ваши элементы заключены в гибкий контейнер.

Ваш код должен выглядеть примерно так: 

<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>
...