cell_resizer and the notebook CSS

edit

You can override javascript functions by simply redefining them inside an html() block, or in the actual html of the worksheet. I believe the function you are looking for is cell_input_resize() in the Contents/Resources/sage/devel/sagenb/sagenb/data/sage/js/notebook_lib.js file.

Doubtless we could use a prepackaged solution for auto-sized input boxes these days. This is old code.

I ran into the same problem as G B when modifying the layout of the notebook with notebook.css. Based on Jason Grout's answer, I managed to solve the problem by editing cell_input_resize() in Contents/Resources/sage/devel/sagenb/sagenb/data/sage/js/notebook_lib.js file.

First, paste the getStyle function from http://robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/ into notebook_lib.js. Second, inside the cell_input_resize function find this line

    resizer.style.width = cell_input.offsetWidth + 'px';

and insert one line before it as shown here

    resizer.style.fontSize = getStyle(cell_input, "font-size");
    resizer.style.width = cell_input.offsetWidth + 'px';

The size of the text area should now track the size of the font set in notebook.css. If you don't see any impact after editing notebook_lib.js, you may need to both flush your browser cache (e.g "Reset Safari") and restart SAGE so the new notebook_lib.js is read in.

Note: For me, the SAGE notebook has too large fonts and too much whitespace, especially on a MacBook. Although there are undoubtedly more elegant and more modern solutions, I decided to just hack the javascript and css to get further control. For example, to reduce the size of hidden output cells, I did the following:

• Use Safari's Web Inspector to identify the elements that needed modified classes, in this example they turned out to have classes div.cell_output_div and td.output_cell.
• Create new classes in notebook.css, e.g. div.cell_output_div_hidden and td.output_cell_hidden, that define the desired new height (e.g. "height: 6px") for hidden output cells.
• Paste the upTo function from http://stackoverflow.com/a/11644501 into notebook_lib.js.

• Replace notebook_lib.js function cycle_cell_output_type with modified version:

  function cycle_cell_output_type(id) {
      /*
      When called the cell with given id has its output cycled from one
      type to the next.  There are three types: word wrap, no word wrap,
      hidden.
      INPUT:
          id -- integer or string; cell id
      */
      var cell_div;
      id = toint(id);
      cell_div = get_element('cell_div_output_' + id);
      parent_div = upTo(cell_div, "div")
      parent_td = upTo(cell_div, "td")
      if (cell_div.className === 'cell_div_output_hidden' ||
          cell_div.className === 'cell_div_output_running') {
          cell_output_set_type(id, 'wrap');
          parent_div.className = "cell_output_div"
          parent_td.className = "output_cell"
          return;
      }
      if (cell_div.className === 'cell_div_output_wrap') {
          cell_output_set_type(id, 'nowrap');
      } else {
          cell_output_set_type(id, 'hidden');
          parent_div.className = "cell_output_div_hidden"
          parent_td.className = "output_cell_hidden"
      }
  }
  

Now when I hide an output cell, it is only 6px high, which creates a more compact notebook.

Note: I have not checked whether this works on browsers other than Safari.