Checkbox not Showing Up HTML
I am trying to display a checkbox in html, but it is not showing. The checkbox does not show in chrome or microsoft edge. Everything else, works fine. I am using flask, jinja, and MaterializeCSS, link: https://materializecss.com/. I am also using the google icons, along with stylesheet I made. Below I put the html and css.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Home</title> <!-- Compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <!-- Compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <!-- Google Icons --> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link rel="stylesheet" href="./static/styles.css"> </head> <body> <div> {% with messages = get_flashed_messages() %} {% if messages %} {% for message in messages %} <script type="text/javascript"> M.toast({html: '<span>{{ message }}</span><button class="btn-flat toast-action" style="color: white;" onclick="M.Toast.dismissAll();">X</button>', classes: 'rounded'}) </script> {% endfor %} {% endif %} {% endwith %} </div> <div class="header"> <span class="text-font"> <span style="font-size:4vw; line-height: 0.5vw;" class="margin">Welcome {{ first_name }}</span> <a href="/change_data"><i class="material-icons prefix" style="font-size: 2.4vw; color: white;">settings</i></a> <br> <span class="margin" style="font-size: 1.75vw;"><a href="/logout" style="text-decoration:none;">Logout</a></span> </span> </div> <div class="text-font" style="margin-top: 4vw; text-align: center;"> <div style="display: inline-block; width: 30vw; text-align: center; border: 1px solid black; border-radius: 0.5vw; padding: 3vw;"> <p>First Name: {{ first_name }}</p> <p>Last Name: {{ last_name }}</p> <p>Email: {{ email }}</p> </div> </div> <form> <input type="checkbox" class="filled-in"> </form> <div class="footer"> <span style="position: absolute; bottom: 0; right: 0; width: 100%; text-align:right; margin-right: 1vw; margin-bottom: 0.5vw" class="text-font"> The Login System </span> </div> </body> </html> .header { background-color: #2e4e4d; color: white; padding-top: 40px; padding-bottom: 20px; /*margin: 0 !important;*/ } .text-font{ font-family: 'Courier New'; font-weight: bold; } .margin { margin-left: 10%; } .footer { color: white; position:fixed; left:0px; bottom:0px; height:10px; width:100%; background:#2e4e4d; z-index: 100; padding-top: 20px; padding-bottom: 20px; } .stylingform { padding-top: 10px; padding-bottom: 10px; padding-right: 10px; padding-left: 10px; border-radius: 5px; } BTW, if I press Shift-Ctrl-I in chrome and go to console, there are no errors (except about not having favicon).
In the materializecss demo, they have the input wrapped in a label to create a for attribute specific to the input. Have you tried that? In the code above the checkbox input is only wrapped in a form.
