DraftJS Расширение редактора до полной ширины столбца - PullRequest
Новая
       33

DraftJS Расширение редактора до полной ширины столбца

0 голосов
/ 11 апреля 2019

Я использую DraftJS в качестве формы ReactJS в сетке Bootstrap, и по какой-то причине редактор DraftJS не расширяется до полной ширины моего столбца Bootstrap.У меня есть сетка, в которой есть текстовое поле (DraftJS) (9 столбцов), а затем справа от него находится кнопка для отправки формы (3 столбца), но на данный момент редактор DraftJS представляет, вероятно, один столбец.и кнопка перемещается в следующий ряд (см. фото).Я попытался применить width: 100% к 9 колонке, но это не оказало никакого влияния.Я вижу, что добавление компонента DraftJS добавляет кучу div и уникальных классов, и мне интересно, существует ли стиль css, который может привести к усечению поля ввода, но я не могу понять, что может быть причиной этого.Любое направление, где искать?

draft-js not full width of col

HTML (включая исходный HTML-код DraftJS): 

<div className="row">
    <form id="comment-form">
        <div className="col-md-9">
            <div className="editor" onClick={this.focus}>
                <div class="DraftEditor-root">
                    <div class="DraftEditor-editorContainer">
                        <div aria-autocomplete="list" aria-describedby="placeholder-71q5n" aria-expanded="false" class="notranslate public-DraftEditor-content" contenteditable="true" role="combobox" spellcheck="false" 
                        style="
                            outline: none; 
                            user-select: text; 
                            white-space: pre-wrap; 
                            overflow-wrap: break-word;
                        ">
                            <div data-contents="true">
                                <div class="" data-block="true" data-editor="71q5n" data-offset-key="mu84-0-0">
                                    <div data-offset-key="mu84-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"><span data-offset-key="mu84-0-0"><br data-text="true"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div className="col-md-3">
            <button type="submit" className="btn btn-primary">Comment</button>
        </div>
    </form>
</div>

Css: 

.editor {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 1px solid #ddd;
  cursor: text;
  padding: 16px;
  width: 100%;
  border-radius: 2px;
  margin-bottom: 2em;
  -webkit-box-shadow: inset 0px 1px 8px -3px #ABABAB;
          box-shadow: inset 0px 1px 8px -3px #ABABAB;
  background: #fefefe; }

.editor :global(.public-DraftEditor-content) {
  min-height: 140px; }
...