multi-input possibly having more than one item per line

[edwardsmarkff]

<div>this multi-input looks <b>PERFECT </b>for my next application:</div>
<div></div>
<div>https://www.htmlelements.com/<wbr />demos/input/multi-input/</div>
<div></div>
<div>is there any possibility of getting more than one item on each line of the drop-down?   i need to create a drop-down containing phonetic symbols, but the number of drop-down items will exceed 30, and i really want to avoid scrolling if possible.</div>

[Yavor Dashev]

Hi edwardsmarkff,

Unfortunately by the default this functionality is not supported by the MultiInput component, but there are two options that may be suitable for you.

Option #1:
Set the DropDownHeight proprety of the component to ‘auto’. This will result in a drop down menu with height calculated by the number of items in it and it doesn’t have a scrollbar.

Option #2:
I have prepared a code snippet for this option and is similar to the functionality that you need:

    input.dropDownWidth = '700';
    input.dropDownHeight= 'auto'
    
    input.addEventListener('click', ( )=> {
        let dropdownMenu = document.querySelector('.smart-input-drop-down-menu');

        if (dropdownMenu != null) {
            let allDropdownItems = dropdownMenu.querySelectorAll('li');
            for (let i = 0; i < allDropdownItems.length; i ++) {
                if (i % 2 == 0) {
                    allDropdownItems[i].style.float = 'left';
                }
                else {
                    allDropdownItems[i].style.float = 'right';
                }
            }
        }
    });

Let me know if this works for you!

Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[Author]

Posts