The TextArea is currently set to readonly mode using "ng-readonly," which is causing the scrollbar-thumb not to appear. It's important to note that I am not utilizing webkit in this scenario. Below is the HTML code being used:
<textarea dataitemfqn="ClientBulletin.Handling.WCUniqueInstructions.ReturnToWork.SpecialHandlingInstructions3"
id="SpecialHandlingInstructions3"
ng-model="ClientBulletin.HandlingData.Handling.SpecialHandlingInstructions3"
ng-readonly="BulletinEditMode == false"
class="textarea-scrollbar"
onkeyup="resizeTextarea('SpecialHandlingInstructions3')">
</textarea>
Here is the corresponding CSS:
.textarea-scrollbar {
/*overflow:scroll !important;*/
overflow-y: scroll !important;
height: 50px;
padding-bottom: 120px;
resize: both !important;
-ms-overflow-style: scrollbar;
min-height: 50px;
max-height: 200px;
}
.textarea-scrollbar::-webkit-scrollbar {
width: 12px;
}
.textarea-scrollbar::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background-color: #555;
}
... The JavaScript involved includes:
function resizeTextarea(id) {
var a = document.getElementById(id);
a.style.height = '50px';
a.style.height = a.scrollHeight + 'px';
}
function init() {
var a = document.getElementById('SpecialHandlingInstructions3');
for (var i = 0, inb = a.length; i < inb; i++) {
if (a[i].getAttribute('data-resizable') == 'true')
resizeTextarea(a[i].id);
}
}
addEventListener('DOMContentLoaded', init); //
$(function () {
$('#SpecialHandlingInstructions3').each(function () {
$(this).height($(this).prop('scrollHeight'));
});
});
The ScrollBar Thumb isn't displaying as expected. The client specifically requires the ScrollBar Thumb and doesn't want the TextArea resizing feature. I've even attempted embedding the TextArea within a Div without success. Any assistance would be greatly appreciated.