В Python 2 окно поиска администратора выглядит нормально и имеет ширину около 156 пикселей Поле поиска Python 2
В Python 3 поле поиска Python 3 поле меньше и не имеет достаточно места для отображения того, что набрано. Что-то изменилось в администраторе фляги из-за обновления Python 3, чтобы окно ввода поиска выглядело меньше?
Я заметил, что в python 3 почему-то пропущен класс css "search-query" в сгенерированном html.
<input type="text" name="search" value="" class="search-query span2" placeholder="Search">
Я попытался переопределить admin css, используя свой собственный файл css, как предложено в Как настроить шаблоны администрирования Flask? , а также добавил! Important. Но это тоже не сработало. В html-шаблоне администратора отсутствует входной HTML-код для поиска, и кажется, что мы прямо берем этот код из административной библиотеки фляги.
При проверке сгенерированного html-файла в браузере на python 2 я заметил:
<input type="text" name="search" value="" class="search-query span2" placeholder="Search">
Для Python 3 :
<input type="text" name="search" value="" class="span2" placeholder="Search">
Нет места, где я мог бы добавить или изменить класс в моем html-файле. Пожалуйста, помогите !!
Код для шаблона администратора
{% extends "/admin/base.html" %}
{% block head %}
{% assets "admin_css" %}
<link type="text/css" href="{{ ASSET_URL }}" rel="stylesheet" />
{% endassets %}
{% endblock head %}
{% block page_body %}
{# "inspired" in the the original page_body block in the base template #}
<div class="container-fluid">
<div class="row-fluid">
<div id="menu-bar" class="span2">
{% block brand %}
<div class="brand">{{ admin_view.admin.name }}</div>
{% endblock %}
{% block main_menu %}
<ul class="nav nav-tabs nav-stacked">
{{ layout.menu() }}
</ul>
{% endblock %}
{% block menu_links %}
<ul class="nav pull-right">
{{ layout.menu_links() }}
</ul>
{% endblock %}
{% block access_control %}
{% endblock %}
</div>
<div id="content" class="span10">
{% block messages %}
{{ layout.messages() }}
{% endblock %}
{% block body %}{% endblock %}
</div>
</div>
</div>
{% endblock %}
{% block tail %}
{% assets "admin_js" %}
<script type="text/javascript" src="{{ ASSET_URL }}"></script>
{% endassets %}
{% endblock %}
Код для администратора CSS в статическом каталоге
#menu-bar .brand {
margin: 30px;
margin-left: 10px;
font-size: 2em;
}
.input-append .search-query {
width: 156px;
}
#content {
margin-top: 20px;
}
body {
padding-top: 0;
}
#content {
overflow: scroll;
}
#content table td:nth-child(2) {
/* 2nd column usually has the edit/delete controls; prevent wrapping */
width: 32px;
}
#content > form {
/* top margin for the editing row forms */
margin-top: 60px;
}
select[multiple] {
width: 500px
}