I have a Nuxtjs/Vuejs application within which I have a textarea related to XML/JSON. After the user provides the values for these textarea they will be decorated with XML/JSON using CodeMirror.
Initially, the textarea will have the height of 78vh and I would like my CodeMirror to have the same height and width after making the beautification and include the horizontal/vertical scroll bar to move if the content exceeds the border.
I tried to add the CSS property like this but it's not working at all and I get the huge scroll bar to my browser rather within textarea.
.CodeMirror{
height: 78vh;
position: relative;
overflow: hidden;
border: 1px solid black;
}
I also tried adding !important and div > div > div > div > div.CodeMirror { to ensure I am taking parent into consideration but nothing seems to work for me.
Can someone please let me know what I need to do so that my textarea will have same height and width and include a horizontal and vertical scrollbar within itself?
I have added my sample code in the CodeSandBox here: https://codesandbox.io/s/boring-water-g14zd?file=/pages/index.vue
I added in JS instead of in CSS and that worked for me:
for (const s of document.getElementsByClassName('CodeMirror')) {
s.style.border = '1px solid black'
}