JavaScript UI Libraries & Blazor Components Suite – Smart UI Forums Text Boxes & Inputs multi-input possibly having more than one item per line

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #102462
    edwardsmarkff
    Participant
    Up
    0
    Down

    <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>

    #102493
    Yavor Dashev
    Participant
    Up
    0
    Down

    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/

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.