Results 1 to 7 of 7

Thread: Toolbar items without text are cut off when overflowed to a menu

    You found a bug! We've classified it as EXTJS-18672 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha Premium User
    Join Date
    Nov 2015
    Location
    Sydney, Australia
    Posts
    38

    Default Toolbar items without text are cut off when overflowed to a menu

    Ext JS 6.0.1

    Fiddle: https://fiddle.sencha.com/#fiddle/16ud

    Screenshot:

    toolbaroverflow.png

    Tested broken in IE11, current Firefox 45, current Chrome 48

    It appears that the height of the menu items currently comes from the text el, which doesn't exist when text is not set.

    Setting a zero-width char in text fixes the menu, but introduces an ugly bit of extra space on the toolbar buttons.

  2. #2
    Sencha User
    Join Date
    Apr 2013
    Posts
    914

    Default

    It's an old bug.
    You can try the following workaround to fix it:
    Code:
    .x-boundlist-item {
        min-height: 20px;
    }
    Change 20px to whatever default triton menu item height is.

  3. #3

    Default

    Thanks, I reported the bug.

  4. #4

    Default

    Another workaround is to add to the text config of items that have no text.

  5. #5
    Sencha Premium User
    Join Date
    Nov 2015
    Location
    Sydney, Australia
    Posts
    38

    Default

    Thanks for the workarounds.



    hakimio, your workaround works well. Looks like the best way to apply it to the default menu ui would be something like:

    Code:
    .#{$prefix}menu-item-default {
        line-height: $menu-item-height - vertical($menu-item-border-width) - abs($menu-item-text-vertical-offset);
    }
    Unfortunately, there doesn't seem to be an easy way to apply it to all UIs without doing it manually for each, or copying the entire massive SCSS mixin in order to override. But this is probably good enough for now.



    Alex, your suggested workaround of adding a text config does not work since we wish to keep a pure icon when outside the menu. It would be fine if there was a way to define text that only appears when overflowed, but I don't see a way - I've also played with the overflowchange event, but messing with the text there screws up ExtJS's size calcs.

    Here's an example fiddle: https://fiddle.sencha.com/#fiddle/170o

    As you can see there (if you adjust window size), the normal space and the empty text still size incorrectly in the menu, while the zero-width space works there. However, when viewed on the toolbar itself both the zero-width and the normal space introduce extra padding on the right of the icon. This obviously looks wrong.

  6. #6
    Sencha Premium Member tjstuart's Avatar
    Join Date
    May 2007
    Location
    Sydney, Australia
    Posts
    457

    Default

    Bump. Any ETA? Will fix be in 6.2?

  7. #7

    Default

    Bump. Still a bug in 6.5.3. Any ETA?

Similar Threads

  1. Replies: 1
    Last Post: 16 Sep 2015, 10:58 AM
  2. Replies: 7
    Last Post: 24 Jul 2014, 10:37 AM
  3. menu as toolbar items and context menu items
    By nurhadijogja in forum Ext: Q&A
    Replies: 8
    Last Post: 3 May 2013, 3:45 AM
  4. Replies: 0
    Last Post: 31 Aug 2011, 12:20 AM
  5. Replies: 0
    Last Post: 25 Jul 2011, 6:13 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •