Увеличьте высоту div, чтобы вместить содержимое внутри - PullRequest
Новая
       33

Увеличьте высоту div, чтобы вместить содержимое внутри

0 голосов
/ 28 октября 2018

Я пытаюсь использовать select2-bootstrap-theme в flask веб-приложении.Я рендеринга HTML-шаблон, который использует select2-bootstrap-theme .Если я открою этот файл .html.Все отображается как должно, но когда я захожу на страницу с запущенным приложением фляги, он уничтожает формат.

main.html 

<!DOCTYPE html>
<html>
<head>
    <script src="jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://select2.github.io/select2-bootstrap-theme/css/bootstrap.min.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://select2.github.io/select2-bootstrap-theme/css/select2-bootstrap.css">
<script type="text/javascript">
        $(document).ready(function() {
        $("#multiple").select2({ 
            maximumSelectionLength: 5,
            placeholder: "Click to select GW IDs",
            theme: "bootstrap"
            });
        })
</script>    
</head>
<body style="background-color:lightgrey;">
  <div class="container">
<form method="POST" action="" class="login100-form">
    <h1 align="center" style="font-variant: small-caps">Bank Portal System</h1><br>
<div class="form-group">
        <label for="multiple" class="control-label">GW ID(s)</label>
        <select id="multiple" class="form-control select2-multiple" multiple>
            <optgroup label="Category 1">
                <option>Value 1</option>
            </optgroup>
            <optgroup label="Category 2">
                <option>Value 1</option>
                <option>Value 2</option>
                <option>Value 3</option>
            </optgroup>
        </select>
</div>
<div class="form-group">
        <label for="default" class="control-label">From Date</label>
        <input id="default" type="text" class="form-control" placeholder="Placeholder text">
</div>
<div class="form-group">
        <label for="default" class="control-label">To Date</label>
        <input id="default" type="text" class="form-control" placeholder="Placeholder text">
</div>
</body>
</html>

приложение.py 

from flask import Flask, render_template
app = Flask(__name__)

@app.route('/')
def home():
    return render_template('main.html')

if __name__ == '__main__':
    app.run(debug=True)

Это то, что main.html показывает при прямом открытии, и это именно то, что я ожидаю, когда получаю доступ к странице с запущенным приложением.enter image description here

И это то, что он показывает при доступе из приложения. enter image description here

Ответы [ 2 ]

0 голосов
/ 28 октября 2018

Почему это произошло

Основная причина, по которой компоненты не отображаются должным образом, поскольку зависимости не загружаются и не внедряются в DOM.

Как решить проблему

Убедитесь, что все зависимости / утилиты загружены правильно, потому что эти компоненты работают / функционируют с помощью своих соответствующих файлов .js и .css.

Проблема в коде, который вы упоминаете, обнаруживает, что Jquery не загружается должным образом.Вы можете просто разрешить его, используя Jquery из CDN.

Пример: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Если вы хотите обслуживать файл Jquery локально, убедитесь, что указан правильный путь.

0 голосов
/ 28 октября 2018

Вы обслуживаете JQuery из папки вашего приложения, когда она должна находиться в «статической» папке.Откройте консоль разработчика и посмотрите, отсутствуют ли какие-либо файлы (она будет записана красным цветом).Попробуйте обслужить JQuery из CDN или поместите его в статическую папку и свяжите его как 

<script src="{{ url_for('static', filename='jquery-3.3.1.min.js') }}></script>
...