0

I have been trying to make a chrome app that is completely filled by a textarea and I would like to make that textarea dynamically resize with the app window. I do not how ever want to use any external library for example jquery.

My html is:

<!DOCTYPE html>
<html>
  <head>
    <title>Plain Spellcheck</title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <script type="text/javascript" src="main.js"></script>
  </head>
  <body>
    <textarea id="textarea" spellcheck="true" class="textarea"></textarea>
  </body>
</html>

I have not found any useful css so I will not post the practically empty stylesheet.

My nonfunctional and admittedly mangled code is:

function windowHeight(){
  var mainWindow = chrome.app.window.get("mainWindow");
  var height = mainWindow.innerBounds.height;
  var textarea = document.getElementById("textarea");
  var newHeight = parseInt(height);
  var fixedHeight = newHeight * 0.04;
  var height = newHeight - fixedHeight;
  var height = height.toString();

  textarea.style.height = height + "px";
}

document.addEventListener("DOMContentLoaded", function(){
  var target = window.innerHeight;

  var observer = new MutationObserver(function(mutations){
    mutations.forEach(function(mutation){
      chrome.app.window.onBoundsChanged.addListener(windowHeight());
    });
  });

  var config = {attributes:false, childList:false, characterData:true};

  observer.observe(target,config);
});
dragonloverlord
  • 442
  • 5
  • 21

1 Answers1

1

CSS:

html, body, #textarea
{
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}
radiaph
  • 4,001
  • 1
  • 16
  • 19
  • 1
    Right. I've done resizing both with JavaScript and with pure CSS, and while the CSS is sometimes tricky to work out, it's a superior approach. – Marc Rochkind Feb 13 '15 at 15:50
  • This would work if the side and bottom of the textarea were not cut off. Also if I set the width/height to anything less than 100% for the textarea a gap will become apparent when the window is maximized. – dragonloverlord Feb 13 '15 at 15:50
  • How much is cut off? I'll edit the answer to account for borders and padding. – radiaph Feb 13 '15 at 15:53
  • the amount cut off varies by window size so I can't give an exact answer. it is not a lot though but it is still noticeable. – dragonloverlord Feb 13 '15 at 15:55
  • Thanks @phari this seems to be the closest thing to perfect and as we all know computers are not perfect. I do suspect that the Chromium project may be able to fix this issue but that is a problem for another website and day :) – dragonloverlord Mar 03 '15 at 18:19