I am developing website which having xml, java programs. So i chose CodeMirror for displaying programs in TextArea. I had successfully displayed. It's default height is 300px in codemirror.css. How to change Height and Width of TextArea programmatically in codemirror?
The CodeMirror user manual is your friend.
Example code:
<textarea id="myText" rows="4" cols="10"></textarea>
<script type="text/javascript" language="javascript">
var myTextArea = document.getElementById('myText');
var myCodeMirror = CodeMirror.fromTextArea(myTextArea);
myCodeMirror.setSize(500, 300);
</script>
myCodeMirror.setSize(null, 500);
You can pass null for either of them to indicate that that dimension should not be changed.
Documentation:
cm.setSize(width: number|string, height: number|string)
Programmatically set the size of the editor (overriding the applicable
CSS rules). width and height can be either numbers (interpreted as
pixels) or CSS units ("100%", for example). You can pass null for
either of them to indicate that that dimension should not be changed.
Although the answer from Christian is great, just a heads up:
Autoresize Demo.
.CodeMirror {
border: 1px solid #eee;
height: auto;
}
By setting an editor's height style to auto and giving the viewportMargin a value of Infinity, CodeMirror can be made to automatically resize to fit its content.
Source: https://codemirror.net/demo/resize.html
As an extention to the correct answer:
If you want that it takes the whole size of the Parent element, you can use:
myCodeMirror.setSize("100%", "100%");
if you are doing this in react use ref
const codemirrorRef = React.useRef();
React.useEffect(() => {
const current = codemirrorRef.current.editor.display.wrapper.style.height = "1000px";
});
<CodeMirror
[...]
ref={codemirrorRef}
/>
codemirrorRef.current.editor.display.wrapper contains the div element. From there you can do anything you would do if you did document.getElementById('#id')
$(function () {
// CodeMirror
CodeMirror.fromTextArea(document.getElementById("codeMirrorDemo"), {
lineNumbers: true,
readOnly: true,
//mode: "htmlmixed",
}).setSize("100%", 610);
})
I used the solutions above but always struggled with the option when one line was too long and then it break out of the wrapper and broke the layout. I did not want to use the lineBreak option so I defined following:
<div class="container">
<textarea id="codemirror">
</div>
and the style was following:
.container {
position: relative;
height: {as you want}
width: 100%;
}
#codemirror {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
If you use ngx-codemirror package in your angular application the below blog will be very much useful for you
https://devsuhas.com/2021/04/06/change-height-and-width-of-textarea-in-codemirror/
Related
I'm trying to modify an elements height (elementTwo) using another element's height (elementOne) using JS (No jQuery)
When I try logging elementOne.style.height, I get an empty string
Using Safari and Chrome inspector's I can see the computed height but cannot access it using JS. It shows up as faded (See screenshots)
Screenshot of Safari inspector |
Screenshot of Chrome inspector
.elementOne {
min-height: 100vh;
width:100%;
}
ElementOne has a min-height set to be 100vh but automatically increases in size based on the device / size of child elements. It does not have a height set. ElementTwo does not have any css by default
I am trying to do this using JS only and do not want to use jQuery at all.
If you want the height style for the element, you need to get the computed style with getComputedStyle (or currentStyle on old IE):
function getStyle(element) {
if (typeof getComputedStyle !== "undefined") {
return getComputedStyle(element);
}
return element.currentStyle; // Old IE
}
var heightStyle = getStyle(element).height;
That will be a string, with units on it (not necessarily the units in the CSS).
If you want the element's height, as opposed to its height style, use element.offsetHeight or element.clientHeight. They will be numbers; it's the number of pixels rounded to the nearest whole number.
If you want the most precise information you can get (including a fractional number of pixels if relevant; that can happen), you'd use getBoundingClientRect.
Example:
function getStyle(element) {
if (typeof getComputedStyle !== "undefined") {
return getComputedStyle(element);
}
return element.currentStyle; // Old IE
}
var element = document.querySelector(".foo");
var bounding = element.getBoundingClientRect();
console.log({
"height style": getStyle(element).height,
"offsetHeight": element.offsetHeight,
"clientHeight": element.clientHeight,
"bounding height": bounding.height
});
.container {
display: inline-block;
width: 100px;
height: 200px;
position: relative;
background-color: yellow;
}
.foo {
display: inline-block;
width: 100%;
height: 33.3%;
background-color: blue;
}
<div class="container">
<div class="foo"></div>
</div>
I think you want to use the property .clientHeight of the dom-element.
See the mdn arcticle about it.
(This is a follow-up on my previous question if anybody is interested in the background story for entertainment purposes. It will probably not help you understand this question.)
Here are two elements <aside> and <main> who have got their width and height via JavaScript so that their combined width is the width of your screen (note that their display is inline-block). If you run this code in your web browser (a maximized browser so that the width of your browser equals the width of your screen) you might note that the body surprisingly does not properly fit the elements:
<!DOCTYPE html>
<html>
<body>
<aside></aside><!-- comment to remove inline-block whitespace
--><main></main>
<script>
var h = screen.height/100;
var w = screen.width/100;
var e = document.getElementsByTagName("aside")[0].style;
e.display = "inline-block";
e.backgroundColor = "lightblue";
e.width = 14*w + "px";
e.height = 69*h + "px";
e.marginRight = 0.5*w + "px";
e = document.getElementsByTagName("main")[0].style;
e.display = "inline-block";
e.backgroundColor = "green";
e.width = 85.5*w + "px";
e.height = 69*h + "px";
e = document.getElementsByTagName("body")[0].style;
e.margin = e.padding = "0";
e.backgroundColor = "black";
</script>
</body>
</html>
If you however give the JavaScript a delay, the elements are rendered properly. This suggests that the body somehow "needs time" to figure out its correct width:
<script>
setTimeout(function() {
[...]
}, 200);
</script>
It is also possible to give the body the specified width of screen.width instead of introducing the delay, by adding the following line. This supports the previous guess that the body does not immediately know its correct width (unless specified):
<script>
[...]
e.width = 100*w + "px";
</script>
Even though I have taken the freedom to throw wild guesses to explain this, I do not actually have a clue to what is going on.
Why are the elements not placed properly in the first place, and why do these two solutions work?
(Note: It is also possible to fix this by setting the whitespace of the body to nowrap with e.whiteSpace = "nowrap";, but I suspect this does not do the same thing as the other two. Instead of creating space for the elements inside the body, this simply forces the elements to be next to each other even though there is not enough room in the body.)
You should wait for the DOM to be available before running your code, see here: pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it. That is possibly why setTimeout works. Also you should assign seperate variable names for your different elements.
// self executing function before closing body tag
(function() {
// your code here
// the DOM will be available here
})();
Is there a reason you are using Javascript and not CSS to accomplish this task? I suggest giving your elements css ids ie id="aside", then set your css styles:
html,body {
width: 100%;
height: 100%;
}
#aside {
display:inline-block;
position: relative;
float: left;
width: 14%;
height: 69%;
background: blue;
}
#main {
display:inline-block;
position: relative;
float: left;
width: 86%;
height: 31%;
background: azure;
}
Unfortunately 100vh is not always the same as 100% browser height as can be shown in the following example.
html,
body {
height: 100%;
}
body {
overflow: scroll;
}
.vh {
background-color: blue;
float: left;
height: 50vh;
width: 100px;
}
.pc {
background-color: green;
float: left;
height: 50%;
width: 100px;
}
<div class="vh"></div>
<div class="pc"></div>
The issue is more pronounced on iPhone 6+ with how the upper location bar and lower navigation bar expand and contract on scroll, but are not included in the calculation for 100vh.
The actual value of 100% height can be acquired by using window.innerHeight in JS.
Is there a convenient way to calculate the current conversion of 100vh to pixels in JS?
I'm trying to avoid needing to generate dummy elements with inline styles just to calculate 100vh.
For purposes of this question, assume a hostile environment where max-width or max-height may be producing incorrect values, and there isn't an existing element with 100vh anywhere on the page. Basically, assume that anything that can go wrong has with the exception of native browser functions, which are guaranteed to be clean.
The best I've come up with so far is:
function vh() {
var div,
h;
div = document.createElement('div');
div.style.height = '100vh';
div.style.maxHeight = 'none';
div.style.boxSizing = 'content-box';
document.body.appendChild(div);
h = div.clientHeight;
document.body.removeChild(div);
return h;
}
but it seems far too verbose for calculating the current value for 100vh, and I'm not sure if there are other issues with it.
How about:
function viewportToPixels(value) {
var parts = value.match(/([0-9\.]+)(vh|vw)/)
var q = Number(parts[1])
var side = window[['innerHeight', 'innerWidth'][['vh', 'vw'].indexOf(parts[2])]]
return side * (q/100)
}
Usage:
viewportToPixels('100vh') // window.innerHeight
viewportToPixels('50vw') // window.innerWidth / 2
The difference comes from the scrollbar scrollbar.
You'll need to add the height of the scrollbar to the window.innerHeight. There doesn't seem to be a super solid way of doing this, per this other question:
Getting scroll bar width using JavaScript
I am using dat.gui, and I would like to position it somewhere different than the top right, preferably at the top overlapping a three.js canvas, is this accomplished through commands, or is there some css that will do the trick?
You need some JavaScript and CSS to do this.
The GUI constructor can be passed a paramaters object. You can tell the control not to be autoplaced. You can also attach an element ID to make styling easier
var gui = new dat.GUI( { autoPlace: false } );
gui.domElement.id = 'gui';
And then the CSS to place it can be something like this:
#gui { position: absolute; top: 2px; left: 2px }
The accepted answer answers my question but is not quite what I went for to solve the problem, do to the gui scrolling with me when I go up and down the page. Instead of setting an ID for the gui domElement, I appended the element to an existing element which I can control better.
css:
.moveGUI{
position: absolute;
top: 13.1em;
right: -1em;
}
JS:
// Create GUI
gui = new dat.GUI( { autoPlace: false } );
{
// create fill and open folders
}
var customContainer = $('.moveGUI').append($(gui.domElement));
HTML:
<div class = 'moveGUI'>
</div>
Override CSS:
.dg.a { margin-right:60px !important; }
Personally I like to use:
function datgui(){
let gui = new dat.GUI({
width : 300
});
I'm using the YUI Panel element that is rendered via an AJAX call. Is there a way to set a maximum height and use a scrollbar whenever the content of the panel exceeds that height?
Definitely! Here is an example with a Dialog with id dlg:
var dialog = new YAHOO.widget.Dialog("dlg", { fixedcenter : true....
So then set the bd css class to auto overflow:
#dlg .bd {
overflow: auto;
}
And then in your js put something like:
YAHOO.util.Dom.setStyle(dialog.body, "height", "300px");
You'll probably need to add some styling to the ft class also, but that's up to you:
#dlg .ft {
padding-top: 10px;
border-top: 1px solid #CECECE;
}
And if you don't care about a specific height, but just want to avoid it being larger than the window then the following code handles that.
myDialog.renderEvent.subscribe(function() {
// Find .yui-panel .bd
let dialogElement = $('.yui-panel .bd');
// set the max-height to the 90% of the screen
let windowHeight = $(window).height();
dialogElement.css('max-height', windowHeight*0.9);
// set overflow:auto
dialogElement.css('overflow', 'auto');
});