HTML elements injected via JS (quilljs) conflicting with flexbox

I'm trying to create a very simple page, essentially no different than stack overflow's layout in that there is a sidebar and a "content" area which can scroll. My content area however is meant to be taken up entirely by a quilljs text editor.

I just create a div and tell quilljs to use that div for the editor...

    <article>

         <div id="editor"></div>

    </article>



    <script>

        var quill = new Quill('#editor', {theme: 'snow'});

    </script>

Which works fine in theory, however quilljs injects an additional div above the editor div, so I end up with:

     <article>

         <div id="ql-toolbar"></div>

         <div id="editor"></div>

    </article>

If I inspect and delete the toolbar div manually, I can see that the editor div is sized as desired (it fills the entire article element and any overflowing text has a scrollbar).

My conclusion is that injecting the additional div toolbar is the root cause of the issue, however I can't seem to find a good solution...

The only solution I currently see is to manually adjust the size of the "editor" div in order to compensate for the additional div that I know will be added.

 #editor {

  max-height: calc(100% - 40px);

 }

However this solution falls apart pretty quick with the prospect of variable size toolbars and also when manually adjusting the window width. I'd like to find a more robust solution if one exists.

Here's a codepen of the issue (notice how the bottom of the scollbar is cut off):
https://codepen.io/anon/pen/wQyxVm

edited Nov 22 '18 at 4:51

asked Nov 22 '18 at 4:45

rossoneri

add a comment |

I just create a div and tell quilljs to use that div for the editor...

    <article>

         <div id="editor"></div>

    </article>



    <script>

        var quill = new Quill('#editor', {theme: 'snow'});

    </script>

Which works fine in theory, however quilljs injects an additional div above the editor div, so I end up with:

     <article>

         <div id="ql-toolbar"></div>

         <div id="editor"></div>

    </article>

If I inspect and delete the toolbar div manually, I can see that the editor div is sized as desired (it fills the entire article element and any overflowing text has a scrollbar).

My conclusion is that injecting the additional div toolbar is the root cause of the issue, however I can't seem to find a good solution...

The only solution I currently see is to manually adjust the size of the "editor" div in order to compensate for the additional div that I know will be added.

 #editor {

  max-height: calc(100% - 40px);

 }

However this solution falls apart pretty quick with the prospect of variable size toolbars and also when manually adjusting the window width. I'd like to find a more robust solution if one exists.

Here's a codepen of the issue (notice how the bottom of the scollbar is cut off):
https://codepen.io/anon/pen/wQyxVm

edited Nov 22 '18 at 4:51

asked Nov 22 '18 at 4:45

rossoneri

add a comment |

I just create a div and tell quilljs to use that div for the editor...

    <article>

         <div id="editor"></div>

    </article>



    <script>

        var quill = new Quill('#editor', {theme: 'snow'});

    </script>

Which works fine in theory, however quilljs injects an additional div above the editor div, so I end up with:

     <article>

         <div id="ql-toolbar"></div>

         <div id="editor"></div>

    </article>

If I inspect and delete the toolbar div manually, I can see that the editor div is sized as desired (it fills the entire article element and any overflowing text has a scrollbar).

My conclusion is that injecting the additional div toolbar is the root cause of the issue, however I can't seem to find a good solution...

The only solution I currently see is to manually adjust the size of the "editor" div in order to compensate for the additional div that I know will be added.

 #editor {

  max-height: calc(100% - 40px);

 }

However this solution falls apart pretty quick with the prospect of variable size toolbars and also when manually adjusting the window width. I'd like to find a more robust solution if one exists.

Here's a codepen of the issue (notice how the bottom of the scollbar is cut off):
https://codepen.io/anon/pen/wQyxVm

edited Nov 22 '18 at 4:51

asked Nov 22 '18 at 4:45

rossoneri

I just create a div and tell quilljs to use that div for the editor...

    <article>

         <div id="editor"></div>

    </article>



    <script>

        var quill = new Quill('#editor', {theme: 'snow'});

    </script>

Which works fine in theory, however quilljs injects an additional div above the editor div, so I end up with:

     <article>

         <div id="ql-toolbar"></div>

         <div id="editor"></div>

    </article>

If I inspect and delete the toolbar div manually, I can see that the editor div is sized as desired (it fills the entire article element and any overflowing text has a scrollbar).

My conclusion is that injecting the additional div toolbar is the root cause of the issue, however I can't seem to find a good solution...

The only solution I currently see is to manually adjust the size of the "editor" div in order to compensate for the additional div that I know will be added.

 #editor {

  max-height: calc(100% - 40px);

 }

However this solution falls apart pretty quick with the prospect of variable size toolbars and also when manually adjusting the window width. I'd like to find a more robust solution if one exists.

Here's a codepen of the issue (notice how the bottom of the scollbar is cut off):
https://codepen.io/anon/pen/wQyxVm

javascript html css quill quilljs

edited Nov 22 '18 at 4:51

asked Nov 22 '18 at 4:45

rossoneri

edited Nov 22 '18 at 4:51

asked Nov 22 '18 at 4:45

rossoneri

edited Nov 22 '18 at 4:51

asked Nov 22 '18 at 4:45

rossoneri

asked Nov 22 '18 at 4:45

rossoneri

asked Nov 22 '18 at 4:45

rossoneri

add a comment |

1 Answer
1

active

oldest

votes

You might style your article and #editor like this:

var quill = new Quill('#editor', {

  theme: 'snow'

});

html,

body {

  height: 100%;

  line-height: 1.5;

  margin: 0px;

}



.wrap {

  height: 100vh;

  display: flex;

}



main {

  flex: 1;

  display: flex;

}



aside {

  overflow-y: auto;

  min-width: 200px;

  max-width: 200px;

  flex: 1;

  background: #f7f7f7;

}



article {

  display: flex;

  flex-flow: column;

  overflow: hidden;

  flex: 2;

  background: #f0eeee;

  height: 100vh;

}



#editor {

  height: auto;

  overflow: auto;

}



h1 {

  margin-top: 0;

}

<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet" />



<div class="wrap">

  <main>

    <aside>

      <div class="tab">

        <ul id="tablist">

          <li>a</li>

          <li>a</li>

          <li>a</li>

          <li>a</li>

          <li>a</li>

          <li>a</li>

          <li>a</li>

          <li>a</li>

        </ul>

      </div>



    </aside>



    <article>

      <div id="editor">

        <p>

          a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a

          </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a

        </p>

      </div>

    </article>

  </main>

</div>

answered Nov 22 '18 at 5:06

Kosh Very

10.6k1924

Thanks for the reply, clearly I don't have a good grasp on flex yet. I did have trouble replicating this fix locally, and identified the issue a a lack of a doctype declaration in my local html page.

– rossoneri
Nov 22 '18 at 21:16

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53424035%2fhtml-elements-injected-via-js-quilljs-conflicting-with-flexbox%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

You might style your article and #editor like this:

var quill = new Quill('#editor', {

  theme: 'snow'

});

html,

body {

  height: 100%;

  line-height: 1.5;

  margin: 0px;

}



.wrap {

  height: 100vh;

  display: flex;

}



main {

  flex: 1;

  display: flex;

}



aside {

  overflow-y: auto;

  min-width: 200px;

  max-width: 200px;

  flex: 1;

  background: #f7f7f7;

}



article {

  display: flex;

  flex-flow: column;

  overflow: hidden;

  flex: 2;

  background: #f0eeee;

  height: 100vh;

}



#editor {

  height: auto;

  overflow: auto;

}



h1 {

  margin-top: 0;

}

<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet" />



<div class="wrap">

  <main>

    <aside>

      <div class="tab">

        <ul id="tablist">

          <li>a</li>

          <li>a</li>

          <li>a</li>

          <li>a</li>

          <li>a</li>

          <li>a</li>

          <li>a</li>

          <li>a</li>

        </ul>

      </div>



    </aside>



    <article>

      <div id="editor">

        <p>

          a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a

          </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a

        </p>

      </div>

    </article>

  </main>

</div>

answered Nov 22 '18 at 5:06

Kosh Very

10.6k1924

Thanks for the reply, clearly I don't have a good grasp on flex yet. I did have trouble replicating this fix locally, and identified the issue a a lack of a doctype declaration in my local html page.

– rossoneri
Nov 22 '18 at 21:16

add a comment |

You might style your article and #editor like this:

var quill = new Quill('#editor', {

  theme: 'snow'

});

html,

body {

  height: 100%;

  line-height: 1.5;

  margin: 0px;

}



.wrap {

  height: 100vh;

  display: flex;

}



main {

  flex: 1;

  display: flex;

}



aside {

  overflow-y: auto;

  min-width: 200px;

  max-width: 200px;

  flex: 1;

  background: #f7f7f7;

}



article {

  display: flex;

  flex-flow: column;

  overflow: hidden;

  flex: 2;

  background: #f0eeee;

  height: 100vh;

}



#editor {

  height: auto;

  overflow: auto;

}



h1 {

  margin-top: 0;

}

<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet" />



<div class="wrap">

  <main>

    <aside>

      <div class="tab">

        <ul id="tablist">

          <li>a</li>

          <li>a</li>

          <li>a</li>

          <li>a</li>

          <li>a</li>

          <li>a</li>

          <li>a</li>

          <li>a</li>

        </ul>

      </div>



    </aside>



    <article>

      <div id="editor">

        <p>

          a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a

          </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a

        </p>

      </div>

    </article>

  </main>

</div>

answered Nov 22 '18 at 5:06

Kosh Very

10.6k1924

Thanks for the reply, clearly I don't have a good grasp on flex yet. I did have trouble replicating this fix locally, and identified the issue a a lack of a doctype declaration in my local html page.

– rossoneri
Nov 22 '18 at 21:16

add a comment |

You might style your article and #editor like this:

var quill = new Quill('#editor', {

  theme: 'snow'

});

html,

body {

  height: 100%;

  line-height: 1.5;

  margin: 0px;

}



.wrap {

  height: 100vh;

  display: flex;

}



main {

  flex: 1;

  display: flex;

}



aside {

  overflow-y: auto;

  min-width: 200px;

  max-width: 200px;

  flex: 1;

  background: #f7f7f7;

}



article {

  display: flex;

  flex-flow: column;

  overflow: hidden;

  flex: 2;

  background: #f0eeee;

  height: 100vh;

}



#editor {

  height: auto;

  overflow: auto;

}



h1 {

  margin-top: 0;

}

<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet" />



<div class="wrap">

  <main>

    <aside>

      <div class="tab">

        <ul id="tablist">

          <li>a</li>

          <li>a</li>

          <li>a</li>

          <li>a</li>

          <li>a</li>

          <li>a</li>

          <li>a</li>

          <li>a</li>

        </ul>

      </div>



    </aside>



    <article>

      <div id="editor">

        <p>

          a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a

          </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a

        </p>

      </div>

    </article>

  </main>

</div>

answered Nov 22 '18 at 5:06

Kosh Very

10.6k1924

You might style your article and #editor like this:

var quill = new Quill('#editor', {

  theme: 'snow'

});

html,

body {

  height: 100%;

  line-height: 1.5;

  margin: 0px;

}



.wrap {

  height: 100vh;

  display: flex;

}



main {

  flex: 1;

  display: flex;

}



aside {

  overflow-y: auto;

  min-width: 200px;

  max-width: 200px;

  flex: 1;

  background: #f7f7f7;

}



article {

  display: flex;

  flex-flow: column;

  overflow: hidden;

  flex: 2;

  background: #f0eeee;

  height: 100vh;

}



#editor {

  height: auto;

  overflow: auto;

}



h1 {

  margin-top: 0;

}

<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet" />



<div class="wrap">

  <main>

    <aside>

      <div class="tab">

        <ul id="tablist">

          <li>a</li>

          <li>a</li>

          <li>a</li>

          <li>a</li>

          <li>a</li>

          <li>a</li>

          <li>a</li>

          <li>a</li>

        </ul>

      </div>



    </aside>



    <article>

      <div id="editor">

        <p>

          a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a

          </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a

        </p>

      </div>

    </article>

  </main>

</div>

var quill = new Quill('#editor', {

  theme: 'snow'

});

html,

body {

  height: 100%;

  line-height: 1.5;

  margin: 0px;

}



.wrap {

  height: 100vh;

  display: flex;

}



main {

  flex: 1;

  display: flex;

}



aside {

  overflow-y: auto;

  min-width: 200px;

  max-width: 200px;

  flex: 1;

  background: #f7f7f7;

}



article {

  display: flex;

  flex-flow: column;

  overflow: hidden;

  flex: 2;

  background: #f0eeee;

  height: 100vh;

}



#editor {

  height: auto;

  overflow: auto;

}



h1 {

  margin-top: 0;

}

<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet" />



<div class="wrap">

  <main>

    <aside>

      <div class="tab">

        <ul id="tablist">

          <li>a</li>

          <li>a</li>

          <li>a</li>

          <li>a</li>

          <li>a</li>

          <li>a</li>

          <li>a</li>

          <li>a</li>

        </ul>

      </div>



    </aside>



    <article>

      <div id="editor">

        <p>

          a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a

          </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a

        </p>

      </div>

    </article>

  </main>

</div>

var quill = new Quill('#editor', {

  theme: 'snow'

});

html,

body {

  height: 100%;

  line-height: 1.5;

  margin: 0px;

}



.wrap {

  height: 100vh;

  display: flex;

}



main {

  flex: 1;

  display: flex;

}



aside {

  overflow-y: auto;

  min-width: 200px;

  max-width: 200px;

  flex: 1;

  background: #f7f7f7;

}



article {

  display: flex;

  flex-flow: column;

  overflow: hidden;

  flex: 2;

  background: #f0eeee;

  height: 100vh;

}



#editor {

  height: auto;

  overflow: auto;

}



h1 {

  margin-top: 0;

}

<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet" />



<div class="wrap">

  <main>

    <aside>

      <div class="tab">

        <ul id="tablist">

          <li>a</li>

          <li>a</li>

          <li>a</li>

          <li>a</li>

          <li>a</li>

          <li>a</li>

          <li>a</li>

          <li>a</li>

        </ul>

      </div>



    </aside>



    <article>

      <div id="editor">

        <p>

          a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a

          </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a a </br> a

        </p>

      </div>

    </article>

  </main>

</div>

answered Nov 22 '18 at 5:06

Kosh Very

10.6k1924

answered Nov 22 '18 at 5:06

Kosh Very

10.6k1924

answered Nov 22 '18 at 5:06

Kosh Very

10.6k1924

answered Nov 22 '18 at 5:06

Kosh Very

10.6k1924

Thanks for the reply, clearly I don't have a good grasp on flex yet. I did have trouble replicating this fix locally, and identified the issue a a lack of a doctype declaration in my local html page.

– rossoneri
Nov 22 '18 at 21:16

add a comment |

Thanks for the reply, clearly I don't have a good grasp on flex yet. I did have trouble replicating this fix locally, and identified the issue a a lack of a doctype declaration in my local html page.

– rossoneri
Nov 22 '18 at 21:16

Thanks for the reply, clearly I don't have a good grasp on flex yet. I did have trouble replicating this fix locally, and identified the issue a a lack of a doctype declaration in my local html page.

– rossoneri
Nov 22 '18 at 21:16

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Nsryjdtyk