javascriptgoogle-closure-library

How can a border be set programatically in Google Closure

I'm just getting started with Google Closure, and am trying to customize the spacing between controls in a goog.ui.Dialog. As an example, the default buttons in the goog.ui.Dialog.ButtonSet are a bit close together:

enter image description here

From the FireFox Debugger, I can navigate to the component and manually change the border, like this:

enter image description here

This gives the desired result. The dialog now looks like this:

enter image description here

I've tried changing the margin programmatically with:

  var okButton = dialog.getButtonSet().getButton( goog.ui.Dialog.DefaultButtonKeys.OK );
  okButton.style.marginRightWidth = 8;
  okButton.style.marginRight = 8;

but these values won't change, and also can't be changed from the debugger.

How do I go about changing this value on the fly? Or is that even possible--do I really need to change the underlying style sheet to accomplish this?

Solution

  • One way to edit the spacing is to drop back to straight JavaScript, ignoring the Closure classes. The debugger shows this when the margin is changed manually in the debugger in the debugger:

    <button style="margin-right: 8px;" disabled="" class="goog-buttonset-default" name="ok">OK</button>

    Following that example, this code programmatically changes the spacing:

    var okButton = dialog.getButtonSet().getButton( goog.ui.Dialog.DefaultButtonKeys.OK );
okButton.style = 'margin-right: 8px;';