1. #1
    Ext User
    Join Date
    Feb 2010
    Posts
    19
    Vote Rating
    0
    stockhausen is on a distinguished road

      0  

    Default CSS / Button problem

    CSS / Button problem


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

  2. #2
    Ext User
    Join Date
    Nov 2008
    Posts
    75
    Vote Rating
    0
    jmhwhite2001 is on a distinguished road

      0  

    Default How about...

    How about...


    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;
    }

  3. #3
    Ext User
    Join Date
    Feb 2010
    Posts
    19
    Vote Rating
    0
    stockhausen is on a distinguished road

      0  

    Default


    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?

  4. #4
    Ext User
    Join Date
    Feb 2010
    Posts
    19
    Vote Rating
    0
    stockhausen is on a distinguished road

      0  

    Default


    *help*

  5. #5
    Ext User
    Join Date
    Feb 2010
    Posts
    19
    Vote Rating
    0
    stockhausen is on a distinguished road

      0  

    Default


    *help*

  6. #6
    Sencha Premium Member
    Join Date
    Mar 2010
    Posts
    9
    Vote Rating
    0
    questzen is on a distinguished road

      0  

    Post


    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
    Last edited by questzen; 13 Jun 2010 at 5:24 AM. Reason: Adding known cases of failure

  7. #7
    Sencha User
    Join Date
    Jul 2010
    Location
    Craiova, Romania
    Posts
    47
    Vote Rating
    0
    sempervivo is on a distinguished road

      0  

    Default


    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 ?

  8. #8
    Sencha User
    Join Date
    Sep 2009
    Location
    Switzerland
    Posts
    29
    Vote Rating
    0
    oxyrox is on a distinguished road

      0  

    Default


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

  9. #9
    Sencha User
    Join Date
    Jul 2010
    Location
    Craiova, Romania
    Posts
    47
    Vote Rating
    0
    sempervivo is on a distinguished road

      0  

    Default


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

  10. #10
    Sencha User
    Join Date
    Sep 2009
    Location
    Switzerland
    Posts
    29
    Vote Rating
    0
    oxyrox is on a distinguished road

      0  

    Default


    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