How to put the Icons In the Center of the button in GXT

StackOverflow https://stackoverflow.com/questions/15930548

  •  03-04-2022
  •  | 
  •  

Question

Hi i am working on GXT

i have a button with an Icon.

I want to put the Icon in center.

Currently it looks like this.

enter image description here

the icon of the button is in left (because of IconAlign.LEFT).

I want it in center. But there is nothing like IconAlign.CENTER

If any one has an idea what to add in code.Please share

code 

button.setIconAlign(IconAlign.LEFT);
button.setIcon(Resources.INSTANCE.modify());
button.setStyleName("project-Button");

CSS

.project-Button {
    color: Black;
    border: thin outset #FF6600;
    font-family: Courier New, Century Gothic, Times New Roman, Verdana, Arial;
    vertical-align: middle;
    text-align: center;
    background-color: White;
    cursor: pointer;
}

thank you in advance

updated

public interface Resources extends ClientBundle {

    public Resources INSTANCE = GWT.create(Resources.class);

     @Source("Images/modify.png")
     ImageResource modify();
}
Was it helpful?

Solution

used this. and itis working fine. 

vertical-align: middle;
text-align: center;
background-position:30% 70%;

OTHER TIPS

This question's top answer is a bit of a hack but it should work.

Basically you can set the HTML within the button like this:

Button button = new Button();
String html = "...";
button.setHTML(html);

Within the HTML string you can put a <div> with the image.

There's more than likely a better way though.

Do you need exactly this long button, with image in center and text on the right of image? I mean, Can you use it with image on Top and text under them? Like here EXT GWT Showcase button

You could change the style like this :

.x-btn-text-icon .x-btn-text {
  position: relative;
  white-space: nowrap;
  outline: 0 none;
  overflow: hidden;
  width: 86px;
  margin: 0;
  cursor: pointer;
  border: 0 none;
  font: normal 11px arial,tahoma,verdana,helvetica;
  color: #333;
  background: transparent;
  background-position: 0 center;
  background-repeat: no-repeat;
  height: 32px;
  ...
}

It's seems that with ExtJs there is a iconAlign:'center', so I wonder if you could use a JsObject with the right JSON description in your java code ......

use .center {margin:0, auto; }

if you use "background-position:30% 70%;" it is problem in resolution change or large size monitors. when we design UI we make sure about cross resolution also.

happy designing by css

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top