Premium support for our pure JavaScript UI components


Post by rv3 »

How can i control the height of this menu inside this item?

I would like to reduce it to a certain height, and if possible also do add a filter on the very top of the list

thanks

Bildschirmfoto 2025-01-21 um 21.36.16.png
Bildschirmfoto 2025-01-21 um 21.36.16.png (204.62 KiB) Viewed 103 times

Post by tasnim »

Hi,

Not sure which menu it is. But you can set https://bryntum.com/products/calendar/docs/api/Core/widget/Menu#config-minHeight of the menu to control the height.

and if possible also do add a filter on the very top of the list

Sorry, I don't understand what you mean by "add a filter on the very top of the list". Could you please explain a bit further?


Post by rv3 »

Hi tasnim

my bad... I didnt explain the most correct way. The printscreen shows you a cell menu with two items. On the bottom one I have a submenu with a huge list. This list ocupys the all screen. therefore I'm ondering if there is any config to ajust the submenu layout, like defining the minHeight but only for the submenu group.

As this list list is incredible long, I would like to have a search field in on top of the submenu list to filter the submenu list.
Creating a filter might not be the most dificult part, but if i'm creating a dynamic list of submenus, how could i include this search field also in the submenu without beeing affected?


Post by ghulam.ghous »

my bad... I didnt explain the most correct way. The printscreen shows you a cell menu with two items. On the bottom one I have a submenu with a huge list. This list ocupys the all screen. therefore I'm ondering if there is any config to ajust the submenu layout, like defining the minHeight but only for the submenu group.

The subMenu is just a menu, you can apply maxHeight on it and then make it scrollable with some style:
https://bryntum.com/products/calendar/docs/api/Core/widget/Menu#config-maxHeight
https://bryntum.com/products/calendar/docs/api/Core/widget/Menu#config-style

Simple example:

    menu     : {
        anchor : true,
        items  : [
            {
                icon : 'b-fw-icon b-icon-add',
                text : 'Add'
            },
            {
                icon : 'b-fw-icon b-icon-trash',
                text : 'Remove'
            },
            {
                icon     : 'b-fw-icon b-icon-lock',
                disabled : true,
                text     : 'I am disabled'
            },
            {
                text : 'Sub menu',
                menu : {
                    maxHeight: 100, 
                    items:[{
                    icon : 'b-fw-icon b-fa-play',
                    text : 'Play'
                },{
                    icon : 'b-fw-icon b-fa-play',
                    text : 'Play'
                },{
                    icon : 'b-fw-icon b-fa-play',
                    text : 'Play'
                },{
                    icon : 'b-fw-icon b-fa-play',
                    text : 'Play'
                }]}
            }
        ],
        // Method is called for all ancestor levels
        onItem({ item }) {
            Toast.show('You clicked ' + item.text);
        }
    }

You just need to make it scrollable with some style.

As this list list is incredible long, I would like to have a search field in on top of the submenu list to filter the submenu list.
Creating a filter might not be the most dificult part, but if i'm creating a dynamic list of submenus, how could i include this search field also in the submenu without beeing affected?

You can simply add a textField item at the top of the list and assign some it to it so it should never be filtered. What do you mean by dynamic list of menus?

items : [{ type: 'textfield' }]

And on the onInput event you can catch the input value and filter the results. You can set the hidden property on non-matching results. Something like this:

menu:{
     items:[
{ type: 'textfield' 
   onInput(e){
          e.source.owner.items.forEach(i => i.text?.startsWith(e.value) ? i.hidden = false : i.hidden = true
}
}, 
{ text: 'hel'}],

Hopefully this helps


Post Reply