Question

I have panels in my web app, and I am setting style attributes like so:

panel.setStyleAttribute('margin-left', 'auto').setStyleAttribute('margin-right','auto');

This wors perfectly in chrome, centering the element as expected. However in IE, the elements are stuck to the left of the screen.

Is there any way around this issue ?

Answer 1

Unlike other browsers, margin:auto only works in Internet Explorer if you force standards mode rather than quirks mode.

UiApp defaults to quirks mode CSS rules, unless (a) you load a GuiBuilder component in the initial app creation, which forces standards mode, or (b) you explicitly ask for standards mode.

This will set you in standards mode and therefore work in IE too:

function doGet() {
  var app = UiApp.createApplication().setStandardsMode(true);
  return app.add(app.createLabel('centered').setStyleAttributes(
      {marginLeft: 'auto',
       marginRight: 'auto',
       width: '100px'}));
}

Note the setStandardsMode(true) – without this it won’t work in IE. Be careful though because standards mode styles are interpreted differently sometimes than quirks mode, so this might change other aspects of your layout.

Some notes:

• setStandardsMode is only respected on initial app creation (i.e., in doGet) and is ignored if you try to set it in a handler later.
• the GuiBuilder’s layout rules assume standards mode, which is why that implicitly forces standards mode. If you load a GuiBuilder component in a callback in an app that was not set to standards mode during doGet (either explicitly or because you loaded another component) there might be subtle changes to the layout and styles due to it being in quirks mode.