Results 1 to 5 of 5

Thread: DualListField iconButton style problem

  1. #1

    Default 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:
    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:
    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.

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

  2. #2



  3. #3
    Sencha Premium Member
    Join Date
    Nov 2012
    Cremona Italy


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

  4. #4
    Sencha User
    Join Date
    Aug 2008


    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.

     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

    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.

  5. #5

    Default DualListField iconButton style

    Thanks for the solution. i followed your code i added width: 16px !important; height: 16px !important; into MyDualListField.css for each entry,but still am facing the issue of buttons appear small. Could you please help me to identify the issue.

Tags for this Thread

Posting Permissions

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