لدي هذا الكود وهو عبارة عن محرر اكواد، ولكن عند تشغيل هذا الكود يملئ المحرر الشاشة كاملا وانا فقط احتاج ان يأخذ مساحه من الصفحه مع عناصر الصفحه الاخرى انا من اقوم بتحديد ابعادها
الكود
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>ACE Code Lens demo</title>
<style type="text/css" media="screen">
body {
overflow: hidden;
}
#editor {
margin: 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
<pre id="editor"></pre>
<!-- load ace -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.24.2/ace.js"
integrity="sha512-4gOhBb0ynE9P/pWgzXZA8AaPsS49vQpZI/AlBpUDKXH+AVZjEq6usVtcbrygkQkM0ztBvCt5AyLPZpN1Fcwnvg=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<!-- load ace code_lens extension -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.24.2/ext-code_lens.min.js"
integrity="sha512-81QPqjkXeCVN8i0OfBEGy3Ix+IwfmHwQ7D103quJuOs18KwgO6ra7L//1ZBU1LVMelSMweA0cAQSPAhXVa9zYQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script>
var editor = ace.edit('editor');
editor.session.setMode('ace/mode/html');
var commandId = 'describeCodeLens';
editor.commands.addCommand({
name: commandId,
exec: function (editor, args) {
// services available in `ctx`
alert('CodeLens command called with arguments ' + args);
},
});
editor.commands.addCommand({
name: 'clearCodeLenses',
exec: function (editor, args) {
editor.setOption('enableCodeLens', false);
codeLens.clear(editor.session);
},
});
editor.setOption('enableCodeLens', true);
codeLens.registerCodeLensProvider(editor, {
provideCodeLenses: function (session, callback) {
var p = [
{
start: { row: 0 },
command: {
id: 'clearCodeLenses',
title: 'Clear all code lenses',
arguments: [],
},
},
];
var l = session.getLength();
for (var row = 2; row < l; row++) {
var line = session.getLine(row);
var endColumn = line.length;
var m = /[{>]\s*$/.exec(line);
if (!m) continue;
p.push({
start: {
row: row,
column: m.index,
},
command: {
id: commandId,
title: 'Line ' + (row + 1),
arguments: ['line', row],
},
});
if (m.index < 10) continue;
p.push({
start: {
row: row,
column: m.index,
},
end: {
row: row,
column: m.index + 1,
},
command: {
id: commandId,
title: 'column ' + endColumn,
arguments: ['column', endColumn],
},
});
if (m.index < 30) continue;
p.push({
start: {
row: row,
column: m.index,
},
command: {
id: commandId,
title: 'Third Link',
arguments: ['3', row],
},
});
}
callback(null, p);
},
});
window.editor = editor;
window.codeLens = codeLens;
</script>
<!-- <script src="./show_own_source.js"></script> -->
</body>
</html>
لاحظ أنك تستخدم خاصية top و bottom معا وأيضا left و right للعنصر #editor وبما أنك تضع جميع القيم ب 0 إذا سيأخد المحرر طول وعرض الشاشية بأكملها.
ولديك حلين إذا أردت تحديد طول معين وعرض معين أيضا إذا يجب أن تستخدم top و left فقط ووضع طول للعنصر مثلا 150px أو غيرها .
والحل الثاني إذا أردت طول بالنسبة للصفحة لنفرض مثلا تريده أن يأخذ نصف الصفحة نضع خاصية bottom ب 50% هكذا :
#editor {
margin: 0;
position: absolute;
top: 0;
bottom: 50%;
left: 0;
right: 0;
}
ولكن لاحظ أنك تضع الخاصية position: absolute ولهذا إذا وضعت عنصر بعده ستجد أن العنصر أصبح خلف المحرر ولهذا لن يظهر ولذلك يجب عليك وضع margin للعنصر الأخر أو إستخدام الخاصية position: relative على عنصر ال body وتحديد طول لعنصر المحرر.
التعليقات