# j-ViewBox

> j-ViewBox: keeps a fixed percentage height; great usage for intranet applications

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: en
Content-SHA256: 02406169db5c40745ff2d8e3a087b131dfad0bab424271cb125a2bf2aedf7084
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

- keeps a fixed percentage height
- great usage for intranet applications
- supports `releasing`

__Configuration__:

- `height {Number}` a percentage of height
- `disabled {Boolean}` optional, can disable content with the layer
- `parent {String}` optional, a container with fixed height, can be `window`. Default value: `parent` element.
- `minheight {Number}` a minimal height in pixels (default: `0` - disabled)
- `scroll {Boolean}` enables vertical scrolling (default: `false` - disabled)
- `scrollbar {Boolean/String}` shows scrollbar (default: `true` or __new__: `native`)
- `delay {Number}` `msec.` resizes the box again if the value is changed according to the path (default: `100`)
- `visibleY {Boolean}` still shows the `Y` scrollbar (default: `false`)
- `visibleX {Boolean}` still shows the `X` scrollbar (default: `false`)
- `scrollto {String}` scrolls to top/bottom automatically if the `path` is changed (default: `EMPTY`, can be `top` or `bottom`)
- `margin {Number}` optional, a top/bottom margin together (supports `auto` which is counted from `offset.top`, default: `0`)
- `marginxs {Number}` optional, a top/bottom margin together for `xs` screen width
- `marginsm` optional, a top/bottom margin together for `sm` screen width
- `marginmd` optional, a top/bottom margin together for `md` screen width
- `marginlg` optional, a top/bottom margin together for `lg` screen width
- `invisible {Boolean}` if `true` then viewbox sets `invisible` class when is rendering (default: `true`)
- `scrollbarshadow {Boolean}` if `true` then the custom scrollbars will contain vertical shadow (default: `false`)
- `initdelay {Number}` removes the `inivisible` class after specified time (default: `250` ms)
- `centered {Boolean}` enables vertical and horitonzal centering for the content (default: `false`)
- `resizedelay {Number}` delay for resizing (default: `200`)
- __NEW__: `togglescrolled {String}` a DOM selector for the parent elements (it appends `ui-viewbox-scrolled` class when the viewbox is scrolled)

__Methods__:

- `component.scrolltop(val)` scrolls Y
- `component.scrollbottom(val)` scrolls Y from bottom side
- `component.resize()` resizes the container (it reacts on `resize` events automatically)
- `component.resizescrollbar()` resizes custom scrollbar (targeted for special cases)

Use it with `<ui-component name="viewbox">`. When the component is not loaded yet, jComponent downloads it on first use from the address in `DEF.fallback` (the Componentator CDN by default). Author: Peter Širka. Source: the Componentator components repository, MIT license.

```html example.html
<ui-component name="viewbox" config="height:30;parent:window" style="background-color:#F5F5F5">
	Always 30%
</ui-component>
<ui-component name="viewbox" config="height:70;parent:window" style="background-color:#E0E0E0">
	Always 70%
</ui-component>
```