如何中心元素谷歌应用程序脚本UiApp

我正在创建一个简单的应用程序与图像。我创建了这样的应用程序：如何中心元素谷歌应用程序脚本UiApp

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

这将图像放在屏幕的左上角。有人能告诉我如何将图像居中？

非常感谢

来源

2012-11-23 Sherlock

您可以使用setStyleAttribute()和参考一些CSS documentation

尝试像这样，例如（我真的不是在CSS的专家，所以不要怪我，如果这是不好的; - ）

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) 
}

注：您还可以使用位置PX（像素图像），而不是％，正如你注意到了，我在电子表格UI测试这一点。

编辑：这里是用像素和Bryan的建议CSS样式版本，更紧凑，它的语法有（再次THX）接近原来的CSS方法：

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) 
    }

来源

2012-11-23 22:43:23

你也可以使用'.setStyleAttributes（ _imgCSS）''一次，并把'_imgCSS = {'position'：'relative'，'left'：'50％'，'top'：'50％'};'在函数之外。 @Serge - 您知道我们为什么不能使用Google Drive链接指向'createImage（）'中的图像文档？ –

感谢您的提示;-) - 这是一个已知的问题，使GDrive中的图像无法查看[问题1239]（http://code.google.com/p/google-apps-script-issues/issues/detail ？id = 1239）编辑：这个问题不完全相关，但我不记得我在哪里rerad信息...对不起 –

快速之一 - 这在Chrome中正常工作，但是当切换到IE没有中心......有没有办法解决这个问题？谢谢 – Sherlock

您可以使用Google Drive链接指向图片。确保图像在网络上公开，并获取文档ID。如果要共享的链接是这样的： https://docs.google.com/file/d/[docID]/edit?usp=sharing

直接链接到图像 https：//开头Google云端硬盘。 COM /主机/ [docID的]/

另外，如果该文件夹是公开的，具有ID folderID，您可以使用 https://googledrive.com/host/[folderID]/myimage.gif

来源

2013-04-18 14:57:13

我我刚刚找到了另一个很好的方法来做到这一点。

面板默认缩小以完全适合其内容。这很好，因为所有的小工具都非常接近。所以我们在这里做的，我们添加一个fullPanel - 填充整个浏览器区域。然后添加我们应用程序的mainPanel，并在里面放置我们需要的任何小部件。

+--fullPanel-----------------+ 
|       | 
|       | 
|  +-mainPanel--+  | 
|  |   |  | 
|  |   |  | 
|  +------------+  | 
|       | 
|       | 
+----------------------------+

结果？

内mainPanel中所有部件完全对齐彼此
mainPanel中始终处于中心

有代码：

function createApplication(){ 
    var app = UiApp.createApplication().setTitle("My Simple App"); 

    /* Main application Panel */ 
    var mainPanel = myApp.createVerticalPanel(); 

    /* Add any widgets to this Panel */ 
    mainImage = app.createImage("URL TO IMAGE"); 
    mainPanel.add(mainImage); 

    /* Create a panel that will fill all area of browser */ 
    var fullPanel = myApp.createVerticalPanel(); 
    fullPanel.setHeight('100%'); 
    fullPanel.setWidth('100%'); 
    fullPanel.setHorizontalAlignment(UiApp.HorizontalAlignment.CENTER); 
    fullPanel.setVerticalAlignment(UiApp.VerticalAlignment.MIDDLE); 
    fullPanel.add(mainPanel); 

    app.add(fullPanel); 
    return(app); 
}

来源

2013-05-15 11:31:58 Golmar

如何中心元素谷歌应用程序脚本UiApp

回答

相关问题