MultilineTextBox CSS Styling

Smart.MultilineTextBox element represents multiline editable text box, supported different display modes.

Required files

Smart.MultilineTextBox requires the following scripts to be referenced on a page in order for the custom element to be successfully registered and to work correctly:

  • smart.element.js -- this is the base file that defines the common architecture of all Smart custom elements. It is part of the repository ni-kismet/smart-element.
  • smart.textbox.js -- this file defines the functionality of the Smart.TextBox custom element. Smart.MaskedTextBox inherits Smart.TextBox custom element.
  • smart.scrollbar.js -- this file defines the functionality of the Smart.ScrollBar custom element.
  • smart.multilinetextbox.js -- this file defines the functionality of the Smart.MultilineTextBox custom element.

Smart.MultilineTextBox also requires the following style sheet in order to be displayed correctly.

  • smart.base.css -- the base style sheet file.

Initialization

To initialize (instantiate) a Smart.MultilineTextBox custom element, insert the following tag in an HTML page:

<smart-multiline-text-box></smart-multiline-text-box>

To set properties of the custom element initially, do so by setting the respective attributes of the tag, e.g.:

<smart-multiline-text-box resizable></smart-multiline-text-box>

Getting and setting properties dynamically

Before accessing the custom element's API in JavaScript, the custom element's instance has to be retrieved:

let customElement = document.querySelector('smart-multiline-text-box');

Properties are represented as members of the custom element's instance object and can be accessed as such.

Here is an example showing how to get a property dynamically:

let resizable = customElement.resizable;

Here is an example showing how to set a property dynamically:

customElement.resizable = true;

Calling methods

Before accessing the custom element's API in JavaScript, the custom element's instance has to be retrieved:

let customElement = document.querySelector('smart-multiline-text-box');

Methods are represented as members of the custom element's instance object and can be accessed as such.

Here is an example showing how to call a method:

customElement.focus();

Styling (CSS API)

Smart HTML Elements use a pair of css files - smart.base.css and smart.[theme name].css. The base stylesheet creates the styles related to the element's layout like margin, padding, border-width, position. The second CSS file applies the HTML Element's colors, fonts, borders and backgrounds. The smart.base.css should be included before the second CSS file.

smart-multiline-text-box uses the following CSS variables:

  • --smart-multiline-text-box-scroll-bar-size - Used to set the size of the scrollbars (width of the vertical and height of the horizontal). Default value is 12px;