Q&A
このSVGのスクリプトはご自作ですか？ 概要を説明していただけますか？
概要
親要素で position:relative; overflow:hidden; 、
子要素の <textarea> に position:absolute; を設定して、
親要素で定義した範囲内で、動的に <textarea> のサイズ、位置を変える javascript を作成しています。
しかし <textarea> の占める領域が親要素の占める領域からはみ出るサイズになると、
overflow:hidden; が効かずに困っています。
↓問題が再現している状態↓
https://ikazoichikawa.github.io/test/
↓問題の部分↓
問題点
以下2点を解決したく、宜しくお願いします。
1. スタイルだけ丸コピした別ページは問題が発生しない
スタイルの設定に誤りがないかを確認するため、
親要素のスタイルと子要素(<textarea>)のスタイルを丸コピして作ったテストページを作成しましたが、
こちらは<textarea> がはみ出る事なく、 overflow:hidden が効いているのですが、
違いがわかりません。
↓スタイルを丸コピして作ったテストページ↓
https://thimbleprojects.org/yose-yoshimakure/591065/
問題が発生している方のページのどこが問題なのかがわからず、
教えてほしいです。
2. テストページでは、キャレットの移動で<textarea>の表示位置が変わってしまう
上記テストページ内で、<textarea> 内のキャレットをキーボードの矢印キーを使ってを表示範囲外に持っていくと、
<textarea> の左上位置が変わってしまいます。
↓キャレット移動前↓
↓キャレット移動後↓
デベロッパーツール上では、top 位置が変わっていないのですが、ブラウザ表示は変わってしまっています。
(left 位置についても、同様の動きをしてしまいます)
表示したい <textarea> の位置から変わらないようにしたいのですが、
方法がわからず、教えてほしいです。
追記(このSVGのスクリプトについて)
SVG内の <text> 要素を <textarea> を使って編集するスクリプトです。
全体の動きはEditableNodes.jsで定義しています。
<text> と <textarea> の動きの流れは以下のとおりですが、
その動作内でおかしな動作していないかどうか確認するため、
この機能だけをoffにしてみましたが、やはり表題の問題が発生してしまうため、無関係かなと考えております、、、。
(下記2～4の機能を、
デベロッパーツールのコンソールでhavetoadjust = false;とすればoffに出来るようにしておきました。
havetoadjust = true;とすればonに出来ます)
1. ページloadの時に line1_012345～ の内容をもつ <textarea> を追加
3160: var $3textareaElem = $3motherElement.append("textarea") ～～～～～～～～～～～～～～～～～～～～～～中略～～～～～～～～～～～～～～～～～～～～～～～～～～ 3170: .classed("mousetrap",true) 3171: .property("value", textareaValue) 3172: .attr("wrap","off");
2. 追加した <textarea> 内でキータイプ(改行入力はAlt+Enter)を行うと、、、
3184: $3textareaElem.node().oninput = function(){ or 3191: Mousetrap(textareaElem).bind(keySettings.insertLF, function(e){
3. <textarea> 内の文字列を、<svg> 要素内の同じ位置に存在する <g> 要素の <text> に反映
1326: if(renderByThisObj.text.text_content == ""){ //空文字の場合 1327: $3SVGnodeElem_text.append("tspan").text(""); 1328: 1329: }else{ //空文字ではない場合 1330: ～～～～～～～～～～～～～～～～～～～～～～中略～～～～～～～～～～～～～～～～～～～～～～～～～～ 1357: //draw 1 line 1358: $3SVGnodeElem_text.append("tspan") 1359: .attr("x", bindedData.coordinate.x) 1360: .attr("dy", em) 1361: .text(str); 1362: } 1363: }
4. 反映させた<g>要素内の<text>のスタイル&専有サイズを<textarea>に反映
3010: function adjustTextarea(bindedData, $3textareaElem){ ～～～～～～～～～～～～～～～～～～～～～～中略～～～～～～～～～～～～～～～～～～～～～～～～～～ 3131: }
とてもややこしい問題ですがこれ以上自力で調べられず、
お力をお借りしたいです。
宜しくお願いします。
回答1件
0
ベストアンサー
1.の回答
overflow:hiddenの効かない、親要素のSVGは
<svg class="SVGForNodesMapping context-menu-0"> の中で width: 100% height: 100% となっているが
スタイルだけ丸コピした別ページの方は
親要素の<div class=“mother”>はwidth:100px; height:100px; になっている
2.の回答
テキストエリアに内に書き込もうとして、キャレット位置を移動させているので、カーソルに追従して表示位置が変わりますがoverflow:hidden;の範囲内で表示が移動しているだけではないでしょうか？
表示場所の移動をしたくないならば、
.mother textarea{}の中でposition: absolute;を position: fixed;に変更すれば良いです。
コメントへの回答
親要素に何が入るのかわかりませんが、textareaの中だけのことでしたら、textareaにoverflow:scrollで良いのでは？
Mac環境しかないので、Mac版のchrome,safari,firefox で確認しています。
html
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <title>Made with Thimble</title> 6 <style> 7 body{ 8 margin:0px; 9 padding:0px; 10 } 11 .mother{ 12 width:100px; 13 height:100px; 14 background-color: skyblue; 15 padding:0px; 16 } 17 .mother textarea { 18 position:fixed; 19 overflow:scroll; 20 top: 50px; 21 left: 50px; 22 margin: 0px; 23 border: none; 24 padding: 0px; 25 width: 50px; 26 height: 50px; 27 background-color: bisque; 28 } 29</style> 30</head> 31<body> 32 <div class="mother"> 33 <textarea wrap="off"> 34 line1_012345678901234567890123456789 35 line2_012345678901234567890123456789 36 line3_012345678901234567890123456789 37 line4_012345678901234567890123456789 38 line5_012345678901234567890123456789 39 line6_012345678901234567890123456789 40 line7_012345678901234567890123456789 41 line8_012345678901234567890123456789 42 line9_012345678901234567890123456789 43 </textarea> 44 </div> 45</body> 46</html>
テキストエリアの位置が、親要素の左角からという意味でしたら
teatareaにはposition:absolute; 親要素にはposition:relative; としてください
--追記
コメントを読んでいて勘違いされているなと思う点は、
テキストエリア内のテキストをスクロールしたいなら、テキストエリアにoverflow:scrollとしなければいけないのに、
親要素のoverflowでなんとかしようとしているように思います。
投稿2018/11/23 02:01
編集2018/11/23 13:53
総合スコア798
回答ありがとうございます。
> テキストエリアに内に書き込もうとして、
> キャレット位置を移動させているので、
> カーソルに追従して表示位置が変わりますがoverflow:hidden;の範囲内で
> 表示が移動しているだけではないでしょうか？
→1. 2.両方とも、同様の理由で`overflow:hidden`が効いていないように見えていました。
(`overflow:hidden`にしていたせいで、スクロールバーが表示されず、
てっきり`<textarea>`が意図しない所に移動してしまっているように感じていました)
> 表示場所の移動をしたくないならば、
> .mother textarea{}の中でposition: absolute;を position: fixed;に変更すれば良いです。
→試してみましたが、
この方法では親要素の範囲内にで設定した`overflow:hidden`が効かなくなってしまうようです。
(ie, edge, firefox, chromeで確認)
`<textarea>` の表示位置・画面専有領域は変わらず(「キャレット移動前 」の画像の状態)、
キャレットを範囲外に持っていくと、<textarea>内の文字列だけがスクロールするように
(まるで<textarea>の width, height が親要素の表示範囲内に強制的に縮められたかのように)
したいのですが、このような動作はCSSだけでは難しいでしょうか？
(javascriptで親要素のサイズと<textarea>の表示位置・サイズを取得して、
はみ出るようなら`<textarea>`のサイズを変更するようにできると思いますが、
CSSの設定で可能であればそうしたいのです、、)
textareaは width:50px; height:50px; のサイズでoverflow:scroll; にすればいいのでは？
回答に追記しておきますね
テキストエリアの位置が、親要素の左角からという意味でしたら
teatareaにはposition:absolute; 親要素にはposition:relative; としてください
> 親要素のoverflowでなんとかしようとしているように思います。
→そうですね、、
少し考え直してみようと思います
ありがとうございました
あなたの回答
tips
プレビュー
