質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.10%

react-codemirror2でスクロールバーが表示されず、スクロールされない

受付中

回答 0

投稿

  • 評価
  • クリップ 1
  • VIEW 1,013
退会済みユーザー

退会済みユーザー

実現したいこと

react-codemirror2を使って大量の文字を入力してもCodeMirrorのエディターの中でスクロールしたい

発生している問題

スクロールバーが表示されず、スクロールされない

関連するソースコード

//index.js
import ReactDOM from 'react-dom';
import App from './App.js';
import './style.scss';
import 'codemirror/theme/material.css';
import 'codemirror/lib/codemirror.css';
import 'codemirror/addon/scroll/simplescrollbars.css';


ReactDOM.render(
    <App />,
    document.querySelector('#app')
);
//App.js
import React from 'react';
import Core from './components/core';
import MyHeader from './components/header';
export default class App extends React.Component {
    render(){
        return (<div id="body"><MyHeader /><Core /></div>);
    }
}
//header.js
import React from 'react';

export default class MyHeader extends React.Component {
    render(){
        return (
        <header>
            <h1>MarkDown Editor</h1>
        </header>);
    }
}
//core.js
import React from 'react';
import {Controlled as CodeMirror} from 'react-codemirror2';
import 'codemirror/mode/markdown/markdown';
import 'codemirror/mode/gfm/gfm';
import 'codemirror/addon/display/placeholder';
import 'codemirror/addon/scroll/simplescrollbars';

const options = {
    mode: 'gfm',
    theme:'material',
    lineNumbers:true,
    placeholder: 'Write Markdown here',
    lineWrapping: true,
    scrollbarstyle:'simple'
};

export default class Core extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            cmvalue:''
        };
    }
    render(){
        return (
        <div id="core">
            <CodeMirror options={options}
            value={this.state.cmvalue}
            onBeforeChange={(editor, data, cmvalue)=>{
                this.setState({cmvalue});
            }}
            onChange={(editor,data,value)=>{}} />
        </div>
        );
    }
}
//codemirror.cssの追加・変更した部分
.react-codemirror2{
  height:100%;
  font-family: inherit;
}

.CodeMirror {
  /* Set height, width, borders, and global font properties here */
  font-family: inherit;
  height: 100%;
  color: black;
  direction: ltr;
}
.CodeMirror-placeholder{
  color: #777!important;
}
html {font-size: 62.5%;}

body {font-family: 'Helvetica','Arial','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','Yu Gothic UI','メイリオ', Meiryo,sans-serif;
         color: #333;
         font-size: 1.6rem;
        }

        html,
        body,
        p,
        ol,
        ul,
        li,
        dl,
        dt,
        dd,
        blockquote,
        figure,
        fieldset,
        legend,
        textarea,
        pre,
        iframe,
        hr,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            margin: 0;
            padding:0;
        }

        #app{
            line-height: 1.7;
        }
//style.scss
body {
  #app {
    #body {
      height: 100vh;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 9fr;
      header {
        position: relative;
        background-color: #f8f8f8;
        border: 1px solid #e7e7e7;
        grid-row: 1/2;
        grid-column: 1/3;
        h1 {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
      #core {
        grid-row: 2/3;
        grid-column: 1/2;
      }
    }
  }
}

環境

"codemirror": "^5.45.0"
"react-codemirror2": "^5.1.0"
"react": "^16.8.6"
"react-dom": "^16.8.6"
"live server":"5.5.1"
"chrome":73.0.3683.86(Official Build)(64 ビット)
"webpack": "^4.29.6"
"@babel/core": "^7.4.0"
"@babel/preset-env": "^7.4.2"
"@babel/preset-react": "^7.0.0"
"babel-loader": "^8.0.5"

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.10%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る