[CLOSED] What is the way to properly size a button which has icon in it?

  1. #1

    [CLOSED] What is the way to properly size a button which has icon in it?

    I am using buttons which have icons set. The issue I have is that only part of my icon is visible and the rest of my icon is behind button text.

    I noticed that somebody is using css to fix the problem. What other way other than css? Thanks.

    Xiaogang
    Last edited by Daniil; Jun 19, 2012 at 2:41 PM. Reason: [CLOSED]
  2. #2
    Code sample please.

    See #1 at the following location:

    http://forums.ext.net/showthread.php...ation-Required
    Geoffrey McGill
    Founder
  3. #3
    Quote Originally Posted by geoffrey.mcgill View Post
    Code sample please.

    See #1 at the following location:

    http://forums.ext.net/showthread.php...ation-Required
                button.IconUrl = "/image/test.png"
                button.Text = "Sample1"
                button.IconAlign = IconAlign.Top;
  4. #4
    Quote Originally Posted by RCM View Post
                button.IconUrl = "/image/test.png"
                button.Text = "Sample1"
                button.IconAlign = IconAlign.Top;
    Thanks for the posting the code sample. Unfortunately I was unable to reproduce any problems with the rendering of the Button or Icon.
    Geoffrey McGill
    Founder
  5. #5
    Quote Originally Posted by geoffrey.mcgill View Post
    Thanks for the posting the code sample. Unfortunately I was unable to reproduce any problems with the rendering of the Button or Icon.
    Please use a 60 X 60 image file or bigger
  6. #6
    Hi,

    The maximum supported icon size is 32x32.

    You should set up
    Scale="large"
    to allow 32x32 icons.

    See also
    http://docs.sencha.com/ext-js/4-1/#!...tton-cfg-scale
    https://examples2.ext.net/#/Buttons/Basic/Variations/

    To support bigger icons you should deal with CSS overriding the existing rules.

    Here is the example demonstrating how to use 48x48 icons with default left icon alignment.

    Example
    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    
        <style type="text/css">
            .my-scale.x-btn-default-large-icon button, 
            .my-scale.x-btn-default-large-icon a, 
            .my-scale.x-btn-default-large-icon .x-btn-inner {
                height: 48px !important;
                line-height: 48px;
            }
            
            .my-scale.x-btn-default-large-icon .x-btn-inner {
                width: 48px;
            }
            
            .my-scale.x-btn-default-large-icon .x-btn-icon {
                width: 48px;
                height: 48px;
            }
            
            .my-scale.x-btn-default-large-icon-text-left button, 
            .my-scale.x-btn-default-large-icon-text-left a {
                height: 48px;
            }
            
            .my-scale.x-btn-default-large-icon-text-left .x-btn-inner {
                height: 48px;
                line-height: 48px;
                padding-left: 52px;
            }
            
            .my-scale.x-btn-default-large-icon-text-left .x-btn-icon {
                width: 48px;
            }
            
            .x-ie6 .my-scale.x-btn-default-large-icon-text-left .x-btn-icon, 
            .x-quirks .my-scale.x-btn-default-large-icon-text-left .x-btn-icon {
                height: 48px;
            }
        </style>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:Button 
                runat="server" 
                Text="Text" 
                Scale="Large"
                Cls="my-scale" 
                IconUrl="resources/images/48x48.png" />
        </form>
    </body>
    </html>
  7. #7
    Quote Originally Posted by Daniil View Post
    Hi,

    The maximum supported icon size is 32x32.

    You should set up
    Scale="large"
    to allow 32x32 icons.

    See also
    http://docs.sencha.com/ext-js/4-1/#!...tton-cfg-scale
    https://examples2.ext.net/#/Buttons/Basic/Variations/

    To support bigger icons you should deal with CSS overriding the existing rules.

    Here is the example demonstrating how to use 48x48 icons with default left icon alignment.

    Example
    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    
        <style type="text/css">
            .my-scale.x-btn-default-large-icon button, 
            .my-scale.x-btn-default-large-icon a, 
            .my-scale.x-btn-default-large-icon .x-btn-inner {
                height: 48px !important;
                line-height: 48px;
            }
            
            .my-scale.x-btn-default-large-icon .x-btn-inner {
                width: 48px;
            }
            
            .my-scale.x-btn-default-large-icon .x-btn-icon {
                width: 48px;
                height: 48px;
            }
            
            .my-scale.x-btn-default-large-icon-text-left button, 
            .my-scale.x-btn-default-large-icon-text-left a {
                height: 48px;
            }
            
            .my-scale.x-btn-default-large-icon-text-left .x-btn-inner {
                height: 48px;
                line-height: 48px;
                padding-left: 52px;
            }
            
            .my-scale.x-btn-default-large-icon-text-left .x-btn-icon {
                width: 48px;
            }
            
            .x-ie6 .my-scale.x-btn-default-large-icon-text-left .x-btn-icon, 
            .x-quirks .my-scale.x-btn-default-large-icon-text-left .x-btn-icon {
                height: 48px;
            }
        </style>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:Button 
                runat="server" 
                Text="Text" 
                Scale="Large"
                Cls="my-scale" 
                IconUrl="resources/images/48x48.png" />
        </form>
    </body>
    </html>

    Thank you very much for your information.
  8. #8

Similar Threads

  1. [CLOSED] How to set Icon for a button in Javascript?
    By nhg_itd in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 07, 2012, 3:12 AM
  2. [CLOSED] Flat-Button in CompositeField not displayed properly
    By pschojer in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 29, 2011, 11:47 AM
  3. [CLOSED] reduce button font size
    By speedstepmem3 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 13, 2011, 10:32 AM
  4. Change font/button size
    By plykkegaard in forum 1.x Help
    Replies: 0
    Last Post: Sep 02, 2010, 3:09 PM
  5. [CLOSED] [1.0] button's icon not displayed
    By PoloTheMonk in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jan 07, 2010, 7:36 AM

Tags for this Thread

Posting Permissions