Trouble with Materialize CSS: Form elements displaying incorrectly

I attempted to implement a login form within a modal, following the example provided here (https://codepen.io/skcals/pen/bxdpaN). However, when I applied the same code to my own website, this is how it appeared:

Has anyone else encountered this issue? And if so, do you know how to resolve it?

Here is the section of my HTML head where Materialize CSS is included:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<script type = "text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type = "text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.js"></script>

And here is the code for my login form:

    <div id="login-modal" class="modal">
      <h5 class="modal-close" style="color:black;">&#10005;</h5>
        <div class="modal-content center">
          <h4>Sign In</h4>
          <br>

          <form action="#">

            <div class="input-field">
              <i class="material-icons prefix">person</i>
              <input type="text" id="name">
              <label for="name">Username</label>
            </div>
            <br>

            <div class="input-field">
              <i class="material-icons prefix">lock</i>
              <input type="password" id="pass">
              <label for="pass">Password</label>
            </div>
            <br>

            <div class="left" style="margin-left:20px;">
              <input type="checkbox" id="check">
              <label for="check">Remember Me</label>
            </div>
            <br>
            
            <input type="submit" value="Login" class="btn btn-large login-btn">
          </form>
        </div>
      </div>

Answer №1

Your code was instrumental in the success of my project! One small suggestion I have is to ensure you are using the most recent version of JQuery:

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

Answer №2

After some troubleshooting, I managed to resolve the problem on my own by relocating the login div to a different location. It was previously nested within my navbar menu and I suspect that this was causing the visibility issue.

However, there is one final detail that needs attention - the remember me checkbox seems to be missing...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with Swiper JS: The buttons on pages three and beyond are unresponsive

I'm having trouble with the functionality of the "Back" button on pages 2 and 3 of my website. Can anyone help me figure out why it's not working? My goal is to create a website that resembles a game menu, similar to Deus Ex The Fall. I'm u ...

What is the technique for creating a repeating image rather than stretching it?

Is there a way to repeat a background image to fit its content? I have a background image that needs to be repeated in this manner: https://i.sstatic.net/qVKkp.png However, when using the following code: .imgbord { background: url('https://i.imgur ...

Having trouble getting my parallax slideshow to work with jquery preventDefault

-UPDATE- After countless hours of online courses, tutorials, and programming, I finally completed my website! Check it out here: The site is almost where I want it to be, but there are a few remaining challenges: 1) AJAX: I'm struggling to get the ...

The compatibility of IE9 with tables and the use of display: block

When optimizing my site for low-width mobile devices, I adjust the display property of various table elements such as tr, td, and th to block in order to stack them vertically. This technique helps wide tables to show all their content without overflowing ...

What is the best method to restrict the size of a div to match the dimensions of the

In my webpage, I have a menubar (div) that contains bookmarks. However, when too many bookmarks are added, the menu becomes too wide for the page size I prefer (1280, 720) and becomes scrollable, causing some bookmarks to be out of view. My goal is to ens ...

Having trouble with Vue.js implementation of Bootstrap tab navigation?

I am currently working on a vue.js application that consists of 2 routed components. I recently attempted to integrate a bootstrap tab navigation into the first component, but unfortunately, the tab contents are not being properly displayed. <templat ...

The issue of overflow-y not functioning properly in conjunction with ng-repeat has been observed

As indicated in this resource, setting a fixed height for the div is suggested, but it seems like it's not working with the code provided below. <div style="margin-top:0.5vh;"> <div style="height:200px;border:1px solid red;overflow:au ...

Create a CSS menu that centers the links

Here is the CSS code I am using for my horizontal menu: nav { height: 40px; width: 100%; background: #F00; font-size: 11pt; font-family: Arial; font-weight: bold; position: relative; border-bottom: 2px solid # ...

The background color in CSS remains stagnant, refusing to change despite

Can someone help me figure out why the background color isn't changing in my simple code? I've double-checked that the external CSS is properly linked because the text color of h1 is changing. <!DOCTYPE html> <html> < ...

What is the best way to use border radius on a canvas element similar to a div in order to create a

I'm having trouble making a canvas element appear as a circle like any other div. Here is my code, please take a look and let me know what I'm doing wrong with the border-radius property: <canvas id="myCanvas" width="200" height="200" style ...

Display issue with positioning user name in navbar on Internet Explorer

The user name appears correctly in the navbar on Firefox and Chrome, but in IE it drops down due to a break tag issue. Is there a way to resolve this in IE so that it displays like in Firefox and Chrome? body { padding-top: 102px; background-colo ...

Give a radio button some class

<input id="radio1" type="radio" name="rgroup" value="1" > <label for="radio1"><span><span></span></span>1</label> <input id="radio2" type="radio" name="rgroup" value="2" > <label for="radio2"><span ...

Is there a way to extract shared properties within a Material UI style declaration?

I am working with a specific set of style rules that define different statuses: status_in_progress: { fontSize: 14, backgroundColor: theme.palette.success.dark, padding: 2, paddingLeft: 5, paddingRight: 5, display: "inline-bl ...

How can I modify the HTML code for rooms in the HTML 5 client of the bigbluebutton application?

Is it possible to customize the HTML code of rooms within the BigBlueButton source code? Additionally, how can I modify the CSS styles of elements in room sessions? For instance, I am interested in hiding the logo of BigBlueButton by setting 'display: ...

stopping the collapsible animation of bootstrap before the medium breakpoint

I recently developed a website using Bootstrap. On my site, there is a navigation bar with menu options including 'About,' 'My Projects,' and 'Contact Me' that are hidden behind an expandable menu when the page width is less t ...

Importing images in React for CSS does not function properly

I've encountered an issue while trying to import an image for CSS. I successfully imported the image and used it in the img tag as src={furnitureBG} for testing purposes. Following the documentation, I imported the image and set the path as the value ...

Clipping of the background image

http://jsfiddle.net/R82a4/ My attempt at achieving the desired result fell short: <div style="background-position: -50%; width: 100%; background-image: url('/assets/upload/stab/1/taccos.png'); background-repeat: no-repeat; background-size: 1 ...

What is the best way to limit the number of items displayed in a Bootstrap card?

While using bootstrap cards to display content, I encountered an issue when integrating it with the backend for looping. The items were continuously added to the right side instead of being set in columns of 3 and continuing straight down. It should look ...

Exploring the wonders of CSS with Socialchef

Hey, I recently came across a solution on Stack Overflow where they provided code for SocialChef to convert decimal inputs into fractions. I'm wondering how I can write or incorporate some code to input fractions and mantissa as a fraction... I ...

Looking to personalize the appearance of an iframe using CSS styling?

I am working with an iframe that generates a form, and I would like to customize the CSS of this form. How can I go about editing the CSS? <div class="quiz-container" style="text-align: center;" data-quiz="#######" data-pr ...