1. #1
    Sencha User
    Join Date
    Mar 2008
    Posts
    55
    Answers
    1
    Vote Rating
    8
    andong is on a distinguished road

      0  

    Default Answered: [4.2.1.881]Large menu icon can not resize to show!

    Answered: [4.2.1.881]Large menu icon can not resize to show!


    Before version 4.2, I can use a large icon (48*48) file in the menu item by added an extra css, but now it can not work in version 4.2. I noticed 4.2 have changed the menu icon to background-image mode.

    What can I do for the large icon?


  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,357
    Answers
    432
    Vote Rating
    200
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    Can you post an example of what you were doing before?
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: sheryl@sencha.com

  3. #3
    Sencha User
    Join Date
    Mar 2008
    Posts
    55
    Answers
    1
    Vote Rating
    8
    andong is on a distinguished road

      0  

    Default


    Here are some examples.

    CSS:
    Code:
    .start-menu-item-icon
    {
    	height: 18px;
    	width: 18px;
    }
    JS:
    Code:
    startMenu.add({text: 'Wallpaper', icon: '../image/picture.png', minWidth: 200, margins: '2 0 2 0', iconCls: 'start-menu-item-icon', handler: changeWallPaper});
    I use the start-menu-item-icon css to control the menu item's icon size of picture.png, the size of picture.png is 48*48 px. I can do this before version 4.2 and the picture.png is reized to 18*18 px. But the icon can not be showed well at version 4.2, only a part of the icon was showed.

  4. #4
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,357
    Answers
    432
    Vote Rating
    200
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    I see. Looks like you'll have to tinker a bit with the CSS applied to the menu items and possibly the height of the menu item itself to get the layout just like you want.
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: sheryl@sencha.com

  5. #5
    Sencha User
    Join Date
    Mar 2008
    Posts
    55
    Answers
    1
    Vote Rating
    8
    andong is on a distinguished road

      0  

    Default


    I have added CSS3 property:background-size, but this property is not surportted by all the traditional browser:
    Code:
    .start-menu-item-icon
    {
    	height: 18px;
    	width: 18px;
    	background-size: 100%;
    }
    What's your suggestion? Why changed the menu's img tag to the background-image mode? The background-image mode is hard to control.

    The same issue is found in the tree node icon. The best way for the icon is not limit its actual size, the same icon file may be used in different place, so we just need one large size file instead of more size file.

  6. #6
    Sencha User
    Join Date
    Mar 2008
    Posts
    55
    Answers
    1
    Vote Rating
    8
    andong is on a distinguished road

      0  

    Default


    Any suggestions?

  7. #7
    Sencha - Support Team
    Join Date
    Feb 2013
    Location
    California
    Posts
    3,831
    Answers
    155
    Vote Rating
    72
    Gary Schlosberg is a jewel in the rough Gary Schlosberg is a jewel in the rough Gary Schlosberg is a jewel in the rough Gary Schlosberg is a jewel in the rough

      0  

Thread Participants: 2

Tags for this Thread