How can CSS be applied to components from Google Closure Library?
        Posted  
        
            by Jason
        on Stack Overflow
        
        See other posts from Stack Overflow
        
            or by Jason
        
        
        
        Published on 2009-12-26T13:32:53Z
        Indexed on 
            2010/03/19
            0:31 UTC
        
        
        Read the original article
        Hit count: 480
        
google-closure-library
|JavaScript
I'm getting my feet wet with Google's Closure Library. I've created a simple page with a Select Widget, but it clearly needs some styling (element looks like plain text, and in the example below the menu items pop up beneath the button).
I'm assuming the library supports styles -- how can I hook into them? Each example page in SVN seems to use its own CSS.
Abbreviated example follows:
<body>
<div id="inputContainer"></div>
<script src="closure-library-read-only/closure/goog/base.js"></script>
<script>
    goog.require('goog.dom');
    goog.require('goog.ui.Button');
    goog.require('goog.ui.MenuItem');
    goog.require('goog.ui.Select');
</script>
<script>
    var inputDiv = goog.dom.$("inputContainer");
    var testSelect = new goog.ui.Select("Test selector");
    testSelect.addItem(new goog.ui.MenuItem("1"));
    testSelect.addItem(new goog.ui.MenuItem("2"));
    testSelect.addItem(new goog.ui.MenuItem("3"));
    var submitButton = new goog.ui.Button("Go");
testSelect.render(inputDiv);
submitButton.render(inputDiv);
</script>
</body>
        © Stack Overflow or respective owner