Topic: Problem with generated class names
Berzinskis priority asked 1 month ago
I have server generated html (there is now way to change that) where element ids contains colon, like this "view:_id1:_id67:startdate". MDB JavaScript generates class names from those ids like this "datepicker-dropdown-container-datepicker-toggle-view:_id1:_id67:startdate". Result is such that .querySelector() function, which is heavily used in MDB doesn't work because it is not valid selector. Are there any workarounds in such situation or MDB is not usable in our case? I tried to override querySelector function to escape colon, but its not a good idea and can break other things.
Resources (screenshots, code snippets etc.) Server generated input div
<div id="view:_id1:_id67:startdate" class="form-outline mb-4" data-mdb-datepicker-init="" data-mdb-input-init="" data-mdb-inline="true" data-mdb-start-day="1" data-mdb-format="dd.mm.yyyy" data-mdb-input-initialized="true" data-mdb-datepicker-initialized="true">
<input type="text" value="12.09.2024" id="view:_id1:_id67:dpicker" name="view:_id1:_id67:dpicker" autocomplete="off" class="form-control form-icon-trailing active" data-mdb-toggle="datepicker">
<label id="view:_id1:_id67:label2" for="view:_id1:_id67:inputText2" class="form-label" style="margin-left: 0px;">Izvēlies datumu</label>
<div class="form-notch">
<div class="form-notch-leading" style="width: 9px;"></div>
<div class="form-notch-middle" style="width: 96.8px;"></div>
<div class="form-notch-trailing"></div>
</div>
<button id="datepicker-toggle-view:_id1:_id67:startdate" type="button" class="datepicker-toggle-button" data-mdb-toggle="datepicker">
<i class="far fa-calendar datepicker-toggle-icon"></i>
</button>
</div>
Generated date picker div
<div class="datepicker-dropdown-container datepicker-dropdown-container-datepicker-toggle-view:_id1:_id67:startdate" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate(294px, 207px);" data-popper-placement="bottom-start">
Grzegorz Bujański staff answered 1 month ago
Unfortunately, escape colon is the only way. We don't have any workaround for this situation.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 7.3.2
- Device: any
- Browser: any
- OS: any
- Provided sample code: No
- Provided link: No