Topic: Error in _applyNotch() on button group
dhermann premium asked 2 years 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
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 answered 2 years 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 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 https://mdbootstrap.com/snippets/standard/d-wajszczuk/3950321
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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
Dawid Wajszczuk staff commented 2 years 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 premium commented 2 years 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 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.