user441521
Reputation: 6998
Ace editor inside tab div not resizing with browser window (demo code inside)
So ultimately I'm trying to do this in node-webkit. I experience the similar issue there but this allows me to show it on the web side and I'm not sure what's going on.
If you go to the following link below but in a browser that is not maximized, then on the output side go into the code editor part and just press enter for 60 lines, then maximize your browser window you'll notice the scrolling and line numbers don't adjust to the container. However if you resize the output window area it'll adjust correctly then. My question is how to make this adjustment happen when the browser window is resized as I suspect that'll help me in doing the same in node-webkit.
http://jsbin.com/hekoqupuso/1/edit?html,css,js,output
Upvotes: 0
Views: 769
Answers (1)
a user
Reputation: 24159
You need to make sure you set correct size on the node you use for ace and to call editor.resize() when layout changes. Like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="en" />
<title>Complex Layout Demo</title>
<link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<link rel="stylesheet" type="text/css" href="http://layout.jquery-dev.com/demos/css/complex.css">
<script type="text/javascript" src="http://layout.jquery-dev.com/lib/js/jquery-latest.js"></script>
<script type="text/javascript" src="http://layout.jquery-dev.com/lib/js/jquery-ui-latest.js"></script>
<script type="text/javascript" src="http://layout.jquery-dev.com/lib/js/jquery.layout-latest.js"></script>
<script src="http://ajaxorg.github.io/ace-builds/src/ace.js"></script>
<script src="http://ajaxorg.github.io/ace-builds/src/ext-language_tools.js"></script>
<style>
#editor { position: absolute; top: 50px; left: 0; right: 0; bottom: 0;}
</style>
<script type="text/javascript">
/*
* complex.html
*
* This is a demonstration page for the jQuery layout widget
*
* NOTE: For best code readability, view this with a fixed-space font and tabs equal to 4-chars
*/
var outerLayout, innerLayout;
/*
*#######################
* ON PAGE LOAD
*#######################
*/
$(function(){
// create the OUTER LAYOUT
outerLayout = $("body").layout( layoutSettings_Outer );
var editor = window.editor = ace.edit("editor");
$("#tabs").tabs();
//editor.setTheme("ace/theme/chrome");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/lua");
/*******************************
*** CUSTOM LAYOUT BUTTONS ***
*******************************
*
* Add SPANs to the east/west panes for customer "close" and "pin" buttons
*
* COULD have hard-coded span, div, button, image, or any element to use as a 'button'...
* ... but instead am adding SPANs via script - THEN attaching the layout-events to them
*
* CSS will size and position the spans, as well as set the background-images
*/
// BIND events to hard-coded buttons in the NORTH toolbar
outerLayout.addToggleBtn( "#tbarToggleNorth", "north" );
outerLayout.addOpenBtn( "#tbarOpenSouth", "south" );
outerLayout.addCloseBtn( "#tbarCloseSouth", "south" );
outerLayout.addPinBtn( "#tbarPinWest", "west" );
outerLayout.addPinBtn( "#tbarPinEast", "east" );
// save selector strings to vars so we don't have to repeat it
// must prefix paneClass with "body > " to target ONLY the outerLayout panes
var westSelector = "body > .ui-layout-west"; // outer-west pane
var eastSelector = "body > .ui-layout-east"; // outer-east pane
// CREATE SPANs for pin-buttons - using a generic class as identifiers
$("<span></span>").addClass("pin-button").prependTo( westSelector );
$("<span></span>").addClass("pin-button").prependTo( eastSelector );
// BIND events to pin-buttons to make them functional
outerLayout.addPinBtn( westSelector +" .pin-button", "west");
outerLayout.addPinBtn( eastSelector +" .pin-button", "east" );
// CREATE SPANs for close-buttons - using unique IDs as identifiers
$("<span></span>").attr("id", "west-closer" ).prependTo( westSelector );
$("<span></span>").attr("id", "east-closer").prependTo( eastSelector );
// BIND layout events to close-buttons to make them functional
outerLayout.addCloseBtn("#west-closer", "west");
outerLayout.addCloseBtn("#east-closer", "east");
// DEMO HELPER: prevent hyperlinks from reloading page when a 'base.href' is set
$("a").each(function () {
var path = document.location.href;
if (path.substr(path.length-1)=="#") path = path.substr(0,path.length-1);
if (this.href.substr(this.href.length-1) == "#") this.href = path +"#";
});
});
/*
*#######################
* OUTER LAYOUT SETTINGS
*#######################
*
* This configuration illustrates how extensively the layout can be customized
* ALL SETTINGS ARE OPTIONAL - and there are more available than shown below
*
* These settings are set in 'sub-key format' - ALL data must be in a nested data-structures
* All default settings (applied to all panes) go inside the defaults:{} key
* Pane-specific settings go inside their keys: north:{}, south:{}, center:{}, etc
*/
var layoutSettings_Outer = {
name: "outerLayout" // NO FUNCTIONAL USE, but could be used by custom code to 'identify' a layout
// options.defaults apply to ALL PANES - but overridden by pane-specific settings
, defaults: {
size: "auto"
, minSize: 50
, paneClass: "pane" // default = 'ui-layout-pane'
, resizerClass: "resizer" // default = 'ui-layout-resizer'
, togglerClass: "toggler" // default = 'ui-layout-toggler'
, buttonClass: "button" // default = 'ui-layout-button'
, contentSelector: ".content" // inner div to auto-size so only it scrolls, not the entire pane!
, contentIgnoreSelector: "span" // 'paneSelector' for content to 'ignore' when measuring room for content
, togglerLength_open: 35 // WIDTH of toggler on north/south edges - HEIGHT on east/west edges
, togglerLength_closed: 35 // "100%" OR -1 = full height
, hideTogglerOnSlide: true // hide the toggler when pane is 'slid open'
, togglerTip_open: "Close This Pane"
, togglerTip_closed: "Open This Pane"
, resizerTip: "Resize This Pane"
// effect defaults - overridden on some panes
, fxName: "slide" // none, slide, drop, scale
, fxSpeed_open: 750
, fxSpeed_close: 1500
, fxSettings_open: { easing: "easeInQuint" }
, fxSettings_close: { easing: "easeOutQuint" }
}
, north: {
spacing_open: 1 // cosmetic spacing
, togglerLength_open: 0 // HIDE the toggler button
, togglerLength_closed: -1 // "100%" OR -1 = full width of pane
, resizable: false
, slidable: false
// override default effect
, fxName: "none"
}
, south: {
maxSize: 200
, size: 200
, spacing_closed: 21 // HIDE resizer & toggler when 'closed'
, slidable: true // REFERENCE - cannot slide if spacing_closed = 0
, initClosed: false
// CALLBACK TESTING...
//, onhide_start: function () { return confirm("START South pane hide \n\n onhide_start callback \n\n Allow pane to hide?"); }
//, onhide_end: function () { alert("END South pane hide \n\n onhide_end callback"); }
//, onshow_start: function () { return confirm("START South pane show \n\n onshow_start callback \n\n Allow pane to show?"); }
//, onshow_end: function () { alert("END South pane show \n\n onshow_end callback"); }
//, onopen_start: function () { return confirm("START South pane open \n\n onopen_start callback \n\n Allow pane to open?"); }
//, onopen_end: function () { alert("END South pane open \n\n onopen_end callback"); }
//, onclose_start: function () { return confirm("START South pane close \n\n onclose_start callback \n\n Allow pane to close?"); }
//, onclose_end: function () { alert("END South pane close \n\n onclose_end callback"); }
//, onresize_start: function () { return confirm("START South pane resize \n\n onresize_start callback \n\n Allow pane to be resized?)"); }
//, onresize_end: function () { alert("END South pane resize \n\n onresize_end callback \n\n NOTE: onresize_start event was skipped."); }
}
, west: {
size: 250
, spacing_closed: 21 // wider space when closed
, togglerLength_closed: 21 // make toggler 'square' - 21x21
, togglerAlign_closed: "top" // align to top of resizer
, togglerLength_open: 0 // NONE - using custom togglers INSIDE west-pane
, togglerTip_open: "Close West Pane"
, togglerTip_closed: "Open West Pane"
, resizerTip_open: "Resize West Pane"
, slideTrigger_open: "click" // default
, initClosed: false
// add 'bounce' option to default 'slide' effect
, fxSettings_open: { easing: "easeOutBounce" }
}
, east: {
size: 250
, spacing_closed: 21 // wider space when closed
, togglerLength_closed: 21 // make toggler 'square' - 21x21
, togglerAlign_closed: "top" // align to top of resizer
, togglerLength_open: 0 // NONE - using custom togglers INSIDE east-pane
, togglerTip_open: "Close East Pane"
, togglerTip_closed: "Open East Pane"
, resizerTip_open: "Resize East Pane"
, slideTrigger_open: "mouseover"
, initClosed: false
// override default effect, speed, and settings
, fxName: "drop"
, fxSpeed: "normal"
, fxSettings: { easing: "" } // nullify default easing
}
, center: {
paneSelector: "#mainContent" // sample: use an ID to select pane instead of a class
, minWidth: 200
, minHeight: 200
, onresize_end: function () { editor.resize() }
}
};
</script>
</head>
<body style="height: 100%">
<input style="display: none" id="projectDialog" type="file" />
<div class="ui-layout-west">
<div class="header">Project Explorer</div>
<div class="content">
<!-- This is the project structure. We start with the Scripts and Shaders folder and dynamically add the tree structure in code above when they open a project. Starts out invisible until project selected. -->
<div class="css-treeview" id="projectTree" style="display: none;">
<ul>
<li><input type="checkbox" id="projectRoot" /><label for="ProjectRoot" id="projectRootLabel">ProjectName</label>
<ul>
<li><input type="checkbox" id="Scripts" /><label for="Scripts">Scripts</label>
<ul>
<li>Test.lua</li>
</ul>
</li>
<li><input type="checkbox" id="Shaders" /><label for="Shaders">Shaders</label>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="ui-layout-north">
<ul class="toolbar">
<li id="tbarToggleNorth" class="first"><span></span>TODO: Toolbar here</li>
<li id="tbarOpenSouth"><span></span>TODO: Toolbar icons here</li>
</ul>
</div>
<div class="ui-layout-south">
<div class="header">Outer - South</div>
<div class="content">
TODO: Debug/console/error/warning tabs here
</div>
</div>
<div id="mainContent" style="padding: 0; height: 100%; overflow-y: hidden;">
<div class="ui-layout-center" style="height: 100%">
<div class="ui-layout-content" style="padding: 0; height: 100%;">
<div id="tabs" style="padding: 0; margin: 0; height: 100%">
<ul>
<li><a href="#App_lua">App.lua</a></li>
<li><a href="#AnimationManager_lua">AnimationManager.lua</a></li>
<li><a href="#AI_lua">AI.lua</a></li>
</ul>
<div id="App_lua" style="background-color: orange; padding: 0; margin-left: 0px;">
<div id="editor" >function App:Start()
end
function App:Loop()
end</div>
</div>
<div id="AnimationManager_lua">
File 2
</div>
<div id="AI_lua">
File 3
</div>
</div>
</div>
</div>
</div>
</body>
</html> Upvotes: 2
Related Questions
- Making ACE editor resizable
- ace editor width change loses content
- Ace Editor is not resizing with the container div
- How to get the ace editor to adjust to its parent div
- Can't see ace editor when using angular-ui-ace
- How to make ACE Editor manually resizable just like html's textarea
- Ace editor incorrectly sets its height until width is updated (Chrome)
- Angular2 beta Ace editor directive: unable to resize editor so that it's visible
- javascript Ace editor spaces turns into tabs?
- Editor text resizing issue