Geek Answers Handbook

How to put icons in the center of a button in GXT

Hi i am working on gxt

I have an icon button.

I want to put the icon in the center.

Currently it looks like this.

enter image description here

the button icon is on the left (due to IconAlign.LEFT).

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

If anyone has an idea what to add to the 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; }

early

updated

 public interface Resources extends ClientBundle { public Resources INSTANCE = GWT.create(Resources.class); @Source("Images/modify.png") ImageResource modify(); }
+4
source share
6 answers

used this. and it works fine.

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

The answer to this question is a little hack, but it should work.

Basically, you can set the HTML inside the button as follows:

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

Inside the HTML line, you can put a <div> with the image.

There is most likely a better way.

0
source

Do you need exactly this long button, with the image in the center and the text to the right of the image? I mean, can you use it with the image above and the text below them? Like here EXT GWT Showcase Button

0
source

You can change the style as follows:

 .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; ... }
0
source

It seems that with ExtJs there is iconAlign:'center' , so I wonder if it is possible to use JsObject with the correct JSON description in your java code ......

0
source

use .center {margin:0, auto; } .center {margin:0, auto; }

if you use "background-position: 30% 70%;" this is a problem in changing resolution or large monitors. when we develop the user interface, we also conclude about cross-resolution.

happy css design

0
source

More articles:


All Articles