GlassGhost GlassGhost - 6 months ago 39
HTML Question

How do you make Ace Editor Grow and fill a table cell in the same fashion a div does?

How do you make Ace Editor Grow and fill a table cell in the same fashion a div does? I just want

manuscript
editor div to Grow and fill in the same manner as the
Article
div makes the whole page grow in height.

Code is @https://github.com/viruliant/gh-template/

Demo is @https://viruliant.github.io/gh-template/

<!DOCTYPE html><html><head><meta charset="utf-8"><!--_________________--><title>
viruliant.github.io/gh-template
</title><meta name="description" content="Github Pages Template using client-side JS markdown for styling plaintext .md files">
<!--___________________________________________________________________Styles-->
<link rel="stylesheet" href="./jquery-ui-1.11.2.custom/jquery-ui.css" type="text/css" />
<link rel="stylesheet" href="./jquery-ui-1.11.2.custom/jquery-ui.theme.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="./default.css"/>
<style type="text/css">/* <![CDATA[ Custom Styling*/
#Page-Table { min-height:100%; width:100%; margin:0; }
#Page-Table, #Content, #Left, #Right, #Header, #Footer, #Manuscript, #Manuscript { height:100%;
top: 0; bottom: 0; left: 0; right: 0; position: relative;
border:0; margin:0; padding:0;
}
#Page-Table, #Left-cell, #Right-cell, #Content-cell, #Header-cell, #Footer-cell {
border:0; padding:0; border-collapse: collapse;
}
#Left-cell, #Right-cell { width:10%; }
#Content-cell { height: 100%; width:80%; }
#Header-cell, #Footer-cell { height:64px; }

#Header, #Footer { background: #FFF; }
/* ]]> */</style>
<!--__________________________________________________________________Scripts-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML-full"></script>
<script src="./ace-builds/src-min-noconflict/ace.js"></script>
<script src="./showdown/compressed/Showdown.min.js"></script>
<script src="./showdown/compressed/extensions/table.min.js"></script>
<!--<script src="requirejs/require.js"></script>-->
<script src="./default.js"></script><script>/* <![CDATA[ Custom JS*/window.onload = function() {
$( "#Content" ).tabs({ event: "mouseover" });// http://jqueryui.com/tabs/

//Setup Manuscript Editor
var Editor = ace.edit("Manuscript");
Editor.setTheme("ace/theme/twilight");
Editor.getSession().setMode("ace/mode/markdown");
//set contents of Manuscript to "index.md" file contents
jQuery.get('README.md', function(data) { Editor.setValue(data); });

//startup showdownjs to reset Article contents on Manuscript changes
var converter = new Showdown.converter({ extensions: ['table'] });
Editor.getSession().on('change', function(e) {
document.getElementById("Article").innerHTML = converter.makeHtml(Editor.getValue())
//MathJax.Hub.Queue(["Typeset",MathJax.Hub,"Article"])
//$("#Article").children().addClass("ui-tabs-panel ui-widget-content ui-corner-bottom");
});
// Editor.resize();
};/* ]]> */</script>
<!--____________________________________________________________--></head><body>
<table id="Page-Table"><!--http://i.stack.imgur.com/GAZTr.jpg-->
<tr><td id="Header-cell" colspan="3"><div id="Header"></div></td></tr>
<tr>
<td id="Left-cell"><div id="Left"></div></td>
<td id="Content-cell">
<div id="Content">
<ul><li><a href="#Article">Article</a></li>
<li><a href="#Manuscript">Manuscript</a></li></ul>
<div id="Article"></div>
<div id="Manuscript"></div>
</div>
</td>
<td id="Right-cell"><div id="Right"></div></td>
</tr>
<tr><td id="Footer-cell" colspan="3"><div id="Footer"></div></td></tr>
</table>
<!--___________________________________________________________--></body></html>


UPDATE: To test your changes you can just do a
git clone --recursive https://github.com/viruliant/gh-template/
and open the index.html OR run the nodejs file to get the readme.md line to work properly

Answer

To get the divs to behave the same, you probably just need to remove #manuscript from the styles where #article does not appear (or conversely add #article to the ones where #manuscript does).

The only one I see in your example is

#Page-Table, #Content, #Left, #Right, #Header, #Footer, #Manuscript, #Manuscript { height:100%;
    top: 0; bottom: 0; left: 0; right: 0; position: relative;
    border:0; margin:0; padding:0;
}

Just change it to

#Page-Table, #Content, #Left, #Right, #Header, #Footer { height:100%;
    top: 0; bottom: 0; left: 0; right: 0; position: relative;
    border:0; margin:0; padding:0;
}

Here's an example setting the height of the div and giving it a border so that you see it a little clearer within SO. You have some odd styling on your footer that overlaps the article, but that may work when you have the rest of your styles in -

$(document).ready(function() {
  $("#Content").tabs({
    event: "mouseover"
  });

  //Setup Manuscript Editor
  var Editor = ace.edit("Manuscript");
  Editor.setTheme("ace/theme/twilight");
  Editor.getSession().setMode("ace/mode/markdown");
  //set contents of Manuscript to "index.md" file contents
  //jQuery.get('README.md', function(data) {
  //  Editor.setValue("Test markdown");
  //});

  //startup showdownjs to reset Article contents on Manuscript changes
  //var converter = new Showdown.converter({
  //  extensions: ['table']
  //});
var doc = Editor.getSession().getDocument();
  Editor.getSession().on('change', function(e) {
    //document.getElementById("Article").innerHTML = converter.makeHtml(Editor.getValue())
      //MathJax.Hub.Queue(["Typeset",MathJax.Hub,"Article"])
      //$("#Article").children().addClass("ui-tabs-panel ui-widget-content ui-corner-bottom");
      // using current line-height of 14 pixels...
      $("#Manuscript").css({"height": (14 * doc.getLength()) + 'px'});
      Editor.resize();
  });
  //  Editor.resize();
});
#Page-Table {
  min-height: 100%;
  width: 100%;
  margin: 0;
}
#Page-Table,
#Content,
#Left,
#Right,
#Header,
#Footer {
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: relative;
  border: 0;
  margin: 0;
  padding: 0;
}
#Page-Table,
#Left-cell,
#Right-cell,
#Content-cell,
#Header-cell,
#Footer-cell {
  border: 0;
  padding: 0;
  border-collapse: collapse;
}
#Left-cell,
#Right-cell {
  width: 10%;
}
#Content-cell {
  height: 100%;
  width: 80%;
}
#Header-cell,
#Footer-cell {
  height: 64px;
}
#Header,
#Footer {
  background: #FFF;
}
#Article,
#Manuscript {
  border: 1px solid #ccc;
  border-width: 0 1px 1px 1px;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
  <script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML-full"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
</head>

<body>
  <table id="Page-Table">
    <tr>
      <td id="Header-cell" colspan="3">
        <div id="Header"></div>
      </td>
    </tr>
    <tr>
      <td id="Left-cell">
        <div id="Left"></div>
      </td>
      <td id="Content-cell">
        <div id="Content">
          <ul>
            <li><a href="#Article">Article</a>
            </li>
            <li><a href="#Manuscript">Manuscript</a>
            </li>
          </ul>
          <div id="Article"></div>
          <div id="Manuscript"></div>
        </div>
      </td>
      <td id="Right-cell">
        <div id="Right"></div>
      </td>
    </tr>
    <tr>
      <td id="Footer-cell" colspan="3">
        <div id="Footer"></div>
      </td>
    </tr>
  </table>
</body>

</html>