How come my CodeMirror's height is not adjusting with the CSS changes?

I have implemented CodeMirror to display a JSON object within a simple div:

<codemirror v-model="codeToPrint" class="CodeMirror" :options="cmOptions"/>

Shown below are the configuration options I am using :

cmOptions: {
      mode: "application/json",
      lineNumbers: true,
      lineWrapping: true,
      viewportMargin: Infinity,
      readOnly: true,
      matchBrackets: true,
    },

Despite trying to adjust the height with height : 1500px; or any other value, the size remains unchanged. I have searched through the documentation but could not find a solution.

What could be causing this issue?

javascriptvue.jscodemirror

Answer №1

Include a new CSS style:

.CustomCodeMirror {
  height: 1500px
}

For more information, visit

About CodeMirror: The outer element of the editor. Use this for setting the width, height, borders and position of the editor.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for accurately extracting values from a decoded JSON

Hello, I am posting this query because I recently encountered an issue with json encoding in PHP. When using the json_encode() function, my original JSON data gets converted to strings instead of maintaining its original variable type. For instance, let&a ...

javascriptphpjsonangulartypescript

Exploring (nested) data structures in JavaScript

I'm struggling to understand if my issue lies in how I am organizing my array or in how I am accessing it. The idea is simple: I want to have an array of car makes and models that I can access for display purposes. const carBrands = [ { Audi: { ...

javascriptarraysloops

Is it possible for external JavaScript files to access their host origin without using JSONP?

If I include a JavaScript file in my HTML page header that is not hosted on my server, like shown here: <html><head> <script src="https://example.com/script.js"></script></head> <body>... Will the browser allow this sc ...

javascriptajaxcorsjsonpsame-origin-policy

3D textile simulation powered by three.js

My current project involves using three.js to develop a cloth simulator similar to the one on the Hermes website. The main difference is that I want to implement top-down waves instead of horizontal waves like the ones on the Hermes site. I have successfu ...

javascriptthree.jsgame-physics

Keep the Bootstrap dropdown menu open when the search bar is in focus

I am working on a customized bootstrap dropdown menu that needs to remain open when the search bar within the Events dropdown is focused. I have managed to make it open and close on hover, but now I need it to stay open under certain conditions. Below is ...

javascriptjquerycsstwitter-bootstrapdrop-down-menu

Positioning Thumbnails with Jquery Cycle Plugin

Initially, my inquiry is quite similar to a question that was previously posted here. However, the difference lies in the fact that I am utilizing WordPress and the nextgen gallery plugin to handle my images. mygallery/image1.jpg mygallery/image2.jpg and ...

javascriptjqueryjquery-pluginsjquery-cyclecycle-plugin

What is the best way to show an array object from PHP to AJAX in JavaScript?

I am facing an issue with a function that returns an array object from PHP using MySQL. I need to call this array in an AJAX function using JavaScript, but I am unsure of how to display the PHP array object in a dynamic table or console log. Here is my PH ...

javascriptphpjqueryajaxfunction

What is the best way to display the contents of an array that contains another array within it?

I need help looping through this array and displaying the "roleName" value. I want to use the map method to iterate over it. { "userMenuDTO": { "menuId": "13", "menuName":"PruebaMenu900 ...

javascriptarraysreactjsobjectdatatable

Disable the meta tags in Zurb Foundation 5

I have searched extensively online but haven't been able to find a solution for this issue. How can I disable these zurb foundation 5 meta tags in the <head>: <meta class="foundation-mq-small"> <meta class="foundation-mq-small-only"> ...

javascripthtmlzurb-foundationzurb-foundation-5

Updating classes in a CSS style for a chosen item, and modifying additional classes for similar elements to match the selected one

How can I apply the 'selected' class to only the clicked item and remove it from all other items with similar classes? <ul class="nav-list"> <li> <a href="#"> <i class="fa-soli ...

javascripthtmljquery

Reorganize array of objects in JavaScript

So I am working with an array of objects structured like this: const data= [ { id: '6397f6f46b18bc89cb37053c', cost_center: null, plant: null, material: null }, { id: '6397f7166b18bc89cb372ff7', cost_center: &apo ...

javascriptarraysobject

Retrieve the initial data of the AngularJS model upon button click

Previously, I was able to retrieve the initial values of the model using this.model.changed or this.model._previousAttributes in BackboneJS. Now, I am looking to achieve the same functionality in AngularJS, where I can track all changes made to the model ...

javascriptangularjsmodel-view-controllerbackbone.js

Searching for text boxes in Bootstrap dropdown

I've modified a bootstrap template by adding a text box to the navigation bar. My goal is to have this text box display a dropdown list of items automatically as users type, rather than requiring them to manually click search or navigate to another pa ...

javascripthtmlcsstwitter-bootstraptwitter-bootstrap-3

Retrieving the dimensions of a concealed element

I am facing a minor issue and I need some assistance in figuring out what I might be missing here. Here is my html code: <div class="drop-down-menu"> <div class="innerdrop-down-menu"> <div id="first-tab-cont"> <ul id=" ...

javascriptjqueryhtmlcss

What is the process for inputting client-side data using a web service in ASP.NET?

Currently experimenting with this: This is my JavaScript code snippet: function insertVisitor() { var pageUrl = '<%=ResolveUrl("~/QuizEntry.asmx")%>' $.ajax({ type: "POST", url: pageUrl + "/inse ...

javascriptasp.netajaxjsonweb-services

Issue encountered when attempting to develop a countdown timer using Typescript

I am currently working on a countdown timer using Typescript that includes setting an alarm. I have managed to receive input from the time attribute, converted it using .getTime(), subtracted the current .getTime(), and displayed the result in the consol ...

javascripthtmltypescript

What is the best way to simulate the behavior of a function that is being called by a service during testing

Currently, I am developing a NestJS project and the task at hand involves writing unit tests for my services. One of the services in question is the BigQueryService, which utilizes @google-cloud/bigquery to interact with a Big Query dataset and execute qu ...

javascripttypescriptjestjsnestjs

working with Selenium in the Chrome web browser

Within a file named e2e.js, the following code was written: const webdriver = require('selenium-webdriver'); const driver = new webdriver.Builder().forBrowser('chrome').build(); driver.get('https://www.google.co.il/'); I h ...

javascriptnode.jsreactjsselenium

Could someone clarify why EventEmitter leads to issues with global variables?

I recently encountered an error that took me some time to troubleshoot. Initially, I decided to create a subclass of EventEmitter In the file Client.js var bindToProcess = function(func) { if (func && process.domain) { return process.domai ...

javascriptnode.jsexpress

Dealing with the notorious AngularJS error: $rootScope:infdig while using ng-style function within ng-repeat

I'm currently working on an animation for displaying phrases randomly on the main page of a website, complete with fade and translate effects. To achieve this, I am using the ng-style attribute within an ng-repeat attribute, and setting the ng-style ...

javascriptjqueryangularjsng-styleangularjs-rootscope