1. #1
    Sencha User
    Join Date
    Nov 2007
    Posts
    35
    Vote Rating
    0
    albertogiantin is on a distinguished road

      0  

    Default DualListField iconButton style problem

    DualListField iconButton style problem


    Hi all, I'm trying to use DualListField in my project, but a strange problem happens.
    All icon buttons appear too small.
    Using firebug I've noticed that to the div button are applied several css style.
    In particular this one from IconButton style:
    Code:
    com-sencha-gxt-theme-base-client-button-IconButtonDefaultAppearance-IconButtonStyle-button {
        background-repeat: no-repeat;
        cursor: pointer;
        height: 15px;
        margin-left: 2px;
        overflow: hidden;
        width: 15px;
    }
    and this from DualListField style:
    Code:
    com-sencha-gxt-theme-base-client-field-DualListFieldDefaultAppearance-DualListFieldStyle-up {
        background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAlElEQVR42q3TwQqCUBCFYV/rgo/lA0obcdMyRBKzgkQRw1CjTaYyh9QZhFHhczMz/+5aVv/ZzleFjpv2ozJGfr9X/VZB4FnVKgjkRaWCQJqVKgjcHjnLGDOQ5ghcrukCHRNuB4Eovk/Mj8l8D4HwnIB0TP53ETgFMYuOpDkC7sFnUUCaI+D5RxYFpPlqYM1OgY3PuQP90PG5qhW2VQAAAABJRU5ErkJggg==") no-repeat scroll 0 0 transparent;
        height: 16px;
        overflow: hidden;
        width: 16px;
    }
    The problem is that ,in Ext GWT Explorer example DualList style override IconButton style, unlike in my application the opposite happens, so the div have a size of 15x15 px and icons looks cutted.
    PrintScreen.png

    How can this happen? I'm using gwt 2.0.5 and GXT 3.0.2

  2. #2
    Sencha User
    Join Date
    Nov 2007
    Posts
    35
    Vote Rating
    0
    albertogiantin is on a distinguished road

      0  

    Default


    Solved!

  3. #3
    Sencha Premium Member
    Join Date
    Nov 2012
    Location
    Cremona Italy
    Posts
    37
    Vote Rating
    2
    info@csamed.it is on a distinguished road

      0  

    Default


    To help other folks, when you have time please post the solution. thanks!

  4. #4
    Sencha User
    Join Date
    Aug 2008
    Posts
    19
    Vote Rating
    0
    mstguy01 is on a distinguished road

      0  

    Default


    Documenting a solution in case someone else faces this issue too. I thought that this was fixed in GXT 3.1 (or earlier) but I still face this problem. Here is a solution that I came up with.

    Code:
     public class MyDualListFieldAppearance extends DualListFieldDefaultAppearance {
    public interface MyDualListFieldResources extends DualListFieldResources {
    @Source("MyDualListField.css") @Override MyStyle css();
    } public interface MyStyle extends DualListFieldStyle{} public MyDualListFieldAppearance() {
    super(GWT.<DualListFieldResources> create(MyDualListFieldResources.class));
    }
    }
    Then copy com/sencha/gxt/theme/base/client/field/DualListField.css from gxt.jar to MyDualListField.css in the same directory as this class and add

    Code:
    height: 16px !important;
    width: 16px !important;
    to each entry.

    Apply MyDualListFieldAppearance to the DualListField that you create and the IconButtons will not be cut off anymore.