# 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.

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.