Fill GAS ModalDialog box with HTML - no white ? Alternative?

user_10002945 0
Viewed 179

enter image description here

Is there an alternative to showModalDialog for Google Spreadsheet? I am willing to learn new software. What software would be reasonable for lightly skilled teacher to learn?

I have a Connect 4 game for my students built in a Google spreadsheet. Random questions are pulled from various tabs with menu items and I want a pretty display of the question. There are dimensions possible in the showModalDialog and HTML. I complicated it by having dimensions in a BODY and a DIV or only in the DIV. The dialog box always has some white showing and the HTML often popups up scroll bars (very ugly). Probably need something more robust than Google App Script to create a clean display of the question. What would anyone suggest?

This is the html:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style> 
       #parent {
         background-color: #99ec46; 
     /*  border: 5px solid #58a30d;  /*only shows on top & left sides?????  */ 
     /*  border-radius: 10px; */
         display:table;
         font-family:Georgia, Cambria, Times New Roman, Times, serif;
         font-size: 100%;
         height: 100%;
     /*       left: 50%; */
         margin: auto; 
         padding: 0;
         position: fixed;
         text-align:center;
     /*        top: 50%; */
         width: 100%;
       }
       #child {
     /*    align-items:center;  */
         display: table-cell;
     /*    justify-content:center; */
         padding: 55px 55px;
     /*    transform: translate(-50%, -50%); */
     /*    z-index: 99999; */
         vertical-align: middle;
       }
       input[type=button], input[type=submit], input[type=reset] {
         background-color: #438204;
         border: none;
         color: white;
         padding: 10px 26px;
         text-decoration: none;
         margin: 4px 2px;
         cursor: pointer;
       }
    </style>

  </head>
  <body> 
    <div id="parent">
      <div id="child">
        <?!= nextQuestion ?>
        <p></p>     
        <input type="button" value="Okay!" onclick="google.script.host.close()" />
      </div>
    </div>   
  </body>
</html>

This is the code that displays the question. Some questions are long and have html markup to appear on multiple lines (

).

/**
 * Displays an HTML-service dialog in Google Sheets that contains
 */
function popupNextQ(inQuestion) {

//  var html = HtmlService.createHtmlOutputFromFile('Index');

  var htmlTemplate = HtmlService.createTemplateFromFile('Next-Question-Popup');
  htmlTemplate.nextQuestion = inQuestion;
  var html = htmlTemplate.evaluate();
//            .setHeight(400)
//            .setWidth(600);
  SpreadsheetApp.getUi().showModalDialog(html, " ");  
}

This is the best I have come up with so far. If I add a border to the html it only appears on the top and left sides. At least with the current dimensions there are no scroll bars for my longest question.

Questions are not vertically aligned so short ones appear toward the top of the green area.

google-sheets modal-dialog css html
1 Answers

Alan Wells in googlegroups.com wrote, you can't get rid of the white space around the edges of a dialog box. If you want to stay with Google products and want an alternative, you'd need to use an Apps Script Web App for your app.

He suggested creating the question box with a Web App rather than the triggered from the menu on the sheet.

My discovery of the nested CSS has fixed the problem of all the text appearing at the top.

I have FINALLY found a way to add a border on all sides of the html. Putting the border in the parent causes it to display on the top and left. Putting it in the child makes it display on the top, bottom, and left. The bottom border is in the middle of the green square - not at the bottom.

The trick was to decrease the size of the parent div from 100% to 97%. I tried 99% and 98% also. The width of your border may affect how much you have to decrease.

<style> 
       #parent {
         background-color: #99ec46;
         display:table;
         font-family:Georgia, Cambria, Times New Roman, Times, serif;
         font-size: 100%;
         height: 97%;
         margin: auto; 
         padding: 0;
         position: fixed;
         text-align:center;
         width: 97%;
       }
       #child {
         border: 5px solid #58a30d; 
         border-radius: 10px; 
         display: table-cell;
         padding: 55px 55px;
         vertical-align: middle;
       }

Thanks also to Clark Lind in googlegroups for suggesting using slides instead of spreadsheet. Slides is also limited to displaying html with showModalDialog.

user_100029450
Related