Results 1 to 6 of 6

Thread: Removing the icon space.

  1. #1
    Ext JS Premium Member
    Join Date
    Jan 2009
    Posts
    35

    Question Removing the icon space.

    We have a ext menu and do not want the icon space reserved for the menu item. Is there a way to remove it as we do not want to show any icon for the menu?

  2. #2
    Ext JS Premium Member
    Join Date
    Jan 2009
    Posts
    35

    Default

    Any help on this please?

  3. #3
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    Use the following css rules:
    Code:
    .x-menu {background-image: none;}
    a.x-menu-item {padding-left: 3px;}
    .x-menu-item-icon {display: none;}
    (optionally prefixed with the cls of the menu)

  4. #4
    Ext JS Premium Member
    Join Date
    Jan 2009
    Posts
    35

    Default

    Sorry, I am a bit new here. How to apply these CSS rule? Should these be applied on Menu or Item? I need to apply this only on one menu and other menus should have the default css rule.

  5. #5
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    1. Create a stylesheet (e.g. ext-extra.css) and link to it from your HTML page.
    2. Put the following css rules in it:
    Code:
    .x-menu-no-icon {background-image: none;}
    .x-menu-no-icon a.x-menu-item {padding-left: 3px;}
    .x-menu-no-icon .x-menu-item-icon {display: none;}
    3. Define your menu with:
    Code:
    cls: 'x-menu-no-icon'

  6. #6
    Ext JS Premium Member
    Join Date
    Jan 2009
    Posts
    35

    Default

    Thank you very much. This worked as expected. Ext Forums are great !!!

Tags for this Thread

Posting Permissions

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