I have the below div element. I want to be able to change the height and overflow attributes programmatically.
I tried to change the height as shown below but it does not change.
Please let me know how to change the height and overflow programmatically.
TypeScript/JavaScript:
document.getElementById('select-layer-overlay').style.height = '200px'
HTML/Angular
<div id="select-layer-overlay" style="height: 360px;overflow: auto;" *ngIf="showSelectLayers && selectedSite!=null">
I checked the same and it is working for me, but since you are using the Angular, it is not preferable to update DOM by directly referring the elements like this, instead you can provide a class name and based on that you can toggle the height and overflow properties.
var btn = document.getElementById('btn');
btn.addEventListener('click', function() {
document.getElementById('select-layer-overlay').style.height = '200px';
})#select-layer-overlay {
border: 1px solid #ddd;
}<div id="select-layer-overlay" style="height: 300px;overflow: auto;" >Hello</div>
<button id="btn">Click</button>