PDA

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



RCM
Jun 13, 2012, 7:36 PM
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

geoffrey.mcgill
Jun 13, 2012, 7:38 PM
Code sample please.

See #1 at the following location:

http://forums.ext.net/showthread.php?10205-More-Information-Required

RCM
Jun 13, 2012, 7:49 PM
Code sample please.

See #1 at the following location:

http://forums.ext.net/showthread.php?10205-More-Information-Required



button.IconUrl = "/image/test.png"
button.Text = "Sample1"
button.IconAlign = IconAlign.Top;

geoffrey.mcgill
Jun 13, 2012, 8:21 PM
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.

RCM
Jun 14, 2012, 1:52 PM
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

Daniil
Jun 14, 2012, 2:52 PM
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/#!/api/Ext.button.Button-cfg-scale
http://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>

RCM
Jun 19, 2012, 2:30 PM
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/#!/api/Ext.button.Button-cfg-scale
http://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.

Daniil
May 22, 2015, 8:03 AM
Here is a simplified example.
http://forums.ext.net/showthread.php?59514&p=272539&viewfull=1#post272539