Respond to size constraints

[scniro]

width: 100% height: 100% is nearly impossible to get working, especially with flexbox in the mix. Can we find a way to be more responsive with sizing?

[scniro]

@contra @veggiemonk so this lib indeed passes through the user defined class and doesn't ship with any hardcoded styles to it (.react-codemirror2 is applied to the component but is empty).

I played with this a bit and the following seemed to work for me. Can you try out and let me know if this works? I would absolutely love an isolated use case that clearly demonstrates this shortcoming. Please share one if you can? I'm trying to figure out what can be done on my end that applying styles in implementation can't achieve.

.react-codemirror2 {
  flex: 1 1 auto;
  margin-top: 0;
  height: 100%;
  position: relative;
}

.CodeMirror {
  position:absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
}

[veggiemonk]

Hi @scniro,

Thanks for getting in touch.
I just quickly tried it out and it looks good.
So far, it seems to be good enough for my simple use case but I'll try to customize it further and give feedback here. To give it a specific doesn't seem trivial. I'll let you know.

Thank you. 👍

[scniro]

Going to close this out for now as I have't had any further breakthroughs on this and the above styling seems to work. Please reopen if you have any other difficulty with this!

[yocontra]

@scniro Thanks, sorry for no response I haven't had time to confirm that fix as we had switched editors already.

[sherry0429]

meet same questions here,
reason is that
<.codemirror2> can not set 'style' flag. code like this is useless:

import {UnControlled as CodeMirror} from 'react-codemirror2';
<CodeMirror>
style=...
...
</CodeMirror>

So, when try to set real codemirror height & width to 100%, it will useless because of it's parent node 'react-codemirror2' have not a certain height & width.

Hope this could support style flags. thanks.

[FiV0]

Just in case anyone runs across this. I had to add !important to the height attribute.

.CodeMirror {
  position:absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100% !important;
}