search

lekoala / bootstrap5-autocomplete

Autocomplete for Bootstrap 5 (and 4!)
MIT License
87 stars 16 forks source link

Issues with covering over my input field. #42

Closed marc-gist closed 8 months ago

marc-gist commented 8 months ago

This looks great, however, when I use it, it covers over the input field and sits to the left. here is an example code from my

<div class="input-group mb-3">
                                <span class="input-group-text" for="id_form-3-assigned_to"><svg fill="#ffffff" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32px" height="32px" viewBox="-9.09 -9.09 109.04 109.04" xml:space="preserve" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"><rect x="-9.09" y="-9.09" width="109.04" height="109.04" rx="54.52" fill="#7ed0ec" strokewidth="0"></rect></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <path d="M71.916,4.068c-1.171,0.732-3.879,3.659-5.379,4.244c-0.461,0.18-0.836,0.431-1.145,0.69 c0.6-1.182,0.596-3.104-3.343-5.217c-0.485-0.261-0.84,0.001-0.893,0.55c-0.038,0.394-0.133,0.819-0.35,1.099 c-0.337,0.438-0.874-0.167-0.854-0.719c0.051-1.406,0.114-3.854-0.04-4.343c-0.22-0.695-1.098,2.378-2.086,3.147 c-0.896,0.696,0.163-1.342-2.627-1.757c-0.546-0.081-1.443-0.073-1.994-0.103c-3.438-0.183-5.558-1.114-6.026-1.616 c-0.467-0.5,2.529,3.491,4.312,4.339C49.291,3.91,41.827,2.692,38.714,3.9c-0.515,0.2-0.426,0.597,0.103,0.76 c1.084,0.334,2.791,0.983,3.535,1.932c1.135,1.445-3.842-3.183-11.867,5.403c-5.368,5.744-7.495,7.056-8.526,7.28 c-0.539,0.118-0.623,0.203-0.142,0.474c0.846,0.474,2.178,1.06,3.302,0.832c1.771-0.359-7.657,1.466-6.426,18.396 c0.04,0.551,0.178,0.558,0.356,0.035c0.247-0.723,0.68-1.727,1.371-2.557c0.354-0.424,0.542-0.286,0.341,0.229 c-0.534,1.369-1.46,3.834-1.46,4.485l0.107,48.835c0.001,0.553,0.447,0.948,0.988,0.834c2.528-0.53,9.604-2.669,17.553-10.811 c5.593-5.73,8.089-7.67,9.202-8.27c0.485-0.263,1.31,0.188,1.299,0.74c-0.013,0.678-0.453,1.849-2.159,3.822 c-3.282,3.798-9.178,3.135-9.068,11.002c0.008,0.552,0.475,1.132,1.026,1.168c1.189,0.078,3.358-0.158,5.944-2.169 c3.333-2.593,4.444-2.2,5.883-2.892c0.497-0.24,0.533-0.152,0.488,0.398c-0.021,0.264,0.05,0.526,0.325,0.706 c0.462,0.301,1.409,0.241,1.961,0.226c1.594-0.048,2.646-0.338,4.075-1.072c1.707-0.878,2.977-0.927,3.562-2.977 c0.585-2.049,4-3.415,4.146-6.195c0.146-2.781,6.244-9.074,5.415-11.855s0-4.049-7.171-4.196c-6.097-0.123-5.036-1.905-6.38-2.377 c-0.521-0.183-0.874-0.545-0.777-1.089c0.345-1.929,0.822-6.51-0.94-11.95c-1.493-4.604-1.439-7.086-1.204-8.28 c0.105-0.542,0.762-0.807,1.206-0.477c1.142,0.847,3.027,3.175,3.364,9.391c0.486,9.025,4.146,4.879,6.487,5.513 s1.122-1.22,2.342-2.586c1.093-1.223,2.106-2.173,1.57-4.74c-0.113-0.541-0.386-1.396-0.498-1.937 c-0.781-3.751-0.703-11.031,1.123-16.155c1.857-5.21-0.492-4.909-1.834-8.727c-0.183-0.521,0.013-1.288,0.363-1.714 c0.896-1.087,2.44-3.142,2.824-4.804C71.074,6.154,73.086,3.336,71.916,4.068z"></path> </g> </g> </g></svg></span>
                                <input type="text" name="form-3-assigned_to" id="id_form-3-assigned_to" class="form-control autocomplete " placeholder="" value="" autocomplete="off" spellcheck="false" aria-autocomplete="list" aria-haspopup="menu" aria-expanded="false" role="combobox" aria-controls="ac-menu-4" aria-activedescendant="ac-menu-4-0"><ul id="ac-menu-4" class="dropdown-menu autocomplete-menu p-0" style="max-height: 280px; overflow-y: auto; overscroll-behavior: contain; text-align: unset; transform: unset; width: 240px;" role="menu"><li role="presentation"><a id="ac-menu-4-0" class="dropdown-item text-truncate" data-value="Last" data-label="Last" tabindex="-1" role="menuitem" href="#">Las<mark class="">t</mark></a></li><li role="presentation"><a id="ac-menu-4-1" class="dropdown-item text-truncate" data-value="test" data-label="test" tabindex="-1" role="menuitem" href="#"><mark class="">t</mark>est</a></li><li role="presentation"><a id="ac-menu-4-2" class="dropdown-item text-truncate" data-value="test1" data-label="test1" tabindex="-1" role="menuitem" href="#"><mark class="">t</mark>est1</a></li><li role="presentation"><a id="ac-menu-4-3" class="dropdown-item text-truncate" data-value="test2" data-label="test2" tabindex="-1" role="menuitem" href="#"><mark class="">t</mark>est2</a></li><li role="presentation"><a id="ac-menu-4-4" class="dropdown-item text-truncate" data-value="test3" data-label="test3" tabindex="-1" role="menuitem" href="#"><mark class="">t</mark>est3</a></li><li role="presentation"><a id="ac-menu-4-5" class="dropdown-item text-truncate" data-value="test4" data-label="test4" tabindex="-1" role="menuitem" href="#"><mark class="">t</mark>est4</a></li></ul>

                            </div>

image

Any ideas?

I did try using the fixed position option, without success.

Thanks!

lekoala commented 8 months ago

you can try fixed positioning and see if that's any better. initially i wanted to avoid any of that, but quickly realised that only simple cases work with the default positioning. next version, i'll go for the bulletproof method right away using something like floating ui

lekoala commented 8 months ago

in the demo, you can see this

image

so i think fixed positioning should do the trick. closing, but feel free to reopen with a demo that is not working with fixed positioning