Error in _applyNotch() on button group


Topic: Error in _applyNotch() on button group

dhermann pro premium asked 2 weeks ago

Expected behavior

page.blade.php

        <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"
                       autocomplete="off"/>
                <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"
                       autocomplete="off"/>
                <label for="adults-housing3" class="btn btn-outline-primary" data-mdb-toggle="tooltip"
                       title="Tent Camping"><i class="fa-solid fa-campground"></i></label>
            </div>
        </div>

onclick: Button group works

Button group works

Actual behavior

Console:

[Error] TypeError: null is not an object (evaluating 'this._notchMiddle.style')
_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 https://mdbootstrap.com/snippets? 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.

https://mdbootstrap.com/snippets/standard/dhermann/3940546

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

Hi,

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 https://mdbootstrap.com/snippets/standard/d-wajszczuk/3945684.

Keep coding,
Dawid


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 https://mdbootstrap.com/snippets/standard/d-wajszczuk/3950321


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

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