Hi
I'm facing to a difficulties I get when using TWebEditAutoComplete.
Everything working fine except the menu list position when using HTML Template
I tried to find a way to use it in a DIV but the position for list of items is always set under the Parent DIV not the DIV of TWebEditAutoComplete
I make a test app using
- a Combobox which working fine
- a TWebEditAutoComplete DIV itself inside a DIV
- a TWebEditAutoComplete DIV itself inside a DIV and again inside a DIV
Web EditAutoComplete.zip (517.0 KB)
For both cases the TWebEditAutoComplete items list is under the parent DIV
Is there a way to be sure to display the items list on right position ?
Thanks
The auto complete area DIV is appended to the parent element of the control's outer DIV to make it appear under the control's outer DIV. If you have already added child elements under this parent DIV, it gets appended after these elements, hence what you see.
I have the same problem.
Can you help me, what I have to do?
The list appears below
<div class="card-body p-1">
<h6 class="bg-dark-subtle p-1">Gruppen</h6>
<div class="row">
The DIV of the autoComplete has ID = "Pfand_Pfandware_Edit_edWarengruppe"
I count to the 5th parent!
Can I insert a DIV as parent that the autoComplete use?
Here I have (with Bootstrap):
- HTML Code Template,
- HTML Code Browser Debug
- Picture
HTML Code Template
<div class="card-body p-1">
<h6 class="bg-dark-subtle p-1">Gruppen</h6>
<div class="row">
<div class="col-lg-12">
<div class="row p-1">
<div class="col-lg-4">
<h6>Warengruppe:</h6>
</div>
<div class="col-lg-8 mb-2">
<div class="float-start w-75">
<div id="Pfand_Pfandware_Edit_edWarengruppe"></div>
</div>
<button id="Pfand_Pfandware_Edit_btnWarengruppe" class="btn btn-dark btn-hover float-end w-25" type="button"><i class="fa-solid fa-magnifying-glass"></i></button>
<div class="float-start w-100">
<div id="Pfand_Pfandware_Edit_lblWarengruppe" class="fs-6 fw-light">Pfand_Pfandware_Edit_lblWarengruppe</div>
</div>
</div>
</div>
</div>
HTML Code Browser Debug
Picture
The position is actually correct. But why is it displayed incorrectly?
I have set a DOM Breakpoint.
And debug.
When the list is created, the element gets the class "MyElementID_autocomplete-items".
If I delete this class, everything works.
Is there a reason why this class is inserted?
The source is in
Core Source\WEBLib.EditAutocomplete.pas Line 647 (WebCore Version 2.5.2 25.04.2024)
' a.setAttribute("class", "' + classpopup + '");' + #13 +
Suggestion is to add the WebEditAutoComplete in a separate DIV (parent DIV) and do not add any other elements to this DIV. Put other items you need below the control to a sibling DIV element. This way, the popup items for the autocomplete added to the parent DIV will not interfere with other elements on the form.
Hi
We solved issue by adding code in WebFormCreate events to (re)set position property
asm
const EditAutocompleteElementToAdjust = document.getElementById("Pfand_Pfandware_Edit_edWarengruppe");
if (EditAutocompleteElementToAdjust !== null) {
EditAutocompleteElementToAdjust.style.setProperty("position","relative");
}
end;
hopping this will help
@Bruno
I've already tried that, but it still doesn't work.
I suspect it's due to some CSS settings (Bootstrap, or others)
On Monday I will ask our HTML/CSS specialist what options there are.
I will also test @Sylvain's suggestion.
As a test, I changed the source code so that I can continue working. (An adjustment to the clearList function was still necessary)
