Comments (10)
Hm, I agree that this is a bit unintuitive. Setting the height on the React container doesn't do anything, which seems a bit odd since it's not like the .CodeMirror
element's height is set to auto
by default. If it were, I could see why setting the height on the React container should do nothing, but it's not.
Perhaps it would be better to set .CodeMirror { height: 100%; }
by default so that it fills the React container. If the React container has no explicit height, the component will automatically size to the editor's contents. If the React container has an explicit height, the component and the CodeMirror instance inside it will be sized exactly as expected.
@JedWatson what do you think?
from react-codemirror.
I seem to have the syntax wrong - the following code doesn't change the height.....
<Codemirror onChange={(code) => this.setState({code: code})}
value={(!this.state.code) ? '' : this.state.code}
style={{"height": "800px"}}
options={options}
/>
May I ask the correct syntax please?
thanks
from react-codemirror.
Defining a copy of .CodeMirror css file with global keyword will solve this issue.
/* Copied from codemirror */
/* BASICS */
:global .CodeMirror {
/* Set height, width, borders, and global font properties here */
font-family: monospace;
height: 450px;
color: black;
direction: ltr;
}
Now include this css file,
import "codemirror/lib/codemirror.css";
import "./codeMirror.css";
from react-codemirror.
You can set the height via css on .CodeMirror
, auto will cause it to take the height of the contents. It's documented here: https://codemirror.net/doc/manual.html#styling
from react-codemirror.
Oh I see, sorry you were directing me to update the CSS rather than set an inline style.
It works now thanks with the following in my app.css:
.CodeMirror {
height: 800px;
}
from react-codemirror.
It works now
@dukedougal Would it make sense to close this issue?
from react-codemirror.
componentDidMount() {
const cm = this.refs.editor.getCodeMirror();
const { width, height } = this.props;
// set width & height
cm.setSize(width, height);
}
render() {
return (
<div className={className}>
<Codemirror ref="editor" value={value} onChange={value => this.props.onChange(value)} options={options} />
</div>
);
}
may help you
from react-codemirror.
@cuining Since this.refs
and ReactDOM.findDOMNode
are deprecated, you're better off doing the following:
editorRefCallback = (ref) => {
const cm = ref.getCodeMirror();
const { width, height } = this.props;
// set width & height
cm.setSize(width, height);
}
render() {
return (
<div className="CodeMirrorComponent">
<CodeMirror ref={this.editorRefCallback} value={this.state.code} onChange={this.updateCode} options={options} />
</div>
);
}
from react-codemirror.
I know this is an old issue but wanted to provide an alternative solution that we've used for our service virtualization tool EkkoProxy where we have many CodeMirror components that needed different sizing etc. meaning we could not use the global css override option (:global .CodeMirror {}
) provided elsewhere. Though its also possible to call the setSize
using a React ref callback method or via editorDidMount={editor => {editor.setSize(null, 500);}}
it's not an elegant solution. So as an alternative and because CodeMirror supports using multiple themes you can just define themes with different styles e.g. height in your stylesheet:
.cm-s-readonly {
background-color: rgba(170, 170, 170, 0.04) !important;
}
.cm-s-height400 {
height: 400px !important;
}
.cm-s-height500 {
height: 500px !important;
}
Then on the CodeMirror tag specify the themes you need in a particular situation:
<CodeMirror options={{
theme: 'default height500 readonly',
}} />
These theme style classes are then applied to the main CodeMirror div.
from react-codemirror.
Oh I see, sorry you were directing me to update the CSS rather than set an inline style.
It works now thanks with the following in my app.css:
.CodeMirror { height: 800px; }
Oh I see, sorry you were directing me to update the CSS rather than set an inline style.
It works now thanks with the following in my app.css:
.CodeMirror { height: 800px; }
I have the Editor placed inside a resizable div. I want to set the height to 100% of its parent container. How do i do so ?
from react-codemirror.
Related Issues (20)
- Theme syntax highlighting not working HOT 3
- how can I beautify(formatting) code after load HOT 2
- Foldcode not working for me. And not even getting foldgutter. Any help? HOT 3
- Update peerDependencies for react > 16 HOT 1
- Is this library deprecated? HOT 2
- How to integrate codemirror-formatting plugin with react
- Focus lost after typing character HOT 2
- How do I use methods like setSize of an instance?
- How to Set Default Background Color and Default Content Width in Editor?????
- Line numbers sometimes don't load properly using fromTextArea
- Can't use defineMode ?
- beforeChange is not fired?
- autofocus is broken on UnControlled
- how can I use MergeView
- lineNumbers show in preview codemirror
- .
- New project with react-codemirror on typescript HOT 1
- Codemirror syntax highlighting works in preview but not when published
- Support React 17 HOT 1
- When pasting in multi-line values, it pastes twice HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-codemirror.