PDA

View Full Version : Submit image (not a button) problem



vabenzo
14 Oct 2009, 10:55 AM
I can submit my form via a button but when I put the image in it gets reduced to a smaller size. ie. The image is 100x100 and it displays as 10x10.

Any ideas?

Thank you in advance for your time.

aw1zard2
14 Oct 2009, 11:00 AM
http://www.extjs.com/forum/showthread.php?t=82543

Image below is doing the huge css and a button of 90x90.

If this isn't what your looking for explain where the image is a separate component or an icon on the button.

vabenzo
14 Oct 2009, 1:27 PM
http://www.extjs.com/forum/showthread.php?t=82543

Image below is doing the huge css and a button of 90x90.

If this isn't what your looking for explain where the image is a separate component or an icon on the button.


Thanks.

Doing this creates a square button. I want to be able to click on an image and have it act like a submit button with all the usual handlers.

aw1zard2
14 Oct 2009, 1:31 PM
Since an Ext Button uses css you can keep all the handlers but just change the css to use your image.

:)

vabenzo
14 Oct 2009, 2:27 PM
Since an Ext Button uses css you can keep all the handlers but just change the css to use your image.

:)

I am having trouble overriding the css .x-btn-tr,tc,tl,ml etc...

I want to make them disappear.

aw1zard2
15 Oct 2009, 7:11 AM
Here is the one image used to make a button.
You also need to change the structure of the button css. Hope this helps. :)

My Path: ext3/resources/css/visual/Button.css

Visual part of css for Button:

.x-btn-tl, .x-btn-tr, .x-btn-tc, .x-btn-ml, .x-btn-mr, .x-btn-mc, .x-btn-bl, .x-btn-br, .x-btn-bc{
background-image:url(../images/default/button/btn.gif);
}


My Path: ext3/resources/css/structure/Button.css

Structure part of css for button:


/* background positioning */
.x-btn-tr i, .x-btn-tl i, .x-btn-mr i, .x-btn-ml i, .x-btn-br i, .x-btn-bl i{
font-size:1px;
line-height:1px;
width:3px;
display:block;
overflow:hidden;
}

.x-btn-tr i, .x-btn-tl i, .x-btn-br i, .x-btn-bl i{
height:3px;
}

.x-btn-tl{
width:3px;
height:3px;
background:no-repeat 0 0;
}
.x-btn-tr{
width:3px;
height:3px;
background:no-repeat -3px 0;
}
.x-btn-tc{
height:3px;
background:repeat-x 0 -6px;
}

.x-btn-ml{
width:3px;
background:no-repeat 0 -24px;
}
.x-btn-mr{
width:3px;
background:no-repeat -3px -24px;
}

.x-btn-mc{
background:repeat-x 0 -1096px;
vertical-align: middle;
text-align:center;
padding:0 5px;
cursor:pointer;
white-space:nowrap;
}

.x-btn-bl{
width:3px;
height:3px;
background:no-repeat 0 -3px;
}

.x-btn-br{
width:3px;
height:3px;
background:no-repeat -3px -3px;
}

.x-btn-bc{
height:3px;
background:repeat-x 0 -15px;
}

.x-btn-over .x-btn-tl{
background-position: -6px 0;
}

.x-btn-over .x-btn-tr{
background-position: -9px 0;
}

.x-btn-over .x-btn-tc{
background-position: 0 -9px;
}

.x-btn-over .x-btn-ml{
background-position: -6px -24px;
}

.x-btn-over .x-btn-mr{
background-position: -9px -24px;
}

.x-btn-over .x-btn-mc{
background-position: 0 -2168px;
}

.x-btn-over .x-btn-bl{
background-position: -6px -3px;
}

.x-btn-over .x-btn-br{
background-position: -9px -3px;
}

.x-btn-over .x-btn-bc{
background-position: 0 -18px;
}

.x-btn-click .x-btn-tl, .x-btn-menu-active .x-btn-tl, .x-btn-pressed .x-btn-tl{
background-position: -12px 0;
}

.x-btn-click .x-btn-tr, .x-btn-menu-active .x-btn-tr, .x-btn-pressed .x-btn-tr{
background-position: -15px 0;
}

.x-btn-click .x-btn-tc, .x-btn-menu-active .x-btn-tc, .x-btn-pressed .x-btn-tc{
background-position: 0 -12px;
}

.x-btn-click .x-btn-ml, .x-btn-menu-active .x-btn-ml, .x-btn-pressed .x-btn-ml{
background-position: -12px -24px;
}

.x-btn-click .x-btn-mr, .x-btn-menu-active .x-btn-mr, .x-btn-pressed .x-btn-mr{
background-position: -15px -24px;
}

.x-btn-click .x-btn-mc, .x-btn-menu-active .x-btn-mc, .x-btn-pressed .x-btn-mc{
background-position: 0 -3240px;
}

.x-btn-click .x-btn-bl, .x-btn-menu-active .x-btn-bl, .x-btn-pressed .x-btn-bl{
background-position: -12px -3px;
}

.x-btn-click .x-btn-br, .x-btn-menu-active .x-btn-br, .x-btn-pressed .x-btn-br{
background-position: -15px -3px;
}

.x-btn-click .x-btn-bc, .x-btn-menu-active .x-btn-bc, .x-btn-pressed .x-btn-bc{
background-position: 0 -21px;
}

vabenzo
15 Oct 2009, 7:46 AM
Thank you. I have found this in the css. What I still am not sure of is how to override this without going in and breaking the existing css. I have tried to override. As far as restructuring the button css, am I doing it to the base? I am not following. Still a bit of a newbie here. Might you have an example of this?

aw1zard2
15 Oct 2009, 8:01 AM
Here is an example. :) This is just a little change from the code I posted in this thread http://www.extjs.com/forum/showthread.php?t=82543

This overrides the css in ext-all.css for the small icon text of a button.
Just make sure either the <style> tag is below the ext-all.css or if you want to create another css file just make sure the linked css is below the ext-all.css. In that thread I changed the x-btn-huge to x-btn-small to do an override.


<html>
<head>
<link rel="stylesheet" type="text/css" href="../ext3/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs.php"></script>
<style type="text/css">
.x-btn-icon .x-btn-small .x-btn-text {
height: 90px;
width: 90px;
}
</style>
<script type="text/javascript" src="test.js"></script>
</head>
<body style="background-color:#000;">
</body>
</html>

vabenzo
15 Oct 2009, 8:21 AM
Ok so I put this in with a modified image that is transparent. I have it below ext-all.css

<style type="text/css">
.x-btn-tl, .x-btn-tr, .x-btn-tc, .x-btn-ml, .x-btn-mr, .x-btn-mc, .x-btn-bl, .x-btn-br, .x-btn-bc{
background-image:url(../images/default/button/btns2.gif) ! important;
}
</style>

It's a transparent gif. When I replace the original gif I get what I want. When I try to override, it's not picking it up. I tried with and without ! important.

aw1zard2
15 Oct 2009, 8:38 AM
First off it's !important you have a space in what you listed also make sure to put code inside
CODE or HTML tags for the post.

http://www.extjs.com/learn/Ext_Forum..._code_properly (http://www.extjs.com/forum/../learn/Ext_Forum..._code_properly)

Also remember to reset the background positions if it is needed.

:)

vabenzo
15 Oct 2009, 9:08 AM
Thank you! The space was the answer all along. I appreciate the help. I'll remember to use code tags in future posts also.