CSS / Button problem

**stockhausen** · 18 Mar 2010 8:01 AM

Hallo,

CSS doesn't work. Whats wrong here?

Thanks,
Michael

TestProject.java

Code:

Button myButton = new Button("button");

// myButton.setWidth("250"); // <-- working!

myButton.setStylePrimaryName("myButton"); // not working!

myButton.addListener(Events.Select, new Listener<ButtonEvent>() {
    public void handleEvent(ButtonEvent be) {
        Window.alert("Registration");
    }
});

TestProject.css

Code:

.myButton { width: 250px; }

TestProject.html

HTML Code:

<link type="text/css" rel="stylesheet" href="css/gxt-all.css">
<link type="text/css" rel="stylesheet" href="TestProject.css">

**jmhwhite2001** · 18 Mar 2010 9:33 AM

First, what is the style for? Icon declaration??

I use:

Code:

Button saveButton = new Button();
saveButton.setIconStyle("save-icon");

The save-icon is defined in my apps CSS file like:

Code:

.save-icon {
    background: url(icons/disk.png) no-repeat center left !important;
}

**stockhausen** · 18 Mar 2010 2:39 PM

I would like to change the width of a button.

By using "myButton.setStylePrimaryName("myButton");" nothing happens.

This is the result when I'm using "myButton.setStyleName("myButton");"

How can I hide the rectangle in the middle of the button?

**stockhausen** · 16 May 2010 3:34 AM

*help*

**stockhausen** · 6 Jun 2010 11:02 PM

*help*

**questzen** · 13 Jun 2010 4:53 AM

I dont' know the solution for you case, but I can suggest an alternative. I normally create icons using AbstractImagePrototype.

Code:

import com.google.gwt.user.client.ui.AbstractImagePrototype;
import com.google.gwt.user.client.ui.ImageBundle;

public interface ExampleImages extends ImageBundle {@Resource("search.jpg")
AbstractImagePrototype search();
}

And in the application:

Code:

        Button searchButton = new Button(submitLabel, new SubmitButtonListener(formPanel));
        searchButton.setIcon(ExampleImages.search());
        searchButton.setIconAlign(Style.IconAlign.BOTTOM);
        formPanel.getButtonBar().add(searchButton);

However this is not fool-proof, there are some issues when using this with Accordion layout. See http://www.extjs.com/forum/showthrea...476#post476476

**sempervivo** · 15 Jul 2010 5:04 AM

I am in the same situation as you. I simply don't know how to set a background image on one button using css. Can anyboidy help us ?

**oxyrox** · 15 Jul 2010 5:25 AM

Do you want to set the background (change the whole button style) or just add an icon?

**sempervivo** · 15 Jul 2010 6:06 AM

I want to change the background and also the image that appears when mouse over.

**oxyrox** · 15 Jul 2010 6:35 AM

I managed to do this by creating a new custom Button widget (extending it) let's say MainMenuButton. And change it's baseStyle to "mainmenu-btn" (or whatever you like).

Code:

public class MainMenuButton extends Button {
	public MainMenuButton() {
		baseStyle = "mainmenu-btn";
		this.addStyleName(baseStyle);
	}
}

As a next step you'll have to overwrite all the button css background stuff.

Code:

.mainmenu-btn .x-btn-ml,
.mainmenu-btn .x-btn-mc,
.mainmenu-btn .x-btn-mr,
.mainmenu-btn .x-btn-tl,
.mainmenu-btn .x-btn-tc,
.mainmenu-btn .x-btn-tr,
.mainmenu-btn .x-btn-bl,
.mainmenu-btn .x-btn-bc,
.mainmenu-btn .x-btn-br {
	background-image: none !important;
}

Now set the new css styles you like for your button. For example:

Code:

.mainmenu-btn {
	width: 170px;
	height: 40px;
	background-image:url(some/path/bg_menu_btn.png);
}

For the hover effect:

Code:

.mainmenu-btn-over {
	background-image:url(some/path/bg_menu_btn_hover.png);
}

Hope this helps!

Greets,
oxy

CSS / Button problem

Thread Tools

Search Thread

Display

CSS / Button problem

CSS / Button problem

How about...

How about...