Error in _applyNotch() on button group

Topic: Error in _applyNotch() on button group

dhermann pro premium asked 2 weeks 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 weeks 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 pro premium commented 2 weeks 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 weeks ago

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

dhermann pro premium commented 2 weeks ago

My mistake. Try it now.

Dawid Wajszczuk staff answered 2 weeks 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 pro premium commented 2 weeks 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 weeks 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
  • User: Pro
  • 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