My favorites | Sign in
Project Home Wiki Issues
New issue   Search
  Advanced search   Search tips   Subscriptions
Issue 2159: Elements are not centred in IE using UiApp
1 person starred this issue and may be notified of changes. Back to list
Status:  WorkingAsIntended
Owner:  ----
Closed:  Dec 2012

Sign in to add a comment
Reported by, Dec 5, 2012
What steps will reproduce the problem?
1. Add a panel to a UiApp and center is by setting the style attributes "marginLeft" and "marginRight" to "auto".
2. View the app in chrome, the panel is centred as expected
3. View the app in IE, the panel is not centred

What is the expected output? What do you see instead?
I would expect the panel to be centred in both browsers
Dec 6, 2012
Project Member #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.

Status: WorkingAsIntended
Dec 6, 2012
many thanks for your assistance
Sign in to add a comment

Powered by Google Project Hosting