Question

使用Python 2，管理员搜索框看起来不错，宽度约为156像素python 2 search box 使用Python 3 python 3 search box时，该框较小，并且没有足够的空间来显示键入的内容。flask admin是否因python 3升级而有所更改，以使搜索输入框看起来更小？

我注意到在python 3中，生成的HTML中以某种方式缺少“搜索查询” css类。 <input type="text" name="search" value="" class="search-query span2" placeholder="Search">

我尝试按照How to customize Flask Admin templates?中的建议使用自己的CSS文件覆盖admin CSS，并且还添加了！important。但这也不起作用。 admin html模板中没有搜索输入html代码，似乎我们是直接从flask admin库中获取此代码。

在检查浏览器中为 python 2 生成的html文件时，我注意到： <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
}

Flask Admin Search Box在python 3中更小

0 个答案: