Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    Menu in combination with 'display:none' bugs out

    Hello Iso,
    we have stumbled upon an issue regarding Menus which have their MenuItems hidden via CSS's display:none.
    Under some conditions, this setup causes the Entire menu to bug out and not respond (clicking away still dismisses the menu).

    Test case
    Code:
     @Override public void onModuleLoad() {
         MenuItem item1 = new MenuItem("item1");
        item1.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(MenuItemClickEvent event) {
                SC.say("clicked item1");
            }
        });
        item1.setEnableIfCondition(new MenuItemIfFunction() {
            @Override
            public boolean execute(Canvas target, Menu menu, MenuItem item) {
                 if(k%2 == 0) {
                    item.set_baseStyle("actionToolbarMoreMenuItemHidden");
                } else {
                    item.set_baseStyle("actionToolbarMoreMenuItem");
                }
                menu.markForRedraw();
                return true;
            }
        });
    
         MenuItem item2 = new MenuItem("item2");
        item2.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(MenuItemClickEvent event) {
                SC.say("clicked item2");
            }
        });
        item2.setEnableIfCondition(new MenuItemIfFunction() {
            @Override
            public boolean execute(Canvas target, Menu menu, MenuItem item) {
                 if(k%2 == 1) {
                    item.set_baseStyle("actionToolbarMoreMenuItemHidden");
                } else {
                    item.set_baseStyle("actionToolbarMoreMenuItem");
                }
                menu.markForRedraw();
                return true;
            }
        });
    
         Menu menu = new Menu();
        menu.addItem(item1);
        menu.addItem(item2);
    
         HLayout layout = new HLayout();
        layout.setWidth100();
        layout.setHeight100();
        layout.setBackgroundColor("green");
        layout.setContextMenu(menu);
        layout.draw();
    
         Scheduler.get().scheduleIncremental(new Scheduler.RepeatingCommand() {
            @Override
            public boolean execute() {
                k++;
                return true;
            }
        });
    }
    CSS
    Code:
    .actionToolbarMoreMenuItemHidden,
    .actionToolbarMoreMenuItemHiddenDisabled,
    .actionToolbarMoreMenuItemHiddenOver
    {
        display: none;
    }
    
    .actionToolbarMoreMenuItem,
    .actionToolbarMoreMenuItemOver,
    .actionToolbarMoreMenuItemDisabled
    {
        font-size: 12px;
        text-overflow: ellipsis;
        color: #000000;
        background-color: #ACBBDB;
        height: 25px !important;
    }
    
    .actionToolbarMoreMenuItemOver
    {
        background-color: #fff1a8;
    }
    
    .actionToolbarMoreMenuItemDisabled
    {
        color: #999999;
        background-color: #CCCCCC;
    }
    Basically, what we are trying to achieve is to show/hide certain MenuItems inside a Menu according to some conditions (for simplicity represented by changing variable 'k' inside the test case).
    In order to hide an Item, CSS display:none property is used.

    Side question: is there a better solution to dynamically hiding certain MenuItems?

    SmartClient Version: v11.1p_2018-03-09/Pro Deployment (built 2018-03-09)
    Chrome v. 64.0.3282.186
    Last edited by admin@seacomp.cz; 9 Mar 2018, 05:27.

    #2
    It is invalid to try to hide a menuItem via CSS. Use setItems() if you need to completely remove an item rather than just disable it.

    Note it's also invalid to try to influence the menuItems height via CSS, and it's not clear why you'd attempt that anyway, as they vertically auto-size.

    Comment


      #3
      Hello Iso,
      thanks for the warning. However, it still seems to me that hiding it in some way would be better than removing it completely since the specified MenuItemIfFunction() doesn't seem to fire; most likely because the removed MenuItem is no longer part of the shown Menu. This means that I can not dynamically show a once hidden MenuItem - not with the use of the MenuItemIfFunction().
      This would require me to have an extraneous logic that would go through all possible items and decide whether they can be shown which seems like a bit of menial work just to hide an item. Also that would render the MenuItemIfFunction() irrelevant.

      Comment


        #4
        You already have code to put together the MenuItems. Now just add parameters that let you decide which items to create. It's still just one codepath.

        Comment

        Working...
        X