CODEWITHSUNDEEP
heighttextarearowsappjs
rockhammer
rockhammer

Reputation: 967

how to auto-adjust App.js textarea height to fill the remainder of screen?

Might anyone have any idea how to auto-adjust the height of textarea to fill the rest of the space vertically? The easy way is to hard code the style of textarea with height: 300px or something but that is hardly a workable solution in production.

Here is the of my html. Thanks

  <body>
    <div class="app-page" data-page="home">
      <div class="app-topbar">
        <div class="app-title">Mobile Email Client</div>
      </div>
      <div class="app-content">
        <div class="app-section">
          <div class="app-button" data-target="emailEditor">Compose Email</div>
        </div>
      </div>
    </div>

    <div class="app-page" data-page="emailEditor">
      <div class="app-topbar">
        <div class="app-title"><span class="app-icon"></span>Email Editor</div>
        <div class="left app-button" data-back>QUIT</div>
      </div>

      <div class="app-content">
        <div class="app-section" id="editorStatus"></div>

        <div class="app-section">
          <input class="app-input" id="emailFrom" placeholder="From">
        </div>

        <div class="app-section">
          <input class="app-input" id="emailTo" placeholder="To">
        </div>

        <div class="app-section">
          <input class="app-input" id="emailSubject" placeholder="Subject">
          <textarea class="app-input" id="emailMessage" placeholder="Message" rows="10"></textarea>
          <div class="app-button green app-submit" id="emailSend">Send</div>
        </div>
      </div>
    </div>

Upvotes: 0

Views: 29

Answers (1)

rockhammer
rockhammer

Reputation: 967

In App.js apparently setting rows="10" attribute for <textarea> is not enough. The <textarea> must also be given a CSS height: auto;

This still does NOT enable you to fill the remainder of the screen dynamically for any sized screens.

Upvotes: 0

Related Questions