Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Submit image (not a button) problem

  1. #1
    Sencha User
    Join Date
    Sep 2009
    Posts
    35

    Default Submit image (not a button) problem

    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.

  2. #2
    Sencha User aw1zard2's Avatar
    Join Date
    Sep 2009
    Location
    Dallas, Texas
    Posts
    589

    Default

    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.
    Attached Images Attached Images

  3. #3
    Sencha User
    Join Date
    Sep 2009
    Posts
    35

    Default

    Quote Originally Posted by aw1zard2 View Post
    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.

  4. #4
    Sencha User aw1zard2's Avatar
    Join Date
    Sep 2009
    Location
    Dallas, Texas
    Posts
    589

    Default

    Since an Ext Button uses css you can keep all the handlers but just change the css to use your image.


  5. #5
    Sencha User
    Join Date
    Sep 2009
    Posts
    35

    Default

    Quote Originally Posted by aw1zard2 View Post
    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.

  6. #6
    Sencha User aw1zard2's Avatar
    Join Date
    Sep 2009
    Location
    Dallas, Texas
    Posts
    589

    Default

    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:
    HTML Code:
    .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:

    HTML Code:
    /* 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;
    }

  7. #7
    Sencha User
    Join Date
    Sep 2009
    Posts
    35

    Default

    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?

  8. #8
    Sencha User aw1zard2's Avatar
    Join Date
    Sep 2009
    Location
    Dallas, Texas
    Posts
    589

    Default

    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 Code:
    <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>

  9. #9
    Sencha User
    Join Date
    Sep 2009
    Posts
    35

    Default

    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.

  10. #10
    Sencha User aw1zard2's Avatar
    Join Date
    Sep 2009
    Location
    Dallas, Texas
    Posts
    589

    Default

    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

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


Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •