CODEWITHSUNDEEP
javascripthtmlcssgoogle-apps-script
DylanRaub
DylanRaub

Reputation: 41

Grid (table) in Google web app adds 4px width to every column, but I need a width of 0px

I created a grid in a Google web app. I was hoping to get the grid to the size (0px, 0px), but I get (12px, 0px) since every column inside of the grid seems to have 4px added to their width for no reason.

Here's what was done to the grid (all at once):

  1. The grid's width was set to "0px"
  2. The grid's height was set to "0px"
  3. The width of the cells inside of the grid were individually set to "0px"
  4. The height of the cells inside of the grid were individually set to "0px"
  5. The grid's line-height was set to "0px"
  6. The line-height of the cells inside of the grid was individually set to "0px"
  7. The padding of the grid was set to "0px"
  8. The padding of the cells inside of the grid were individually set to "0px"
  9. The function ".setCellSpacing(0)" was called on the grid.
  10. The function ".setCellPadding(0)" was called on the grid.

*Note: no borders or margins were used on the grid nor the cells inside of it.

Here's some code you can try to see what I'm talking about.

function doGet() {
  var app = UiApp.createApplication();

  var grid = app.createGrid(3,3);

  //Used outlines since they don't affect the size of the object
  grid.setStyleAttribute("outline-style","solid");
  grid.setStyleAttribute("outline-width","1px");
  grid.setStyleAttribute("outline-color","red");

  grid.setCellPadding(0);
  grid.setCellSpacing(0);
  grid.setStyleAttribute("width","0px");
  grid.setStyleAttribute("height","0px");
  grid.setStyleAttribute("line-height","0px");
  grid.setStyleAttribute("padding","0px");
  for(var x = 0; x<3; x++){
    for(var y = 0; y<3; y++){
      grid.setStyleAttribute(y,x,"width","0px");
      grid.setStyleAttribute(y,x,"height","0px");
      grid.setStyleAttribute(y,x,"line-height","0px");
      grid.setStyleAttribute(y,x,"padding","0px");
    }
  }

  app.add(grid);

  app.add(app.createLabel("^ The grid is right here. It's width is non-zero for some reason"));

  return app;
}

Upvotes: 1

Views: 433

Answers (1)

Tom Horwood
Tom Horwood

Reputation: 408

There are two issues here:

  1. The cells are automatically populated with &nbsp;, so that needs to be cleared (removes 3 * 3px), and

  2. webkit has a bug which leaves an effective 1px width for a cell set to zero width meaning that your only option to drop below 3px is to set the cell to display:none

Try adding these lines to your loop:

grid.setStyleAttribute(y,x,"display","none");
grid.setText(y, x, "")

Upvotes: 2

Related Questions