home / samples / Editor Sizing

Editor Sizing

By default, the editor auto-fits to its container. Use rows to fix the number of visible rows.

1. Auto-rows, auto-cols (recommended)

.buffee { width: 960px; height: 300px; padding: 20px; }

new Buffee(el, {})

Default behavior: auto-fit rows and cols. Drag bottom-right to resize.

2. Fixed-rows, auto-cols

.buffee { width: 640px; padding: 20px; }

new Buffee(el, { rows: 8 })

Fixed 8 rows, columns auto-calculated from width. Drag to resize width.

3. rows smaller than container

.buffee { height: 400px; padding: 20px; }

new Buffee(el, { rows: 5 })

Container is 400px tall, but editor only shows 5 rows. rows takes precedence instead of autofill remaining space.

4. rows larger than container (clipped)

.buffee { height: 400px; padding: 20px; overflow: hidden; }

new Buffee(el, { rows: 20 })

Container is 400px tall, but rows requests 20 rows. Use overflow: hidden to clip.

5. rows larger than container (scrollable)

.buffee { height: 400px; padding: 20px; overflow: scroll; display: block; }

new Buffee(el, { rows: 20 })

Container is 400px tall, but rows requests 20 rows. Use overflow: scroll and display: block to scroll.

6. Auto-rows, fixed-cols (status bar stretches)

.buffee { height: 300px; padding: 20px; }

new Buffee(el, { cols: 40 })

Fixed 55 columns, rows auto-calculated from height. Note: status bar stretches to container width while content is narrower.

7. Auto-rows, fixed-cols (fit-content)

.buffee { height: 300px; padding: 20px; width: fit-content; }

new Buffee(el, { cols: 40 })

Same as example 6, but with width: fit-content so the container shrinks to match content width.

8. Auto-rows, fixed-cols (contain: inline-size)

.buffee { height: 300px; padding: 20px; width: fit-content; }

.buffee-status { contain: inline-size; }

new Buffee(el, { cols: 20 })

When cols is small, status line content may be wider than editor. Use contain: inline-size on status bar so gutter + lines determine container width.