Topic: .form-control does not have border or "onfocus" outline

Andrew Ford priority asked 4 years ago


Expected behavior

The example(s) in the documentation.

Actual behavior

The .form-control doesn't have a border, or the outline (when focused), the label does the expected result.

Resources (screenshots, code snippets etc.)

My markup is something like:

<form>
<div class="col">
<div class="form-outline">
<input type="text" class="form-control" id="myfield">
<label for="myfield" class="form-label">My Field</label>
</div>
</div>
</form>

When I click on the border-less input field, the following message pops up in the Console:

input.js:124 Uncaught TypeError: Cannot read property 'style' of null
    at t.value (input.js:124)
    at t.value (input.js:162)
    at t.value (input.js:137)
    at HTMLInputElement.<anonymous> (input.js:179)
    at HTMLDocument.e (event-handler.js:116)

Andrew Ford priority answered 4 years ago


No luck.

<!doctype html>
<html>
<head>
<link href="/assets/libs/frontend/MDB-UI-KIT-Pro-Essential-1.0.0/css/mdb.min.css" type="text/css" rel="stylesheet">
</head>

<body>
<form>
  <div class="row mb-3">
    <div class="col-12 col-sm col-md-12 col-lg">
      <div class="form-outline">
         <input type="text" class="form-control form-control-sm" id="firstname" name="firstname">
         <label for="firstname" class="form-label">First Name</label>
      </div>
    </div>
  </div>
</form>
<script src="/assets/libs/frontend/MDB-UI-KIT-Pro-Essential-1.0.0/js/mdb.min.js" type="text/javascript"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
  document.querySelectorAll('.form-outline').forEach((formOutline) => {
    new mdb.Input(formOutline).init();
  });

  document.querySelectorAll('.form-outline').forEach((formOutline) => {
    new mdb.Input(formOutline).update();
  });
});
</script>
</body>
</html>

Mikołaj Smoleński staff commented 4 years ago

I'm pretty sure you've entered the wrong file paths. The code you sent should work even without initialization. Please check the console (F12) if there are any errors in it.

Firstly try to remove first slash from paths, like this: /assets/... -> assets/...

Best regards


Andrew Ford priority commented 4 years ago

The file paths are fine, but I tried and I am still not seeing the desired effect.That very first slash points to the root folder.

I may be having issues with most of the .form-outline effect, when I click where the inputs are .form-label hovers up.

I can style with .form-select (and .form-select-sm), I can see .form-control.form-control-sm style properly (although I'm not seeing a border, I noticed .form-label become smaller`).And I have tabs on the same page, and they work. On other pages I have the sidenav, I got that working as well.

The only MDB-related console error I get is when I click on an input, I shared the error in my OP.


Mikołaj Smoleński staff commented 4 years ago

have a request for you to create a snippet that will reproduce the problem. I've tried different ways, but the inputs always work fine, so it's hard for me to help in this situation.

Best regards


Bruce Ibe free commented 3 years ago

I have similar issues, I tried the js code above, I added it at the bottom of my index.html (I am using react), it works but only when I reload the page. If I move from one route to another for example /register to /login, the border disappears then I have to hard reload the page to get it again. Is this the normal behavior?


Bruce Ibe free commented 3 years ago

I have similar issues, I tried the js code above, I added it at the bottom of my index.html (I am using react), it works but only when I reload the page. If I move from one route to another for example /register to /login, the border disappears then I have to hard reload the page to get it again. Is this the normal behavior?


Bruce Ibe free commented 3 years ago

I have similar issues, I tried the js code above, I added it at the bottom of my index.html (I am using react), it works but only when I reload the page. If I move from one route to another for example /register to /login, the border disappears then I have to hard reload the page to get it again. Is this the normal behavior?


Bruce Ibe free commented 3 years ago

I have similar issues, I tried the js code above, I added it at the bottom of my index.html (I am using react), it works but only when I reload the page. If I move from one route to another for example /register to /login, the border disappears then I have to hard reload the page to get it again. Is this the normal behavior?


Bruce Ibe free commented 3 years ago

I have similar issues, I tried the js code above, I added it at the bottom of my index.html (I am using react), it works but only when I reload the page. If I move from one route to another for example /register to /login, the border disappears then I have to hard reload the page to get it again. Is this the normal behavior?


Bruce Ibe free commented 3 years ago

I have similar issues, I tried the js code above, I added it at the bottom of my index.html (I am using react), it works but only when I reload the page. If I move from one route to another for example /register to /login, the border disappears then I have to hard reload the page to get it again. Is this the normal behavior?


Mikołaj Smoleński staff answered 4 years ago


It looks like Your inputs are loaded dynamically or are not visible when the page loads and initializes inputs. Please init inputs just after there are displayed, like this:

document.querySelectorAll('.form-outline').forEach((formOutline) => {
  new mdb.Input(formOutline).init();
});

This is explained well in our docs: https://mdbootstrap.com/docs/standard/forms/input-fields/#section-update

Best regards


jseird priority commented 4 years ago

In version 4 this was not of any hassle. It would be great to make this handled by mdb5 itself.


mihaizecheru priority commented 1 year ago

cheers this was really helpful.


FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Closed

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: 1.0.0
  • Device: N/A
  • Browser: N/A
  • OS: N/A
  • Provided sample code: Yes
  • Provided link: No