Hybrid View

  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