Give dimensions to Textarea in a modal box Google script

Question

I am trying to give dimensions to a Textarea in a modal box.

From here Add content of showModalDialog() to the clipboard Google Script

The HTML is

<textarea id="copy"><?=temp?></textarea>
<button>Copy</button>
<script type="text/javascript">
   let t = document.getElementById('copy');
   let copy = () => {
     t.select();
     document.execCommand('copy');
   };
  /*copy();//try copying without user click */
  let bt = document.querySelector('button');
  bt.addEventListener('click', copy);

 </script>

I can give dimensions to the modal

//Output to Html
var template = HtmlService.createTemplateFromFile('copy');
template.temp = temp;
var htmlOutput = template.evaluate();
               htmlOutput.setWidth(610)
               htmlOutput.setHeight(500); 
SpreadsheetApp.getUi().showModalDialog(htmlOutput, 'OptionList Multiple Selectors');
}

I am trying to get the dimensions of the Modal and the Textarea to be the same as it is now the textarea is about 20 x 50.

score 3 · Answer 1 · answered Aug 31 '19 at 17:37

3

Try this:

<textarea id="copy" cols="20" rows="50"><?=temp?></textarea>

answered Aug 31 '19 at 17:37

Cooper

59,616
6
23
54

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

You can also try setting this with JavaScript:

<textarea id="copy"><?=temp?></textarea>
<button style="width:100%">Copy</button>
<script type="text/javascript">
   let t = document.getElementById('copy');
   t.style.height = t.scrollHeight + "px";//or 100%
   t.style.width = "100%"
   let copy = () => {
     t.select();
     document.execCommand('copy');
   };
  /*copy();//try copying without user click */
  let bt = document.querySelector('button');
  bt.addEventListener('click', copy);
 </script>

<textarea id="copy">
filter {
  target: element;
  as: dropdown;
  padding: 5;
  summary: "Network Practice";
  default: show-all;
  multiple: true;

  option {
   label: "< 1 year";
   selector: element["NETWORK PRACTICE"="< 1 year"];
  }
  option {
   label: "1-3 years";
   selector: element["NETWORK PRACTICE"="1-3 years"];
  }
  option {
   label: "3-10 years";
   selector: element["NETWORK PRACTICE"="3-10 years"];
  }
  option {
   label: "> 10 years";
   selector: element["NETWORK PRACTICE"=">10 years"];
  }
 }
</textarea>
<button style="width:100%">Copy</button>
<script type="text/javascript">
   let t = document.getElementById('copy');
   t.style.height = t.scrollHeight +"px";//or 100%
   t.style.width = "100%"
   let copy = () => {
 t.select();
 document.execCommand('copy');
   };
  /*copy();//try copying without user click */
  let bt = document.querySelector('button');
  bt.addEventListener('click', copy);
 </script>

Give dimensions to Textarea in a modal box Google script

2 Answers2

References: