4

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();
}
NewCodeLearner
  • 738
  • 3
  • 14
  • 38
  • Depending on where you're putting that CSS rule it might not be applied due to obfuscation. You might need to use a `ClientBundle` as you're doing with the icon. – enrybo Apr 10 '13 at 19:12
  • I am using clientBundle .. Plz chk the updated areai question. – NewCodeLearner Apr 11 '13 at 08:34

6 Answers6

2

used this. and itis working fine. 

vertical-align: middle;
text-align: center;
background-position:30% 70%;
NewCodeLearner
  • 738
  • 3
  • 14
  • 38
0

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.

Community
  • 1
  • 1
enrybo
  • 1,787
  • 1
  • 12
  • 20
0

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

Kaha
  • 171
  • 4
  • 14
  • yes i want long buttons with the text and Image in the center. I am using GXT and i checked http://www.sencha.com/examples/#ExamplePlace:buttons but couldn't find anything. I u have any Idea how to do this , please share. – NewCodeLearner Apr 11 '13 at 08:33
  • Hey, Looks like I find the easiest way if you know some image redactors. You can create a wide "Icon (Image) with text on the right". F.e. Button btn = new com.extjs.gxt.ui.client.widget.button.Button(""); btn.setScale(Style.ButtonScale.MEDIUM); btn.setIconAlign(Style.IconAlign.TOP); btn.setIcon(IconHelper.create("images//image_with_text.png", 120,22)); – Kaha Apr 11 '13 at 09:51
  • this gives me the icon on the top of the Text not like Button(center(left(Icon),Text)) – NewCodeLearner Apr 11 '13 at 10:34
0

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;
  ...
}
willome
  • 3,062
  • 19
  • 32
0

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

Alain BUFERNE
  • 2,016
  • 3
  • 26
  • 37
0

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

Web Designer cum Promoter
  • 1,334
  • 14
  • 26