Как оформить ввод в раскрывающемся меню с помощью классов веб-компонентов материалов в приложении Flask? - PullRequest
Новая
       57

Как оформить ввод в раскрывающемся меню с помощью классов веб-компонентов материалов в приложении Flask?

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

Из моего приложения Flask я передаю форму Flask WT в шаблон HTML и пытаюсь оформить ее с помощью классов Web-компонентов материалов, например: 

<form action="/users" method="post" name="UserGroup" id="userGroupForm">
            {{form.hidden_tag()}}
            <!-- WITH MATERIAL STYLING-->
            <div class="mdc-select">
                <div class="mdc-select__anchor demo-width-class">
                    <i class="mdc-select__dropdown-icon"></i>
                    <div class="mdc-select__selected-text"></div>
                    <span class="mdc-floating-label">Substation</span>
                    <div class="mdc-line-ripple"></div>
                </div>

                <div class="mdc-select__menu mdc-menu mdc-menu-surface demo-enhanced-select custom-enhanced-select-width mdc-menu-surface--open">
                    <div class="mdc-list-item">
                        {{ form.substations(class_="mdc-select__selected-text") }}
                    </div>
                </div>
            </div>


            <!-- WITHOUT ANY STYLING -->
            <div>
                {{ form.feeders() }}
            </div>

            <button type="submit" class="mdc-button mdc-button--raised next">
                <div class="mdc-button__ripple"></div>
                <span class="mdc-button__label">
                    Search
                </span>
            </button>

        </form>

Это Вот как выглядит мой ужасный вывод:

enter image description here

Элементы, которые должны быть в выпадающем списке, всегда выпадают. В моем base.html импортировано следующее: 

<!--Material Design Web Components-->
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/material-components-web/5.0.0/material-components-web.min.css"
        integrity="sha256-ABjB18OwjYFrrpyiHaCCSa/P52KM4BRAynhhXC8DGRI=" crossorigin="anonymous" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/material-components-web/5.0.0/material-components-web.min.js"></script>


    <!-- JQuery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Я пытаюсь создать динамический c список раскрывающихся пунктов меню вместе со стилем Веб-компонентов материалов. Любые предложения о том, как я могу это исправить?

...