.form-control does not have border or &quot;onfocus&

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

Andrew Ford priority asked 3 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)

Add comment

Andrew Ford priority answered 3 years ago

1 0 Best answer

Please insert min. 20 characters.

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 3 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 3 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.

Please insert min. 15 characters.

Mikołaj Smoleński staff commented 3 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 2 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 2 years ago

Add comment

Mikołaj Smoleński staff answered 3 years ago

5 0 Best answer

Please insert min. 20 characters.

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 3 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.

Add comment

Closed

This topic is closed.

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

Andrew Ford

327Support score
36Questions 17Answers 6Snippets