Vertical auto scroll on write text in input field


Topic: Vertical auto scroll on write text in input field

ankit1 pro asked 8 years ago

Hi Please check the image below, Need to achieve functionality, Can you let me know code to achieve the same? Regards Ankit
Hello, Example HTML:
<div class="container">
    <div class="col-md-6">
        <div class="md-form">
            <input id="input_text" type="text" length="100">
            <label for="input_text">Title</label>
        </div>
        <div class="md-form">
            <textarea type="text" id="textarea" class="md-textarea"></textarea>
            <label for="textarea">Description</label>
        </div>
    </div>
</div>
You have to overwrite some styles and add a new class. CSS:
textarea.md-textarea-scroll{
  overflow-y: visible;
}
textarea.md-textarea {
  padding: 0;
  resize: none;
  min-height: 3rem;
}
If you prefer nice scrollbar, you can use our.
::-webkit-scrollbar {
    width: 8px;
}
/* Track */

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
/* Handle */

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #your-color;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-thumb:window-inactive {
   background: #your-color;
}
JS:
var $textarea = $('#textarea');

$textarea.on('keyup', function(evt){
    var $this = $(this);
    var height = $this.height();
    evt.which === 13 && height < 200 ? $this.height(height+=25) : $this.addClass("md-textarea-scroll");   
});

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No