Topic: Vertical auto scroll on write text in input field
Hi
Please check the image below, Need to achieve functionality, Can you let me know code to achieve the same?
Regards
Ankit
Add comment
Adrian Sawicki answered 8 years ago
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");
});
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