What's New?

[CLOSED] Custom Image in Button

  1. #1
    May 18, 2015, 2:58 PM

    [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?

    Name: Image48x48.png Views: 729 Size: 2.9 KB

    Click image for larger version.  Name: Example.png  Views: 180  Size: 4.5 KB  ID: 23981
    Last edited by Daniil; May 22, 2015 at 10:39 AM. Reason: [CLOSED]
  2. #2
    May 19, 2015, 9:22 PM
    Hi Mario,

    This might help:
    http://forums.ext.net/showthread.php?19517
  3. #3
    May 20, 2015, 4:10 AM
    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: 148  Size: 6.1 KB  ID: 23985


    The icon button is always 32 x 32 !
    Solutions?
  4. #4
    May 22, 2015, 8:02 AM
    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
    May 22, 2015, 8:45 AM
    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 Legacy Premium Help
    Replies: 3
    Last Post: Jan 31, 2015, 6:16 AM
  2. Updating the background image of a custom panel tool
    By SMS in forum 1.x Help
    Replies: 0
    Last Post: May 03, 2011, 12:13 PM
  3. [CLOSED] Image next to radio button?
    By Jurke in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 06, 2009, 11:31 AM
  4. Image Button
    By sz_146 in forum 1.x Help
    Replies: 0
    Last Post: Oct 23, 2008, 7:54 AM

Tags for this Thread

Posting Permissions