Reputation: 697

Quill Editor not Working with Bootstrap Flow

I have a requirement to use 7 Quill editor instances. I put 6 of them in the same row and two different columns and they seem to line up nicely. I need to put the 7th one below the other 6 and have take the whole row and it shows up near the top of my view. It seems Quill does not follow the flow correctly when adding another row. Right now, I'm thinking a table will be the best.

Can someone explain how I can change my HTML below to get Quill to flow correctly?

<!doctype html>
<html lang="en" class="h-100" data-bs-theme="auto">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">

    <script src="quill.js"></script>
    <link href="quill.snow.css" rel="stylesheet">
    <link href="bootstrap.min.css" rel="stylesheet">

    <style>
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
        }

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }

        .b-example-divider {
            width: 100%;
            height: 3rem;
            background-color: rgba(0, 0, 0, .1);
            border: solid rgba(0, 0, 0, .15);
            border-width: 1px 0;
            box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
        }

        .b-example-vr {
            flex-shrink: 0;
            width: 1.5rem;
            height: 100vh;
        }

        .bi {
            vertical-align: -.125em;
            fill: currentColor;
        }

        .nav-scroller {
            position: relative;
            z-index: 2;
            height: 2.75rem;
            overflow-y: hidden;
        }

        .nav-scroller .nav {
            display: flex;
            flex-wrap: nowrap;
            padding-bottom: 1rem;
            margin-top: -1px;
            overflow-x: auto;
            text-align: center;
            white-space: nowrap;
            -webkit-overflow-scrolling: touch;
        }

        .btn-bd-primary {
            --bd-violet-bg: #712cf9;
            --bd-violet-rgb: 112.520718, 44.062154, 249.437846;
            --bs-btn-font-weight: 600;
            --bs-btn-color: var(--bs-white);
            --bs-btn-bg: var(--bd-violet-bg);
            --bs-btn-border-color: var(--bd-violet-bg);
            --bs-btn-hover-color: var(--bs-white);
            --bs-btn-hover-bg: #6528e0;
            --bs-btn-hover-border-color: #6528e0;
            --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
            --bs-btn-active-color: var(--bs-btn-hover-color);
            --bs-btn-active-bg: #5a23c8;
            --bs-btn-active-border-color: #5a23c8;
        }

       .bd-mode-toggle {
            z-index: 1500;
        }

        .bd-mode-toggle .dropdown-menu .active .bi {
            display: block !important;
        }
    </style>

    <link href="sticky-footer-navbar.css" rel="stylesheet">
</head>

<body class="d-flex flex-column h-100">
<main class="flex-shrink-0">
    <div class="container">
        <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
        <div class="row">
            <div class="col-sm-8">
                <div class="editorHeader fw-bold">Description</div>
                <div id="editor_description"></div>
                <div class="editorHeader fw-bold">Requirements</div>
                <div id="editor_requirements"></div>
                <div class="editorHeader fw-bold">Run Rules</div>
                <div id="editor_run_rules"></div>
            </div>

            <div class="col-sm-4">
                <div class="editorHeader fw-bold">Description Links</div>
                <div id="editor_description_links"></div>
                <div class="editorHeader fw-bold">Requirement Links</div>
                <div id="editor_requirements_links"></div>
                <div class="editorHeader fw-bold">Run Rule Links</div>
                <div id="editor_run_rules_links"></div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12">
                <div class="editorHeader">Version History</div>
                <div id="editor_version_history_links"></div>
            </div>
        </div>
    </div>
</main>

<script src="bootstrap.bundle.min.js"></script>
<script>
    const quill1 = new Quill('#editor_description', {
        theme: 'snow'
    });

    const quill2 = new Quill('#editor_requirements', {
        theme: 'snow'
    });

    const quill3 = new Quill('#editor_run_rules', {
        theme: 'snow'
    });

    const quill4 = new Quill('#editor_description_links', {
        theme: 'snow'
    });

    const quill5 = new Quill('#editor_requirements_links', {
        theme: 'snow'
    });

    const quill6 = new Quill('#editor_run_rules_links', {
        theme: 'snow'
    });

    const quill7 = new Quill('#editor_version_history_links', {
        theme: 'snow'
    });
</script>

Upvotes: 0

Quill Editor not Working with Bootstrap Flow

Answers (0)

Related Questions