Topic: Error in _applyNotch() on button group

dhermann premium asked 2 years ago

Expected behavior


        <div class="col-md-4 text-center">
            <div class="btn-group">
                <input type="radio" checked="checked" class="btn-check" name="adults-housing" id="adults-housing1"
                       autocomplete="off" value="1" />
                <label for="adults-housing1" class="btn btn-outline-primary" data-mdb-toggle="tooltip"
                       title="Guestroom, Cabin, or Loft Housing"><i class="fa-solid fa-hotel"></i></label>
                <input type="radio" class="btn-check" name="adults-housing" id="adults-housing2" value="2"
                <label for="adults-housing2" class="btn btn-outline-primary" data-mdb-toggle="tooltip"
                       title="Camp Lakewood Cabin (dorm style) Housing"><i
                        class="fa-solid fa-people-roof"></i></label>
                <input type="radio" class="btn-check" name="adults-housing" id="adults-housing3" value="3"
                <label for="adults-housing3" class="btn btn-outline-primary" data-mdb-toggle="tooltip"
                       title="Tent Camping"><i class="fa-solid fa-campground"></i></label>

onclick: Button group works

Button group works

Actual behavior


[Error] TypeError: null is not an object (evaluating '')
_applyNotch (app.js:201:153050)
_getElements (app.js:201:153787)
(anonymous function) (app.js:201:153359)
o (app.js:201:69359)
_activate (app.js:201:153336)
(anonymous function) (app.js:201:153961)

Resources (screenshots, code snippets etc.)

Dawid Wajszczuk staff commented 2 years ago

Hi. Can you recreate your error in a snippet Or provide instructions how to get this error? Because I was not able to get your error.

dhermann premium commented 2 years ago

I tried to do that here.

Obviously a lot of console errors, but if I click on a button group button I see the notch error.

Dawid Wajszczuk staff commented 2 years ago

I can't open your snippet :/ Probably you forgot to click publish button.

dhermann premium commented 2 years ago

My mistake. Try it now.

Dawid Wajszczuk staff answered 2 years ago


Thanks for the snippet. You need to remove form-outline class at the beginning of section and everything should work fine. Here is the snippet

Keep coding,

dhermann premium commented 2 years ago

Thanks Dawid. So it sounds like form-outline should only be applied to "input" elements within the form, not the form itself?

Also, is there a Material design pattern to use control labels? My forms have many set values so using the placeholder is not a good solution for me.

Dawid Wajszczuk staff commented 2 years ago

Yes, form-outline is for providing material design for inputs and labels.

As for the second question, I'm not sure what are you asking for. Can you describe it in more details? Here is the snippet with input, label and value

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 4.0.0
  • Device: Macbook
  • Browser: Safari
  • OS: macOS Monterrey 12.0.1
  • Provided sample code: No
  • Provided link: No