[CLOSED] Is it possible Icon and Text alignment on Button?

  1. #1

    [CLOSED] Is it possible Icon and Text alignment on Button?

    Hi,

    I have added Icon and Text in the group of buttons and button are not having same size text, so Icon and Text in group of buttons looks like zig-zag. Please check the screenshot. Is it possible to align button Icon and Text either letf or rignt instead of center?
    Attached Thumbnails Click image for larger version. 

Name:	text allignment in button.PNG 
Views:	283 
Size:	25.1 KB 
ID:	2419  
    Last edited by Daniil; Mar 15, 2011 at 7:39 AM. Reason: [CLOSED]
  2. #2
    Hi,

    I was able to adjust the alignment with a little custom css. The following example demonstrates.

    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 Example</title>
        <style type="text/css">
            .btnLeft .x-btn-mc {
                text-align : left;
            }
            
            .btnLeft .x-btn-mc em {
                padding-left : 5px;
            }
        </style>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:Button runat="server" Text="Loan To Processor" Width="200" Icon="Application" Cls="btnLeft" />
            <ext:Button runat="server" Text="Loan To Underwriter" Width="200" Icon="Application" Cls="btnLeft" />
            <ext:Button runat="server" Text="Loan Approved" Width="200" Icon="Application" Cls="btnLeft" />
            <ext:Button runat="server" Text="Loan Clear to Close" Width="200" Icon="Application" Cls="btnLeft" />
        </form>
    </body>
    </html>
    Hope this helps
    Geoffrey McGill
    Founder
  3. #3
    Hi,

    Please set the respective .Cls.

    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 Example</title>
    
        <style type="text/css">
            .my-align .x-btn-mc {
                text-align: left;
            }
        </style>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:ButtonGroup 
            runat="server" 
            Columns="1" 
            Layout="row" 
            Width="150">
            <Items>
                <ext:Button 
                    runat="server" 
                    Text="Button1" 
                    Icon="Accept" 
                    Cls="my-align" 
                    />
                <ext:Button 
                    runat="server" 
                    Text="Button2 (too long)" 
                    Icon="Anchor"  
                    Cls="my-align"
                    />
                <ext:Button 
                    runat="server" 
                    Text="Button2 (long)" 
                    Icon="Add" 
                    Cls="my-align"
                    />
            </Items>
        </ext:ButtonGroup>
        </form>
    </body>
    </html>

Similar Threads

  1. [CLOSED] Menu Panel Icon alignment issue
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Jul 09, 2013, 2:04 AM
  2. Replies: 1
    Last Post: Jul 17, 2012, 5:53 PM
  3. [CLOSED] Text Alignment issue
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Oct 16, 2011, 1:51 PM
  4. [CLOSED] Vertical text alignment for LinkButton is off
    By jmcantrell in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 15, 2010, 7:32 PM
  5. Replies: 0
    Last Post: Jun 17, 2009, 6:36 PM

Tags for this Thread

Posting Permissions