[CLOSED] Custom Image in Button

  1. #1

    [CLOSED] Custom Image in Button

    The Code:

    <%@ Page Language="vb" %>
     
    <%@ 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></title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:Button
                 runat="server"
                 Height="80"
                 Width="60"
                 IconAlign="Top"
                 TextAlign="Center"
                 Text="Simple<br>test"
                 Scale="Large"
                 IconUrl="Image48x48.png"
                 Margin="50"
                 EnableToggle="true"
                 Flat="true"/>
        </form>
    </body>
    </html>
    Show a Button with image truncate vertically !
    It's possible show a full image with text multiline on bottom?

    Click image for larger version. 

Name:	Image48x48.png 
Views:	43 
Size:	2.9 KB 
ID:	23980

    Click image for larger version. 

Name:	Example.png 
Views:	5 
Size:	4.5 KB 
ID:	23981
    Last edited by Daniil; May 22, 2015 at 11:39 AM. Reason: [CLOSED]
  2. #2
    Hi Mario,

    This might help:
    http://forums.ext.net/showthread.php?19517
  3. #3
    Hi Danill,

    I have yet tried the solution in your thread, but it not work for me !

    The code:

    <%@ Page Language="vb" %>
     
    <%@ 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="image48x48.png" />
        </form>
    </body>
    </html>

    The result:
    Click image for larger version. 

Name:	Result.png 
Views:	6 
Size:	6.1 KB 
ID:	23985


    The icon button is always 32 x 32 !
    Solutions?
  4. #4
    Please try this example:

    Example
    <%@ Page Language="C#" %>
     
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    
        <style>
            .my-scale .x-btn-button {
                height: 48px;
            }
    
            .my-scale .x-btn-inner {
                line-height: 48px;
                padding-left: 52px;
            }
    
            .my-scale .x-btn-icon-el {
                background-size: 48px;
                width: 48px;
            }
        </style>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:Button 
                runat="server" 
                Text="Button" 
                Cls="my-scale" 
                IconUrl="icon.png" />
        </form>
    </body>
    </html>
  5. #5
    Tnx Danill,

    I have change your example... and It work for me.

    Mario

    <%@ Page Language="C#" %>
     
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    
        <style>
            .my-scale .x-btn-inner {
                line-height: 48px;
                padding-top: 48px;
            }
    
            .my-scale .x-btn-icon-el {
                background-size: 48px;
                height:48px;
            }
        </style>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:Button 
                runat="server" 
                Text="Pippo"
                Width="60"
                Height="80"
                IconAlign="Top"
                TextAlign="Center" 
                Cls="my-scale" 
                IconUrl="Image48x48.png" />
        </form>
    </body>
    </html>

Similar Threads

  1. [CLOSED] Image Button using CSS
    By speedstepmem4 in forum 3.x Premium Help
    Replies: 3
    Last Post: Jan 31, 2015, 7:16 AM
  2. Replies: 0
    Last Post: May 03, 2011, 1:13 PM
  3. [CLOSED] Image next to radio button?
    By Jurke in forum 1.x Premium Help
    Replies: 2
    Last Post: Feb 06, 2009, 12:31 PM
  4. image button
    By speedstepmem4 in forum Feature Requests
    Replies: 2
    Last Post: Dec 08, 2008, 6:12 AM
  5. Image Button
    By sz_146 in forum 1.x Help
    Replies: 0
    Last Post: Oct 23, 2008, 8:54 AM

Tags for this Thread

Posting Permissions