home / samples / Gutter and Status Bar

Gutter and Status Bar

Gutter visibility: include/omit .buffee-rail element. Status bar: include/omit .buffee-status element.

1. Default (gutter + status bar)

new Buffee(el)

Ln , Col |

2. No gutter

Omit the .buffee-rail element from the template:

View template 
<div class="buffee">
  <div class="no-select buffee-pane">
    <div class="buffee-rail"></div>
    <div class="buffee-lines" tabindex="0">...</div>
  </div>
  <div class="buffee-status">...</div>
</div>
Ln , Col |

3. No status line

Omit the .buffee-status element from the template:

View template 
<div class="buffee">
  <div class="no-select buffee-pane">
    <div class="buffee-rail"></div>
    <div class="buffee-lines" tabindex="0">...</div>
  </div>
  <div class="buffee-status">...</div>
</div>

4. Status line on top

Place .buffee-status before .buffee-pane in the template:

View template 
<div class="buffee">
  <div class="buffee-status">...</div>
  <div class="no-select buffee-pane">
    <div class="buffee-rail"></div>
    <div class="buffee-lines" tabindex="0">...</div>
  </div>
</div>
Ln , Col |

5. Selection range display

Use BuffeeStatusLine(editor, { showSelection: true }) to show selection range instead of just cursor position. Try selecting text below:

- |

6. Gutter on right

Place .buffee-rail after .buffee-lines in the template:

View template 
<div class="buffee">
  <div class="no-select buffee-pane">
    <div class="buffee-lines" tabindex="0">...</div>
    <div class="buffee-rail"></div>
  </div>
  <div class="buffee-status">...</div>
</div>
Ln , Col |