Vertical auto scroll on write text in input field


Topic: Vertical auto scroll on write text in input field

ankit1 pro asked 10 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