home / samples / Gutter and Status Bar

Gutter and Status Bar

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

1. Default (gutter + status bar)

new Buffee(el)

Ln , Col |

2. No gutter

Omit the .buffee-gutter element from the template:

View template

<div class="buffee">
  <textarea class="buffee-clipboard-bridge"></textarea>
  <div class="no-select buffee-elements">
    <div class="buffee-gutter"></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">
  <textarea class="buffee-clipboard-bridge"></textarea>
  <div class="no-select buffee-elements">
    <div class="buffee-gutter"></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-elements in the template:

View template

<div class="buffee">
  <textarea class="buffee-clipboard-bridge"></textarea>
  <div class="buffee-status">...</div>
  <div class="no-select buffee-elements">
    <div class="buffee-gutter"></div>
    <div class="buffee-lines" tabindex="0">...</div>
  </div>
</div>

Ln , Col |

6. Gutter on right

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

View template

<div class="buffee">
  <textarea class="buffee-clipboard-bridge"></textarea>
  <div class="no-select buffee-elements">
    <div class="buffee-lines" tabindex="0">...</div>
    <div class="buffee-gutter"></div>
  </div>
  <div class="buffee-status">...</div>
</div>

Ln , Col |