我有一个代码镜像版本:5.65.3与Blazor.当我有一个长的行在编辑器的水平滚动不工作,它宁愿使用滚动的页面,这搞乱了整个页面.
像这样:
我不认为我在Codemirror中更改了任何CSS。
下面是一些相关的CSS行:
.CodeMirror {
/* Set height, width, borders, and global font properties here */
font-family: monospace;
height: 750px;
color: black;
direction: ltr;
}
.CodeMirror-scroll {
overflow: scroll !important; /* Things will break if this is overridden */
/* 50px is the magic margin used to hide the element's real scrollbars */
/* See overflow: hidden in .CodeMirror */
margin-bottom: -50px; margin-right: -50px;
padding-bottom: 50px;
height: 100%;
outline: none; /* Prevent dragging from highlighting the element */
position: relative;
z-index: 0;
}
我在用这个代码呼叫代码镜像:(onchange是因为我使用Blazor进行绑定)
window.editor= function (dontNetObjRef) {
editor = CodeMirror.fromTextArea(document.getElementById('myTextArea'), {
lineNumbers: true,
indentUnit: 4,
lineWrapping: true,
tabMode: "shift",
gutters: ["CodeMirror-lint-markers"]
});
//JavaScript function use the onchange event of CodeMirror to invoke the C# method and pass the value of the myTextArea .
editor.on("change", editor => {
dontNetObjRef.invokeMethodAsync("UpdateField", editor.getValue());
// console.log(editor.getValue());
});
注意:即使我使用lineWrapping: true
,它也会移到第二行,并且在滚动时也会出现同样的问题。另外,当我设置一个固定的宽度(如1000px)时,它也能很好地工作,但我希望在用户的屏幕大小发生变化时自动设置。
2条答案
按热度按时间oaxa6hgo1#
感谢Jax-p给我一些提示来解决这个问题。
我在
.CodeMirror
类中添加了width:70vw
,在.CodeMirror-scroll
中添加了max-width:70vm
另一件影响更改的事情是,我把文本区域放在了一个
<div class=col-11>
中,这会影响CSS中的宽度,所以我只是删除了它,一切都正常。c90pui9n2#
当我在一个项目上工作时,我遇到了同样的问题--这是CSS的问题。
我用非常简单的flexbox解决方案解决了这个问题:
相应的样式: