creativetimofficial / material-kit

Free and Open Source UI Kit for Bootstrap 5, React, Vue.js, React Native and Sketch based on Google's Material Design
https://www.creative-tim.com/product/material-kit?ref=mk-creativetimofficial-github
MIT License
5.91k stars 1.37k forks source link

Form Choose File button not showing in django #160

Closed Mikedc1 closed 4 years ago

Mikedc1 commented 5 years ago

Prerequisites

Please answer the following questions for yourself before submitting an issue.

Expected Behavior

I would expect the django form to include a choose picture button as it does when not applying the theme.

Current Behavior

annotation 2019-03-08 162845

Everything works correctly expect from the button that disappears. Instead, the field title "*Image" becomes the button that has the same function. So it does work but a user wouldnt think to click there and it seems like an asset is missing there. I am using the default django forms and crispy forms.

Failure Information (for bugs)

Looks like the problem is a missing asset or the innability of the theme to locate that asset. I have tried everything, but the form still has a weird behaviour.

<form method="POST" enctype="multipart/form-data">
       {%csrf_token%}
      <fieldset class="form-group">
       <legend class="border-bottom mb-4">Profile Info</legend>
        {{u_form|crispy}}
        {{p_form|crispy}}
       </fieldset>
      <div class="form-group">
      <button class="btn btn-outline-info" type="submit">Update</button>
      </div>
      </form>
     <!--   Core JS Files   -->
<script src="{% static 'forum/js/core/jquery.min.js' %}" type="text/javascript"></script>
<script src="{% static 'forum/js/core/popper.min.js' %}"" type="text/javascript" ></script>
<script src="{% static 'forum/js/core/bootstrap-material-design.min.js' %}" type="text/javascript"></script>
<script src="{% static 'forum/js/plugins/moment.min.js' %}"></script>
<!--  Plugin for the Datepicker, full documentation here: https://github.com/Eonasdan/bootstrap-datetimepicker -->
<script src="{% static 'forum/js/plugins/bootstrap-datetimepicker.js' %}" type="text/javascript"></script>
<!--  Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
<script src="{% static 'forum/js/plugins/nouislider.min.js' %}" type="text/javascript"></script>
<!--  Google Maps Plugin  -->

<!-- Place this tag in your head or just before your close body tag. -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
<!-- Control Center for Material Kit: parallax effects, scripts for the example pages etc -->
<script src="{% static 'forum/js/material-kit.js' %}" type="text/javascript"></script>
</body>
<head>

  {%if title%}
  <title>{{title}}</title>
  {%else%}
  <title>Blog Start</title>
  {%endif%}

  <!--     Fonts and icons     -->

  <!-- CSS Files -->
  <link href="{%static 'forum/css/material-kit.min.css' %}" rel="stylesheet" />
  <!--     Fonts and icons     -->
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
</head>