title: Disable auto expand of textarea and page on mobile
body: <p>Am creating message chat template using HTML and CSS Bootstrap, everything looks good but when I open the chat in mobile and click on text area to type message the interface expand in that case user have to scroll to see the send button again and the chat box also will not fit the screen as I wanted it to. I set the width to 100% max-width 100%. How do I make the text area not to expand the page and also disable the user from expanding the page in mobile using CSS or jQuery?</p>
  
  <p><strong>Code Snippet:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    max = $(document).height() - $('#qnimater').offset().top;
    $('#qnimate').css('max-height',max);
  });
  
  $(document).ready(function() {
    var height = $(document).height();
    height = height - (100);
    $("#qnimater").css({ 'max-height' : height.toString() });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code> @import url(https://fonts.googleapis.com/css?family=Oswald:400,300);
   @import url(https://fonts.googleapis.com/css?family=Open+Sans);
   body {
    font-family: 'Open Sans', sans-serif;
    overflow:hidden;
   }
   .popup-box {
    background-color: #ffffff;
    border: 1px solid #b0b0b0;
    bottom: 0;
    height: 100%;
    position: fixed;
    right: 0px;
    left: 0;
    max-width: 100%;
    font-family: 'Open Sans', sans-serif;
   }
   .round.hollow {
    margin: 40px 0 0;
   }
   .round.hollow a {
    border: 2px solid #ff6701;
    border-radius: 35px;
    color: red;
    color: #ff6701;
    font-size: 23px;
    padding: 10px 21px;
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
   }
   .round.hollow a:hover {
    border: 2px solid #000;
    border-radius: 35px;
    color: red;
    color: #000;
    font-size: 23px;
    padding: 10px 21px;
    text-decoration: none;
   }
   .popup-box-on {
    display: block !important;
   }
   .popup-box .popup-head {
    background-color: #fff;
    clear: both;
    color: #7b7b7b;
    display: inline-table;
    font-size: 21px;
    padding: 7px 10px;
    width: 100%;
    font-family: Oswald;
   }
   .bg_none i {
    border: 1px solid #ff6701;
    border-radius: 25px;
    color: #ff6701;
    font-size: 17px;
    height: 33px;
    line-height: 30px;
    width: 33px;
   }
   .bg_none:hover i {
    border: 1px solid #000;
    border-radius: 25px;
    color: #000;
    font-size: 17px;
    height: 33px;
    line-height: 30px;
    width: 33px;
   }
   .bg_none {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
   }
   .popup-box .popup-head .popup-head-right {
    margin: 11px 7px 0;
   }
   .popup-box .popup-messages {} 
   .popup-head-left img {
    border: 1px solid #7b7b7b;
    border-radius: 50%;
    width: 44px;
   }
   .popup-messages-footer &gt; textarea {
    border-bottom: 1px solid #b2b2b2 !important;
    height: 34px !important;
    margin: 7px;
    padding: 5px !important;
    border: medium none;
    width: 85% !important;
   }
   .popup-messages-footer {
    background: #fff none repeat scroll 0 0;
    bottom: 0;
    position: absolute;
    width: 100%;
   }
   .popup-messages-footer .btn-footer {
    overflow: hidden;
    padding: 2px 5px 10px 6px;
    width: 100%;
   }
   .simple_round {
    background: #d1d1d1 none repeat scroll 0 0;
    border-radius: 50%;
    color: #4b4b4b !important;
    height: 21px;
    padding: 0 0 0 1px;
    width: 21px;
   }
   .popup-box .popup-messages {
    background: #3f9684 none repeat scroll 0 0;
    height: 80%;
    overflow: auto;
   }
   .direct-chat-messages {
    overflow: auto;
    padding: 10px;
    transform: translate(0px, 0px);
   }
   .popup-messages .chat-box-single-line {
    border-bottom: 1px solid #a4c6b5;
    height: 12px;
    margin: 7px 0 20px;
    position: relative;
    text-align: center;
   }
   .popup-messages abbr.timestamp {
    background: #3f9684 none repeat scroll 0 0;
    color: #fff;
    padding: 0 11px;
   }
   .popup-head-right .btn-group {
    display: inline-flex;
    margin: 0 8px 0 0;
    vertical-align: top !important;
   }
   .chat-header-button {
    background: transparent none repeat scroll 0 0;
    border: 1px solid #636364;
    border-radius: 50%;
    font-size: 14px;
    height: 30px;
    width: 30px;
    text-align: center;
   }
   .popup-head-right .btn-group .dropdown-menu {
    border: medium none;
    min-width: 122px;
    padding: 0;
   }
   .popup-head-right .btn-group .dropdown-menu li a {
    font-size: 12px;
    padding: 3px 10px;
    color: #303030;
   }
   .popup-messages abbr.timestamp {
    background: #3f9684 none repeat scroll 0 0;
    color: #fff;
    padding: 0 11px;
   }
   .popup-messages .chat-box-single-line {
    border-bottom: 1px solid #a4c6b5;
    height: 12px;
    margin: 7px 0 20px;
    position: relative;
    text-align: center;
   }
   .popup-messages .direct-chat-messages {
    height: auto;
   }
   .popup-messages .direct-chat-text {
    background: #dfece7 none repeat scroll 0 0;
    border: 1px solid #dfece7;
    border-radius: 2px;
    color: #1f2121;
   }
   .popup-messages .direct-chat-timestamp {
    color: #fff;
    opacity: 0.6;
   }
   .popup-messages .direct-chat-name {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 0 49px !important;
    color: #fff;
    opacity: 0.9;
   }
   .popup-messages .direct-chat-info {
    display: block;
    font-size: 12px;
    margin-bottom: 0;
   }
   .popup-messages .big-round {
    margin: -9px 0 0 !important;
   }
   .popup-head-left{
       margin-top: 5px;
  vertical-align: middle;
   }
   .popup-messages .direct-chat-img {
    border: 1px solid #fff;
    background: #3f9684 none repeat scroll 0 0;
    border-radius: 50%;
    float: left;
    height: 40px;
    /*margin: -21px 0 0;*/
    width: 40px;
   }
   .direct-chat-reply-name {
    color: #fff;
    font-size: 15px;
    margin: 0 0 0 10px;
    opacity: 0.9;
   }
   
   .direct-chat-img-reply-small {
    border: 1px solid #fff;
    border-radius: 50%;
    float: left;
    height: 20px;
    margin: 0 8px;
    width: 20px;
    background: #3f9684;
   }
   .popup-messages .direct-chat-msg {
    margin-bottom: 10px;
    position: relative;
   }
  
  
   .direct-chat-text::after,
   .direct-chat-text::before {
    border-color: transparent #dfece7 transparent transparent;
   }
   .direct-chat-text::after,
   .direct-chat-text::before {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: transparent #d2d6de transparent transparent;
    border-image: none;
    border-style: solid;
    border-width: medium;
    content: " ";
    height: 0;
    pointer-events: none;
    position: absolute;
    right: 100%;
    top: 15px;
    width: 0;
   }
   .direct-chat-text::after {
    border-width: 5px;
    margin-top: -5px;
   }
   .popup-messages .direct-chat-text {
    background: #dfece7 none repeat scroll 0 0;
    border: 1px solid #dfece7;
    border-radius: 2px;
    color: #1f2121;
   }
   .direct-chat-text {
    background: #d2d6de none repeat scroll 0 0;
    border: 1px solid #d2d6de;
    border-radius: 5px;
    color: #444;
    margin: 5px 0 0 50px;
    padding: 5px 10px;
    position: relative;
   }
   .popup-messages-footer .uk-input-group-addon{
          height: 34px !important;
          padding: 0px;
          border: medium none;
          display: inline-block;
          position: absolute;
          top: 5px;
   }
  .uk-input-group-addon .glyphicon.glyphicon-send {
      color: #3F9684;
      font-size: 30px;
      line-height: 36px;
      padding: 0 6px;
      font-weight: bold;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="popup-box chat-popup" id="qnimate"&gt;
    &lt;div class="popup-head"&gt;
     &lt;div class="popup-head-left pull-left"&gt;&lt;a href="#"&gt;Univercial Hotel Hall&lt;/a&gt;&lt;/div&gt;
     &lt;div class="popup-head-right pull-right text-center"&gt;
         &lt;div class="btn-group"&gt;
         &lt;button class="chat-header-button"&gt;&lt;i class="glyphicon glyphicon-info-sign"&gt;&lt;/i&gt; &lt;/button&gt;
         &lt;/div&gt;
      &lt;div class="btn-group"&gt;
       &lt;button class="chat-header-button" data-toggle="dropdown" type="button" aria-expanded="false"&gt; &lt;i class="glyphicon glyphicon-cog"&gt;&lt;/i&gt;&lt;/button&gt;
       &lt;ul role="menu" class="dropdown-menu pull-right"&gt;
        &lt;li&gt;&lt;a href="#"&gt;Media&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Block&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Clear Chat&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Email Chat&lt;/a&gt;
        &lt;/li&gt;
       &lt;/ul&gt;
      &lt;/div&gt;
                  
      &lt;button data-widget="remove" id="removeClass" class="chat-header-button pull-right" type="button"&gt;&lt;i class="glyphicon glyphicon-off"&gt;&lt;/i&gt;&lt;/button&gt;
     &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="popup-messages"&gt;
  
  
  
  
     &lt;div class="direct-chat-messages"&gt;
                   
                   
                       &lt;div class="chat-box-single-line"&gt; &lt;abbr class="timestamp"&gt;October 8th, 2015&lt;/abbr&gt;&lt;/div&gt;
      &lt;!-- Message. Default to the left --&gt;
      &lt;div class="direct-chat-msg doted-border me"&gt;
       &lt;!-- /.direct-chat-info --&gt;
       &lt;img alt="message user image" src="https://d2xngy2dw7hums.cloudfront.net/media/photos/profiles/2017/09/26/ujahchigozie_1506417938.jpg" class="direct-chat-img"&gt;
       &lt;!-- /.direct-chat-img --&gt;
       &lt;div class="direct-chat-text"&gt;Hey bro, how’s everything going ? &lt;/div&gt;
       &lt;div class="direct-chat-info clearfix"&gt;&lt;span class="direct-chat-timestamp pull-right"&gt;3.36 PM&lt;/span&gt;&lt;/div&gt;
       &lt;!-- /.direct-chat-text --&gt;
      &lt;/div&gt;
      &lt;!-- /.direct-chat-msg --&gt;
      
          &lt;div class="chat-box-single-line"&gt; &lt;abbr class="timestamp"&gt;October 8th, 2015&lt;/abbr&gt;&lt;/div&gt;
      &lt;!-- Message. Default to the left --&gt;
      &lt;div class="direct-chat-msg doted-border me"&gt;
       &lt;!-- /.direct-chat-info --&gt;
       &lt;img alt="message user image" src="https://d2xngy2dw7hums.cloudfront.net/media/photos/profiles/2017/09/26/ujahchigozie_1506417938.jpg" class="direct-chat-img"&gt;
       &lt;!-- /.direct-chat-img --&gt;
       &lt;div class="direct-chat-text"&gt;Hey bro, how’s everything going ? &lt;/div&gt;
       &lt;div class="direct-chat-info clearfix"&gt;&lt;span class="direct-chat-timestamp pull-right"&gt;3.36 PM&lt;/span&gt;&lt;/div&gt;
       &lt;!-- /.direct-chat-text --&gt;
      &lt;/div&gt;
      &lt;!-- /.direct-chat-msg --&gt;
      
      
          &lt;div class="chat-box-single-line"&gt; &lt;abbr class="timestamp"&gt;October 8th, 2015&lt;/abbr&gt;&lt;/div&gt;
      &lt;!-- Message. Default to the left --&gt;
      &lt;div class="direct-chat-msg doted-border me"&gt;
       &lt;!-- /.direct-chat-info --&gt;
       &lt;img alt="message user image" src="https://d2xngy2dw7hums.cloudfront.net/media/photos/profiles/2017/09/26/ujahchigozie_1506417938.jpg" class="direct-chat-img"&gt;
       &lt;!-- /.direct-chat-img --&gt;
       &lt;div class="direct-chat-text"&gt;Hey bro, how’s everything going ? &lt;/div&gt;
       &lt;div class="direct-chat-info clearfix"&gt;&lt;span class="direct-chat-timestamp pull-right"&gt;3.36 PM&lt;/span&gt;&lt;/div&gt;
       &lt;!-- /.direct-chat-text --&gt;
      &lt;/div&gt;
      &lt;!-- /.direct-chat-msg --&gt;
      
    
      &lt;!-- Message. Default to the left --&gt;
      &lt;div class="direct-chat-msg doted-border me"&gt;
       &lt;!-- /.direct-chat-info --&gt;
       &lt;img alt="message user image" src="https://d2xngy2dw7hums.cloudfront.net/media/photos/profiles/2017/09/26/ujahchigozie_1506417938.jpg" class="direct-chat-img"&gt;
       &lt;!-- /.direct-chat-img --&gt;
       &lt;div class="direct-chat-text"&gt;Hey bro, how’s everything going Hey bro, how’s everything going Hey bro, how’s everything going Hey bro, how’s everything going ? &lt;/div&gt;
       &lt;div class="direct-chat-info clearfix"&gt;&lt;span class="direct-chat-timestamp pull-right"&gt;3.36 PM&lt;/span&gt;&lt;/div&gt;
       &lt;!-- /.direct-chat-text --&gt;
      &lt;/div&gt;
      &lt;!-- /.direct-chat-msg --&gt;
      
  
      &lt;!-- Message. Default to the left --&gt;
      &lt;div class="direct-chat-msg doted-border me"&gt;
       &lt;!-- /.direct-chat-info --&gt;
       &lt;img alt="message user image" src="https://d2xngy2dw7hums.cloudfront.net/media/photos/profiles/2017/09/26/ujahchigozie_1506417938.jpg" class="direct-chat-img"&gt;
       &lt;!-- /.direct-chat-img --&gt;
       &lt;div class="direct-chat-text"&gt;Hey bro, how’s everything going ? &lt;/div&gt;
       &lt;div class="direct-chat-info clearfix"&gt;&lt;span class="direct-chat-timestamp pull-right"&gt;3.36 PM&lt;/span&gt;&lt;/div&gt;
       &lt;!-- /.direct-chat-text --&gt;
      &lt;/div&gt;
      &lt;!-- /.direct-chat-msg --&gt;
  
              &lt;br/&gt;&lt;br/&gt;
     &lt;/div&gt;
  
  
  
  
  
    &lt;/div&gt;
    &lt;div class="popup-messages-footer"&gt;
     &lt;textarea id="status_message" placeholder="Type a message..."
     rows="10" cols="40" name="message"&gt;&lt;/textarea&gt;
     &lt;span class="uk-input-group-addon"&gt;&lt;a href="#"&gt;&lt;i class="glyphicon glyphicon-send"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/span&gt;
     &lt;div class="btn-footer col-xs-12"&gt;
      &lt;button class="bg_none"&gt;&lt;i class="glyphicon glyphicon-earphone"&gt;&lt;/i&gt;&lt;/button&gt;
      &lt;button class="bg_none"&gt;&lt;i class="glyphicon glyphicon-camera"&gt;&lt;/i&gt;&lt;/button&gt;
      &lt;button class="bg_none"&gt;&lt;i class="glyphicon glyphicon-paperclip"&gt;&lt;/i&gt;&lt;/button&gt;
      &lt;button class="bg_none pull-right"&gt;&lt;i class="glyphicon glyphicon-thumbs-up"&gt;&lt;/i&gt;&lt;/button&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
    &lt;script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"&gt;&lt;/script&gt;
   &lt;script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>This is how I want it to be</strong></p>
  
  <p><a href="https://i.stack.imgur.com/jOlBj.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jOlBj.jpg" alt="enter image description here"></a></p>
  
  <p><strong>This what is display when typing</strong></p>
  
  <p>[<img src="https://i.stack.imgur.com/Jl0vG.jpg" alt="enter image description here"><a href="https://i.stack.imgur.com/Jl0vG.jpg" rel="nofollow noreferrer">2</a></p>
  
  <p><strong>After typing it looks like this</strong></p>
  
  <p><a href="https://i.stack.imgur.com/HUiUk.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HUiUk.jpg" alt="enter image description here"></a></p>