Jak zmusić edytora as do dostosowania się do div jego rodzica

Mam asa div wewnątrz innego div i chciałbym, aby edytor asów dostosował jego szerokość i wysokość do div rodzica. Wzywam editor.resize(), ale nic się nie dzieje.Jak zmusić edytora as do dostosowania się do div jego rodzica

<!DOCTYPE html> 
<html lang="en" style="height: 100%"> 
<head> 
<title>ACE in Action</title> 
<style type="text/css" media="screen"> 
    #editor { 
     top: 0; 
     right: 0; 
     bottom: 0; 
     left: 0; 
     height: 100px; 
    } 
</style> 
</head> 
<body style="height: 100%"> 
<div style="background-color: red; height: 100%; width: 100%;"> 
<div id="editor">function foo(items) { 
    var x = "All this is syntax highlighted"; 
    return x; 
}</div> 
</div> 

<script src="ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script> 
<script> 
    var editor = ace.edit("editor"); 
    editor.setTheme("ace/theme/monokai"); 
    editor.getSession().setMode("ace/mode/javascript"); 

    editor.resize(); 
</script> 
</body> 
</html>

Źródło

2015-02-28 user441521

Możesz osiągnąć to, co chcesz, na dwa sposoby. Stworzyłem jsfiddle pokazujący css i javascript używane do zmiany rozmiaru edytora as do jego kontenera.

Używane narzędzie css powoduje, że edytor przyjmuje szerokość i wysokość kontenera, dzięki czemu editor.resize() może prawidłowo obliczyć rozmiar edytora.

Polecam poniższe, aby zadziałał editor.resize().

<style type="text/css" media="screen"> 
    #editor { 
     width: 100%; 
     height: 100%; 
    } 
</style>

Jednak jeśli chcesz utrzymać przy użyciu bieżącego css masz na #editor dodaje będzie działać.

<style type="text/css" media="screen"> 
    #editor { 
     position: absolute; /* Added */ 
     top: 0; 
     right: 0; 
     bottom: 0; 
     left: 0; 
    } 
</style>

i dodać position: relative; do pojemnika tak, że absolutnie umieszczony edytor jest prawidłowo umieszczony wewnątrz jego kontenera. , Jak to działa odsyłam do Absolute positioning inside relative positioning.

Źródło

2015-09-24 01:05:09 scain

logiki dostosowuje wysokość, ale nie szerokości. dobrze? –

Należy dostosować zarówno wysokość, jak i szerokość. Do tego służy 100% zarówno wysokości, jak i szerokości. – scain

Korzystanie jquery-ace Udało mi to po prostu za pomocą:

$('#php_code').ace({ 
     theme: 'chrome', 
     lang: 'php', 
     width: '100%', 
     height: '300px' 
    })

Źródło

2017-07-17 02:19:10 kjdion84

Możesz to zrobić bez jquery w ten sam sposób, po prostu ustawiając 'width' na' '100%' ' –

Jak zmusić edytora as do dostosowania się do div jego rodzica

Odpowiedz

Powiązane problemy