Question

I am creating a simple app with an image. I create the app like so:

function createApplication(){
  var app = UiApp.createApplication().setTitle("My Simple App");
  mainImage = app.createImage("URL TO IMAGE");
  app.add(mainImage);
  return(app);
}

This puts the image to the top left of the screen. Can someone show me how to center the image ?

Many thanks

Answer 1

You can use setStyleAttribute() and refer to some CSS documentation

try it like this for example (I’m really not an expert in CSS so don’t blame me if it is inelegant 😉

function testImage(){
  var app = UiApp.createApplication().setTitle("My Simple App").setHeight('700').setWidth('900');
  mainImage = app.createImage("https://dl.dropbox.com/u/211279/Time-change-clock_animated_TR80.gif")
  .setStyleAttribute('position','relative').setStyleAttribute('left','50%').setStyleAttribute('top','50%')
  app.add(mainImage);
  ss=SpreadsheetApp.getActive()
  ss.show(app)
}

Note : You can also position your image using PX(pixels) instead of % and, as you noticed, I tested this in a spreadsheet UI.

---

EDIT : and here is a version using pixels and Bryan’s suggestion for CSS styling, more compact and with a syntax that approaches the original CSS method (thx again) :

var _imgCSS = {'position':'relative', 'left':'200PX', 'top':'200PX'}

function testImage(){
      var app = UiApp.createApplication().setTitle("My Simple App").setHeight('500').setWidth('500');
      var mainImage = app.createImage("https://dl.dropbox.com/u/211279/Time-change-clock_animated_TR80.gif")
      .setStyleAttributes(_imgCSS)
      app.add(mainImage);
      ss=SpreadsheetApp.getActive()
      ss.show(app)
    }