Django - Размеры шрифтов в сохраненных полях формы при начальной загрузке страницы маленькие до щелчка / нажатия клавиши - PullRequest
Новая
       0

Django - Размеры шрифтов в сохраненных полях формы при начальной загрузке страницы маленькие до щелчка / нажатия клавиши

1 голос
/ 20 июня 2020

Я заметил странное поведение на моей странице входа. При начальной загрузке страницы поля формы с предварительно заполненными сохраненными значениями имеют меньший текст, чем обычно. Как только вы нажмете на страницу или pu sh любую клавишу, текст вернется к своему нормальному размеру шрифта.

enter image description here

login.html (simplified)

{% extends "base.html" %}
{% load crispy_forms_tags %}

{% block content %}
    <div class="container-fluid">
        {% crispy form %}
    </div>
{% endblock %}

base. html (упрощено) 

{% load static %}
<!doctype html>
<html lang="en">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--  IE support  -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Allow web app on Chrome -->
    <meta name="mobile-web-app-capable" content="yes">

    <!-- Import Jquery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <!-- Backup local file -->
    <script>
       window.jQuery || document.write('<script src="{% static 'js/jquery-3.5.1.min.js' %}"><\/script>');
    </script>

    <!-- Import Bootstrap core files  -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

    <!-- Import confirmation / alert box JS files -->
    <script src="{% static 'js/bootbox.min.js' %}"></script>
    <script src="{% static 'js/bootbox_common.js' %}"></script>

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- Custom CSS -->
    <link href="{% static 'css/base.css' %}" rel="stylesheet">

    <!-- Page-specific imports -->
    {% block headimport %}{% endblock %}

    <!-- Allow styling of unknown HTML elements in IE browsers older than IE9 (must be after CSS imports) -->
    <!--[if lt IE 9]>
      <script src="{% static 'js/html5shiv.js' %}"></script>
    <![endif]-->
  </head>

  {% block body %}
    <body>
      {% include "header.html" %}
      {% include "navbar.html" %}

      <main>
        <div class="container-fluid">
          {% block content %}{% endblock %}
        </div>
      </main>

      {% include "footer.html" %}

      <!-- Navbar import -->
      <script src="{% static 'js/navinbox.js' %}"></script>
            
      <!-- Page-specific imports -->
      {% block bodyimport %}{% endblock %}
    </body>
  {% endblock %}
</html>

Включенные файлы (заголовок, панель навигации и нижний колонтитул) не содержат дополнительных CSS / JS.

Я вижу то же самое поведение на Android, а также в MS Edge. Это очень странно. Кто-нибудь видел что-то подобное раньше?

Отрисованная страница 

<!doctype html>
<html lang="en">
  <head>

    <!-- Meta info -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--  IE support  -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Allow web app on Chrome -->
    <meta name="mobile-web-app-capable" content="yes">

    <!-- Import Jquery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <!-- Backup local file -->
    <script>
      window.jQuery || document.write('<script src="/static/js/jquery-3.5.1.min.js"><\/script>');
    </script>

    <!-- Import Bootstrap core files  -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"> </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

    <!-- Import confirmation / alert box JS files -->
    <script src="/static/js/bootbox.min.js"></script>
    <script src="/static/js/bootbox_common.js"></script>

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- Custom CSS -->
    <link href="/static/css/base.css" rel="stylesheet">

    <!-- Workaround to allow styling of unknown HTML elements in IE browsers older than IE9 (must be after CSS imports) -->
    <!--[if lt IE 9]>
      <script src="/static/js/html5shiv.js"></script>
    <![endif]-->

    <!-- Page title -->
    <title class="title">
      DCP - Iniciar sesi&#243;n
    </title>    

    <!-- Image to use for favorite/bookmark icon -->
    <link rel="apple-touch-icon" sizes="180x180" href="/static/img/logo/favicon/apple-touch-icon.png?v=5ABpOj04rk">
    <link rel="icon" type="image/png" sizes="32x32" href="/static/img/logo/favicon/favicon-32x32.png?v=5ABpOj04rk">
    <link rel="icon" type="image/png" sizes="16x16" href="/static/img/logo/favicon/favicon-16x16.png?v=5ABpOj04rk">
    <link rel="manifest" href="/static/img/logo/favicon/site.webmanifest?v=5ABpOj04rk">
    <link rel="mask-icon" href="/static/img/logo/favicon/safari-pinned-tab.svg?v=5ABpOj04rk" color="#5bbad5">
    <link rel="shortcut icon" href="/favicon.ico?v=5ABpOj04rk">
    <meta name="apple-mobile-web-app-title" content="DCP">
    <meta name="application-name" content="DCP">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">
  </head>
  <body>
    <header></header>
    <nav class="navbar navbar-expand-md bg-light navbar-light sticky-top">

      <!-- LOGO -->
      <a class="navbar-brand" href="/wakemeup/" title="Inicio">
        <img src="/static/img/logo/home_icon.png" style="width:55px">
      </a>
    
      <!-- NAVBAR TOGGLE ICON -->
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
      </button>

      <!--  COLLAPSIBLE ITEMS -->       
      <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="nav navbar-nav mr-auto">
        <!-- ABOUT -->
          <li class="nav-item dropdown">
            <a class="nav-link" href="/wakemeup/about">Acerca de</a>
          </li>
        </ul>
        <ul class="nav navbar-nav">
          <!-- LOGIN -->
          <li class="nav-item">
            <a class="nav-link" href="/login/?next=/login/">Iniciar sesi&#243;n</a>
          </li>
        </ul>
      </div>
    </nav>
    <main>
      <div class="container-fluid">
        <div class="container-fluid"><br>
          <form class="form-horizontal" method="post">
            <input type="hidden" name="csrfmiddlewaretoken" value="XXX"> 
            <fieldset> 
              <legend>Iniciar sesi&#243;n</legend> 
              <div id="div_id_username" class="form-group row"> 
                <label for="id_username" class="col-form-label col-sm-4 requiredField">
                  Nombre de usuario (o correo)
                  <span class="asteriskField">*</span>
                </label> 
                <div class="col-sm-8"> 
                  <input type="text" name="username" maxlength="50" class="w-75 textinput textInput form-control" required id="id_username"> 
                </div> 
              </div> 
              <div id="div_id_password" class="form-group row"> 
                <label for="id_password" class="col-form-label col-sm-4 requiredField">
                  Contrase&#241;a
                  <span class="asteriskField">*</span> 
                </label> 
                <div class="col-sm-8"> 
                  <input type="password" name="password" class="w-75 textinput textInput form-control" required id="id_password"> 
                </div> 
              </div> 
            </fieldset>
            <div class="form-group"> 
              <div class="aab col-sm-4"></div> 
              <div class="col-sm-8"> 
                <input type="submit" name="login" value="Iniciar" class="btn btn-primary btn-primary" id="submit-id-login"/>
<br><br><p><a href=/password_reset/>&#191;Olvid&#243; su contrase&#241;a?</a></p> 
              </div> 
            </div> 
          </form>
        </div>
      </div>
    </main>
    <footer class="footer">
      <div class="container">
        <span class="text-muted"><center>&copy; DCP</center></span>
      </div>
    </footer>

    <!-- Navbar import -->
    <script src="/static/js/navinbox.js"></script>

    <!-- Page-specific imports -->
  </body>
</html>

base. css (источник) 

/* Buttons */
.btn-huge {
    padding: 20px 20px;
    font-size: 30px;
    border-radius: 10px;    
}

.btn-xs {
  padding  : .25rem .4rem;
  font-size  : .75rem;
  line-height  : .75;
  border-radius : .2rem;
}

.infopage {
    max-width: 800px;
}

/* Menus */
.scrollable-menu {
  height: auto;
  max-height: 200px;
  overflow-x: hidden;
  overflow-y: auto;
  max-width: 300px;
}

.navbar-brand, .navbar-nav > li > a {
    line-height: 30px;
/*    height: 75px;*/
 /*   padding-top: 0px; */
}

.faicon {
    margin-left: 10px;
    font-size: 30px;
    height: 30px;
    vertical-align: middle;
}   

.avatar {
    vertical-align: middle;
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

/* Sticky Footer */
html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px; /* Margin bottom by footer height */
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 30px; /* Set the fixed height of the footer here */
  line-height: 30px; /* Vertically center the text there */
  background-color: #f5f5f5;
}

Bueller, Bueller, Bueller ... есть идеи?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...