Revision history [back]

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.

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';

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.