.form-control does not have border or onfocus outline


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

Andrew Ford pro priority asked a year 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)

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 pro premium priority commented a year ago

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


Andrew Ford pro priority answered a year 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 a year 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 pro priority commented a year 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 a year 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 commented 2 months 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 commented 2 months 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 commented 2 months 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 commented 2 months 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 commented 2 months 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 commented 2 months 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?


Status

Closed

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: 1.0.0
  • Device: N/A
  • Browser: N/A
  • OS: N/A
  • Provided sample code: No
  • Provided link: No