Responsive Containers

#### Search Results

Search

# Responsive Containers

- BMOBILE:CARD

- BMOBILE:CARDCONTAINER

- BMOBILE:COL

- BMOBILE:PANEL

- BMOBILE:ROW

- BMOBILE:CONTAINER

- BMOBILE:FORM, BMOBILE:FORMINLINE

- BMOBILE:FORMAREA

- BMOBILE:FORMGROUP

- BMOBILE:LISTGROUP

- BMOBILE:SIDEBARCONTAINER, BMOBILE:SIDEBAR, BMOBILE:SIDEBARGROUP, BMOBILE:HORIZONTALBAR, BMOBILE:CONTENT

- BMOBILE:TABPANE, BMOBILE:VERTICALTABPANE and BMOBILE:TAB

- BMOBILE:TABSUBPAGES, BMOBILE:VERTICALTABSUBPAGES, BMOBILE:STRAIGHTTAB and BMOBILE:PAGER

## BMOBILE:CARD

- BMOBILE:CARDBODY

- BMOBILE:CARDFOOTER

- BMOBILE:CARDHEADER

A card is a box with an optional header, an optional footer, an optional image, and a body with textual content, a list group, or both.

You can arrange multiple cards in a BMOBILE:CARDCONTAINER. You can also add them to other controls into a BMOBILE:ROW.

Basic
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
imageurl | URL of image that is displayed inside the control. Any image type (.gif, .jpg, ...) that your browser does understand is valid. Use the following options to specify the URL: (A) Define the URL relative to your page. Your page is generated directly into your project's folder. Specifiying "images/xyz.gif" will point into a directory parallel to your page. Specifying "../HTMLBasedGUI/images/new.gif" will point to an image of a neighbour project. (B) Define a complete URL, like "http://www.softwareag.com/images/logo.gif". | Optional |
imageurlprop | Name of adapter parameter that provides as value the URL of the image that is shown inside the control. | Optional |
visibleprop | Name of the adapter parameter that provides the information if this control is displayed or not. As consequence you can control the visibility of the control dynamically. | Optional |
Appearance
invisiblemode | If the visibility of the control is determined dynamically by an adapter property then there are two rendering modes if the visibility is "false": (1) "invisible": the control is not visible. (2)"cleared": the control is not visible but it still occupies space. | Optional | invisible disabled cleared
styleclasses | CSS style classes separated by a blank. | Optional | bg-light ml-* mr-* mx-* mx-sm-* mx-md-* mx-lg-* mx-xl-* mt-* mb-* my-* border border-primary border border-secondary border border-dark border border-light
style | CSS style definition that is directly passed into this control. With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are: border: 1px solid #FF0000 background-color: #808080 You can combine expressions by appending and separating them with a semicolon. Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function. | Optional |
imagestyleclasses | CSS style classes separated by a blank. | Optional | img-circle img-rounded img-thumbnail
imagestyle | CSS style definition that is directly passed into this control. With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are: border: 1px solid #FF0000 background-color: #808080 You can combine expressions by appending and separating them with a semicolon. Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function. | Optional |
imageposition | The position of the image within it's container. Valid values are "top" and "bottom". | Optional | top bottom left right
imageoverlay | If set to TRUE the image will be used as card background and overlayed with the card body. | Optional | true false
tabindex | Index that defines the tab order of the control. Controls are selected in increasing index order and in source order to resolve duplicates. | Optional | -1 0 1 2 5 10 32767

### BMOBILE:CARDBODY

A cardbody renders contextual content in a card.

Basic
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
name | Text that is displayed inside the control. Please do not specify the name when using the multi language management - but specify a "textid" instead. | Optional |
subname | Text that is displayed inside the control. Please do not specify the name when using the multi language management - but specify a "textid" instead. | Optional |
text | Text that is displayed inside the control. Please do not specify the name when using the multi language management - but specify a "textid" instead. | Optional |
nameprop | Name of adapter parameter which dynamically provides the text that is shown inside the control. | Optional |
subnameprop | Name of adapter parameter which dynamically provides the text that is shown inside the control. | Optional |
textprop | Name of adapter parameter which dynamically provides the text that is shown inside the control. | Optional |
Appearance
styleclasses | CSS style classes separated by a blank. | Optional | bg-light ml-* mr-* mx-* mx-sm-* mx-md-* mx-lg-* mx-xl-* mt-* mb-* my-* border border-primary border border-secondary border border-dark border border-light
style | CSS style definition that is directly passed into this control. With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are: border: 1px solid #FF0000 background-color: #808080 You can combine expressions by appending and separating them with a semicolon. Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function. | Optional |
namestyleclasses | CSS style classes separated by a blank. | Optional | font-italic font-weight-bold font-weight-bolder font-weight-light font-weight-lighter text-lowercase text-uppercase text-danger text-info text-primary text-secondary text-success text-warning
namestyle | CSS style definition that is directly passed into this control. With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are: border: 1px solid #FF0000 background-color: #808080 You can combine expressions by appending and separating them with a semicolon. Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function. | Optional |
subnamestyleclasses | CSS style classes separated by a blank. | Optional | font-italic font-weight-bold font-weight-bolder font-weight-light font-weight-lighter text-lowercase text-uppercase text-danger text-info text-primary text-secondary text-success text-warning
subnamestyle | CSS style definition that is directly passed into this control. With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are: border: 1px solid #FF0000 background-color: #808080 You can combine expressions by appending and separating them with a semicolon. Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function. | Optional |
textstyleclasses | CSS style classes separated by a blank. | Optional | font-italic font-weight-bold font-weight-bolder font-weight-light font-weight-lighter text-lowercase text-uppercase text-danger text-info text-primary text-secondary text-success text-warning
textstyle | CSS style definition that is directly passed into this control. With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are: border: 1px solid #FF0000 background-color: #808080 You can combine expressions by appending and separating them with a semicolon. Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function. | Optional |

### BMOBILE:CARDFOOTER

An optional footer for cards.

Basic
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
nameprop | Name of adapter parameter which dynamically provides the text that is shown inside the control. | Optional |
name | Text that is displayed inside the control. Please do not specify the name when using the multi language management - but specify a "textid" instead. | Optional |
textid | Multi language dependent text that is displayed inside the control. The "textid" is translated into a corresponding string at runtime. Do not specify a "name" inside the control if specifying a "textid". | Optional |
straighttext | If the text of the control contains HTML tags then these are by default interpreted by the browser. Specifiying STRAIGHTTEXT as "true" means that the browser will directly render the characters without HTML interpretation. Example: if you want to output the source of an HTML text then STRAIGHTTEXT should be set to "true". | Optional | true false
Appearance
styleclasses | CSS style classes separated by a blank. | Optional | d-none d-md-block d-none d-lg-block text-uppercase font-italic font-weight-bold font-weight-bolder font-weight-light font-weight-lighter
style | CSS style definition that is directly passed into this control. With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are: border: 1px solid #FF0000 background-color: #808080 You can combine expressions by appending and separating them with a semicolon. Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function. | Optional |

### BMOBILE:CARDHEADER

An optional header for cards.

Basic
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
nameprop | Name of adapter parameter which dynamically provides the text that is shown inside the control. | Optional |
name | Text that is displayed inside the control. Please do not specify the name when using the multi language management - but specify a "textid" instead. | Optional |
textid | Multi language dependent text that is displayed inside the control. The "textid" is translated into a corresponding string at runtime. Do not specify a "name" inside the control if specifying a "textid". | Optional |
straighttext | If the text of the control contains HTML tags then these are by default interpreted by the browser. Specifiying STRAIGHTTEXT as "true" means that the browser will directly render the characters without HTML interpretation. Example: if you want to output the source of an HTML text then STRAIGHTTEXT should be set to "true". | Optional | true false
Appearance
styleclasses | CSS style classes separated by a blank. | Optional | d-none d-md-block d-none d-lg-block text-uppercase font-italic font-weight-bold font-weight-bolder font-weight-light font-weight-lighter
style | CSS style definition that is directly passed into this control. With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are: border: 1px solid #FF0000 background-color: #808080 You can combine expressions by appending and separating them with a semicolon. Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function. | Optional |

## BMOBILE:CARDCONTAINER

A BMOBILE:CARDCONTAINER contains several cards. The following options are supported to arrange the cards in the container:

#### Card Decks

The cards are rendered as a grid of cards with equal height and width. On small devices the cards are arranged vertically. On medium and large devices, cards are arranged horizontally in one line.

#### Card Groups

The arrangement of the cards is the same as for card decks. The only difference is that there are no gaps between the cards.

#### Card Columns

You can create masonry-like grid of cards. The cards can be of different sizes. Simply add several cards to the container, and they will be arranged – including line breaks – automatically depending on the number of cards and the device.

Basic
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
visibleprop | Name of the adapter parameter that provides the information if this control is displayed or not. As consequence you can control the visibility of the control dynamically. | Optional |
invisiblemode | This property has three possible values: (1) "invisible": the control is not visible without occupying any space. (2) "disabled": the control is deactivated: it is "grayed" and does not show any roll over effects any more. (3)"cleared": the control is not visible but it still occupies space. | Optional | invisible disabled cleared
Appearance
styleclasses | CSS style classes separated by a blank. | Optional | bg-light ml-* mr-* mx-* mx-sm-* mx-md-* mx-lg-* mx-xl-* mt-* mb-* my-* border border-primary border border-secondary border border-dark border border-light
style | CSS style definition that is directly passed into this control. With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are: border: 1px solid #FF0000 background-color: #808080 You can combine expressions by appending and separating them with a semicolon. Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function. | Optional |

## BMOBILE:COL

BMOBILE: COL supports the responsive grid system of Bootstrap.

#### Properties

Basic
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
invisiblemode | This property has three possible values: (1) "invisible": the control is not visible without occupying any space. (2) "disabled": the control is deactivated: it is "grayed" and does not show any roll over effects any more. (3)"cleared": the control is not visible but it still occupies space. | Optional | invisible disabled cleared
visibleprop | Name of the adapter parameter that provides the information if this control is displayed or not. As consequence you can control the visibility of the control dynamically. | Optional |
styleclasses | CSS style classes separated by a blank. | Optional | col-auto col col-* col-sm-* col-md-* col-lg-* col-xl-* offset-* offset-sm-* offset-md-* offset-lg-* offset-xl-* mx-auto btn-group btn-group-vertical
style | CSS style definition that is directly passed into this control. With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are: border: 1px solid #FF0000 background-color: #808080 You can combine expressions by appending and separating them with a semicolon. Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function. | Optional |

## BMOBILE:PANEL

BMOBILE:PANEL supports the responsive grid system of Bootstrap.

#### Properties

Basic
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
foldable | The "folding"-function that is available by clicking on the title of the area can be switched off ("false"). "True" is the default. | Optional | true false
foldedprop | Name of adapter parameter which controls whether the content of the ROWAREA is folded (true) or displayed (false). By using this property you can dynamically control the "folded"-status of the control at runtime. | Optional |
visibleprop | Name of the adapter parameter that provides the information if this control is displayed or not. As consequence you can control the visibility of the control dynamically. | Optional |
tabindex | Index that defines the tab order of the control. Controls are selected in increasing index order and in source order to resolve duplicates. | Optional | -1 0 1 2 5 10 32767
Appearance
invisiblemode | If the visibility of the control is determined dynamically by an adapter property then there are two rendering modes if the visibility is "false": (1) "invisible": the control is not visible. (2)"cleared": the control is not visible but it still occupies space. | Optional | invisible disabled cleared
styleclasses | CSS style classes separated by a blank. | Optional | panel-warning panel-success panel-danger panel-info ml-* mr-* mx-*
style | CSS style definition that is directly passed into this control. With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are: border: 1px solid #FF0000 background-color: #808080 You can combine expressions by appending and separating them with a semicolon. Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function. | Optional |
tabindex | (already explained above) |  |

## BMOBILE:ROW

BMOBILE:ROW supports the responsive grid system of Bootstrap.

#### Properties

Basic
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
invisiblemode | This property has three possible values: (1) "invisible": the control is not visible without occupying any space. (2) "disabled": the control is deactivated: it is "grayed" and does not show any roll over effects any more. (3)"cleared": the control is not visible but it still occupies space. | Optional | invisible disabled cleared
visibleprop | Name of the adapter parameter that provides the information if this control is displayed or not. As consequence you can control the visibility of the control dynamically. | Optional |
styleclasses | CSS style classes separated by a blank. | Optional | no-gutters row-cols-* row-cols-sm-* row-cols-md-* row-cols-lg-* row-cols-xl-*
style | CSS style definition that is directly passed into this control. With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are: border: 1px solid #FF0000 background-color: #808080 You can combine expressions by appending and separating them with a semicolon. Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function. | Optional |

## BMOBILE:CONTAINER

A responsive container into which you add your controls, grids and other containers. You usually have exactly one BMOBILE:CONTAINER per page.

#### Properties

Basic
takefullwidth | If set to "true" then the control takes all available horizontal width as its width. If set to "false" then the control does not have a predefined width but grows with its content. | Optional | true false
takefullheight | Indicates if the content of the control's area gets the full available height. If you use percentage sizing inside the control's area then this property must be switched to 'true'. If you use no explicit vertical sizing at all - or you use vertical pixel sizing for your controls - the property must be switched to 'false'. Background information: container control's internally open up a table in which you place rows (ITR/TR) which then hold controls (e.g. LABEL/FIELD). The table that is opened up normally has no explicit height and grows with its content as consequence. By specifying "takefullheight=true" the table itself is sized to fill the maximum height of the available area. | Optional | true false
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
styleclasses | CSS style classes separated by a blank. | Optional | bg-light ml-* mr-* mx-* mx-sm-* mx-md-* mx-lg-* mx-xl-* mt-* mb-* my-* border border-primary border border-secondary border border-dark border border-light
style | CSS style definition that is directly passed into this control. With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are: border: 1px solid #FF0000 background-color: #808080 You can combine expressions by appending and separating them with a semicolon. Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function. | Optional |
Accessibility
role | If set a role attribute is added to the html for screen readers. Example values are: banner, main, navigation. | Optional | main banner contentinfo complementary navigation

## BMOBILE:FORM, BMOBILE:FORMINLINE

These forms are more light-weight and flexible than `BMOBILE:FORMAREA`. Use the `BMOBILE:FORMINLINE` to add forms to bars like the `BMOBILE:HORIZONTALBAR` and the `BMOBILE:SIDEBAR`.

These forms are not supported for Bootstrap 3.

- Properties for BMOBILE:FORM

- Properties for BMOBILE:FORMINLINE

### Properties for BMOBILE:FORM

Basic
displayonly | If set to true, the FIELD will not be accessible for input. It is just used as an output field. | Optional | true false
invisiblemode | If the visibility of the control is determined dynamically by an adapter property then there are two rendering modes if the visibility is "false": (1) "invisible": the control is not visible. (2)"cleared": the control is not visible but it still occupies space. | Optional | invisible disabled cleared
visibleprop | Name of the adapter parameter that provides the information if this control is displayed or not. As consequence you can control the visibility of the control dynamically. | Optional |
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
styleclasses | CSS style classes separated by a blank. | Optional | d-none d-md-block d-none d-lg-block ml-* mr-* mx-*
style | CSS style definition that is directly passed into this control. With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are: border: 1px solid #FF0000 background-color: #808080 You can combine expressions by appending and separating them with a semicolon. Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function. | Optional |
Miscellaneous
testtoolid | Use this attribute to assign a fixed control identifier that can be later on used within your test tool in order to do the object identification | Optional |

### Properties for BMOBILE:FORMINLINE

Basic
displayonly | If set to true, the FIELD will not be accessible for input. It is just used as an output field. | Optional | true false
invisiblemode | If the visibility of the control is determined dynamically by an adapter property then there are two rendering modes if the visibility is "false": (1) "invisible": the control is not visible. (2)"cleared": the control is not visible but it still occupies space. | Optional | invisible disabled cleared
visibleprop | Name of the adapter parameter that provides the information if this control is displayed or not. As consequence you can control the visibility of the control dynamically. | Optional |
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
styleclasses | CSS style classes separated by a blank. | Optional | d-none d-md-block d-none d-lg-block ml-* mr-* mx-*
style | CSS style definition that is directly passed into this control. With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are: border: 1px solid #FF0000 background-color: #808080 You can combine expressions by appending and separating them with a semicolon. Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function. | Optional |
Miscellaneous
testtoolid | Use this attribute to assign a fixed control identifier that can be later on used within your test tool in order to do the object identification | Optional |

## BMOBILE:FORMAREA

The surrounding container for forms. Within a BMOBILE:FORMAREA you can have several BMOBILE:FORMGROUP containers.

#### Properties

Basic
legend | A caption shown for the formarea. | Optional |
legendprop | The name of the adapter parameter which dynamically defines the caption of the formarea at runtime. | Optional |
textid | Multi language dependent text that is displayed inside the control. The "textid" is translated into a corresponding string at runtime. Do not specify a "name" inside the control if specifying a "textid". | Optional |
invisiblemode | If the visibility of the control is determined dynamically by an adapter property then there are two rendering modes if the visibility is "false": (1) "invisible": the control is not visible. (2)"cleared": the control is not visible but it still occupies space. | Optional | invisible disabled cleared
visibleprop | Name of the adapter parameter that provides the information if this control is displayed or not. As consequence you can control the visibility of the control dynamically. | Optional |
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
styleclasses | CSS style classes separated by a blank. | Optional | bg-light ml-* mr-* mx-* mx-sm-* mx-md-* mx-lg-* mx-xl-* mt-* mb-* my-* border border-primary border border-secondary border border-dark border border-light
style | CSS style definition that is directly passed into this control. With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are: border: 1px solid #FF0000 background-color: #808080 You can combine expressions by appending and separating them with a semicolon. Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function. | Optional |
Miscellaneous
testtoolid | Use this attribute to assign a fixed control identifier that can be later on used within your test tool in order to do the object identification | Optional |

## BMOBILE:FORMGROUP

Use this container to group several BMOBILE:FLABEL and input controls like BMOBILE:FFIELD within a form.

#### Properties

Basic
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
styleclasses | CSS style classes separated by a blank. | Optional | d-none d-md-block d-none d-lg-block ml-* mr-* mx-*
style | CSS style definition that is directly passed into this control. With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are: border: 1px solid #FF0000 background-color: #808080 You can combine expressions by appending and separating them with a semicolon. Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function. | Optional |
invisiblemode | If the visibility of the control is determined dynamically by an adapter property then there are two rendering modes if the visibility is "false": (1) "invisible": the control is not visible. (2)"cleared": the control is not visible but it still occupies space. | Optional | invisible disabled cleared
renderasrow | If set to TRUE FLABEL and corresponding FFIELD will be rendered horizontally in a row. If set to false they will be stacked vertically. Only supported for Bootstrap 4 and higher. Default is TRUE. | Optional | true false
visibleprop | Name of the adapter parameter that provides the information if this control is displayed or not. As consequence you can control the visibility of the control dynamically. | Optional |
name | Text that is displayed inside the control. Please do not specify the name when using the multi language management - but specify a "textid" instead. | Optional |
Accessibility
setinputlabel | If set to TRUE then the first label control in the form group is used as label for the following input controls. This association is understood by creenreaders. Default is FALSE. | Optional | true false
namesronly | If set to TRUE then the name of the form group is only made accessible to screenreaders. It is not visually rendered. Default is FALSE. | Optional | true false
Miscellaneous
testtoolid | Use this attribute to assign a fixed control identifier that can be later on used within your test tool in order to do the object identification | Optional |

## BMOBILE:LISTGROUP

A list group displays a number of items as a vertical list. Use LISTGROUP to selectively display a certain number of items.

No scrollbar or pagination is applied. For huge item numbers, consider using grid controls instead.

You can create listgroups with simple readonly items or listgroups with items that can be activated, and that can trigger events on the server and on the client.

Basic
valueprop | Name of the adapter parameter that provides the content of the control. | Obligatory |
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
changeindexprop | Name of the adapter parameter providing a value which indicates whether the control should be refreshed with new data on the client or not. A different value than the previous triggers the refresh. It does not need to be a higher value. | Optional |
Binding
disabledprop | Name of the adapter parameter that dynamically defines if the control is disabled or enabled at runtime. If the value at runtime is set to TRUE the control is visible but disabled. In COLTABAREA controls this property is only supported for IE. | Optional |
methodprop | Name of the adapter parameter that dynamically defines the name of the event that is sent to the adapter when the user selects the item. | Optional |
textprop | Name of the adapter parameter which dynamically provides the text for the marker at runtime. | Optional |
titleprop | Name of the adapter parameter that dynamically defines the title of the control. The title is displayed as tool tip when ther user moves the mouse onto the control. | Optional |
Appearance
itemstyle | CSS style definition, which is applied to all items in the list Examples: border: 1px solid #FF0000 background-color: #808080 You can combine style settings by separating them with a semicolon. | Optional |
itemstyleclasses | CSS style classes separated by a blank. These classes are applied to all items in the list. | Optional | list-group-item-primary list-group-item-secondary list-group-item-success list-group-item-danger list-group-item-warning list-group-item-info list-group-item-light list-group-item-dark
style | CSS style definition that is directly passed into this control. With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are: border: 1px solid #FF0000 background-color: #808080 You can combine expressions by appending and separating them with a semicolon. Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function. | Optional |
styleclasses | CSS style classes separated by a blank. | Optional | list-group-flush
straighttext | If the text of the control contains HTML tags then these are by default interpreted by the browser. Specifiying STRAIGHTTEXT as "true" means that the browser will directly render the characters without HTML interpretation. Example: if you want to output the source of an HTML text then STRAIGHTTEXT should be set to "true". | Optional | true false
titlestraighttext | If the text of the control contains HTML tags then these are by default interpreted by the browser. Specifiying STRAIGHTTEXT as "true" means that the browser will directly render the characters without HTML interpretation. Example: if you want to output the source of an HTML text then STRAIGHTTEXT should be set to "true". | Optional | true false
badgeprop | Name of the adapter parameter which dynamically provides the text of the badge for an item at runtime. | Optional |
badgeposition | Position where a badge is rendered. Valid values are right and left. Default is right. | Optional | right left
iconurlprop | Name of the adapter parameter which dynamically provides the url of the icon for an item at runtime. | Optional |
iconposition | Position where an icon is rendered. Valid values are right and left. Default is left. | Optional | right left
Miscellaneous
testtoolid | Use this attribute to assign a fixed control identifier that can be later on used within your test tool in order to do the object identification | Optional |

## BMOBILE:SIDEBARCONTAINER, BMOBILE:SIDEBAR, BMOBILE:SIDEBARGROUP, BMOBILE:HORIZONTALBAR, BMOBILE:CONTENT

These containers support frequently used patterns for modern responsive pages. Additional controls like `BMOBILE:TOGGLER`, `BMOBILE:SIDEBARGROUP`, `BMOBILE:BARTEXT` support corresponding functionality for flexible rendering of bars and arbitrary menus and controls inside the bars. You can put all kinds of containers like rows, panels or complete pages into the `BMOBILE:CONTENT` container.

When dragging the `BMOBILE:SIDEBARCONTAINER` control from the palette to your page layout, several controls are arranged as sub-controls under the `BMOBILE:SIDEBARCONTAINER`. You can arrange the controls differently, replace, add, remove containers and style them. You can add all kind of content as child nodes of the `BMOBILE:CONTENT`. You can also use the `BMOBILE:HORIZONTALBAR` without `BMOBILE:SIDEBARCONTAINER`.

The NaturalAjaxDemos contain a running example. These containers are not supported for Bootstrap 3.

The responsive view of the Natural Ajax Demos itself is an example for a usage of the side navigation controls.

- Properties for BMOBILE:SIDEBARCONTAINER

- Properties for BMOBILE:SIDEBAR

- Properties for BMOBILE:SIDEBARGROUP

- Properties for BMOBILE:HORIZONTALBAR

- Properties for BMOBILE:CONTENT

### Properties for BMOBILE:SIDEBARCONTAINER

Basic
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
styleclasses | CSS style classes separated by a blank. | Optional | bg-light ml-* mr-* mx-* mx-sm-* mx-md-* mx-lg-* mx-xl-* mt-* mb-* my-* border border-primary border border-secondary border border-dark border border-light
style | CSS style definition that is directly passed into this control. With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are: border: 1px solid #FF0000 background-color: #808080 You can combine expressions by appending and separating them with a semicolon. Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function. | Optional |

### Properties for BMOBILE:SIDEBAR

Basic
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
toggleid | A string value which can be used in the BMOBILE:TOGGLER to toggle the visibility. The specified id must be unique within this layout. | Optional |
styleclasses | CSS style classes separated by a blank. | Optional | bg-dark bg-light bg-primary bg-secondary border border-primary border border-secondary border border-dark border border-light
style | CSS style definition that is directly passed into this control. With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are: border: 1px solid #FF0000 background-color: #808080 You can combine expressions by appending and separating them with a semicolon. Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function. | Optional |
title | Text that is shown as tooltip for the control. Either specify the text "hard" by using this TITLE property - or use the TITLETEXTID in order to define a language dependent literal. | Optional |
Miscellaneous
testtoolid | Use this attribute to assign a fixed control identifier that can be later on used within your test tool in order to do the object identification | Optional |

### Properties for BMOBILE:SIDEBARGROUP

Basic
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
styleclasses | CSS style classes separated by a blank. | Optional | ml-* mr-* mx-* mx-sm-* mx-md-* mx-lg-* mx-xl-*
style | CSS style definition that is directly passed into this control. With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are: border: 1px solid #FF0000 background-color: #808080 You can combine expressions by appending and separating them with a semicolon. Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function. | Optional |

### Properties for BMOBILE:HORIZONTALBAR

Basic
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
styleclasses | CSS style classes separated by a blank. | Optional | fixed-bottom bg-dark navmenu-dark bg-light navmenu-light navmenu-light navmenu-dark bg-primary bg-secondary
style | CSS style definition that is directly passed into this control. With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are: border: 1px solid #FF0000 background-color: #808080 You can combine expressions by appending and separating them with a semicolon. Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function. | Optional |
title | Text that is shown as tooltip for the control. Either specify the text "hard" by using this TITLE property - or use the TITLETEXTID in order to define a language dependent literal. | Optional |

### Properties for BMOBILE:CONTENT

Basic
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
styleclasses | CSS style classes separated by a blank. | Optional | bg-light ml-* mr-* mx-* mx-sm-* mx-md-* mx-lg-* mx-xl-* mt-* mb-* my-* border border-primary border border-secondary border border-dark border border-light
style | CSS style definition that is directly passed into this control. With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are: border: 1px solid #FF0000 background-color: #808080 You can combine expressions by appending and separating them with a semicolon. Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function. | Optional |

## BMOBILE:TABPANE, BMOBILE:VERTICALTABPANE and BMOBILE:TAB

Use these controls to implement responsive tab controls. Inside a BMOBILE:TABPANE and a BMOBILE:VERTICALTABPANE you can define BMOBILE:TAB containers representing the individual tab pages between which you can navigate. All HTML code for all tabs will be generated into one HTML page.

- Properties for BMOBILE:TABPANE

- Properties for BMOBILE:VERTICALTABPANE

- Properties for BMOBILE:TAB

### Properties for BMOBILE:TABPANE

Basic
navmode | There are several rendering modes. For example set this property to nav-pills if you want the tabs to be rendered as pills. | Optional | nav-tabs nav-pills
style | CSS style definition that is directly passed into this control. With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are: border: 1px solid #FF0000 background-color: #808080 You can combine expressions by appending and separating them with a semicolon. Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function. | Optional |
styleclasses | CSS style classes separated by a blank. | Optional | col-* col-sm-* col-md-* col-lg-* col-xl-* border border-primary border border-secondary border border-dark border border-light
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
aspectratio | Defines the proportional relationship between width and height of the control. Example: 4by3 | Optional | 1by1 16by9 21by9 4by3
width | Width of the control. There are three possibilities to define the width: (A) You do not define a width at all. In this case the width of the control will either be a default width or - in case of container controls - it will follow the width that is occupied by its content. (B) Pixel sizing: just input a number value (e.g. "100"). (C) Percentage sizing: input a percantage value (e.g. "50%"). Pay attention: percentage sizing will only bring up correct results if the parent element of the control properly defines a width this control can reference. If you specify this control to have a width of 50% then the parent element (e.g. an ITR-row) may itself define a width of "100%". If the parent element does not specify a width then the rendering result may not represent what you expect. | Optional | 100 120 140 160 180 200 50% 100%
height | Height of the control. There are three possibilities to define the height: (A) You do not define a height at all. As consequence the control will be rendered with its default height. If the control is a container control (containing) other controls then the height of the control will follow the height of its content. (B) Pixel sizing: just input a number value (e.g. "20"). (C) Percentage sizing: input a percentage value (e.g. "50%"). Pay attention: percentage sizing will only bring up correct results if the parent element of the control properly defines a height this control can reference. If you specify this control to have a height of 50% then the parent element (e.g. an ITR-row) may itself define a height of "100%". If the parent element does not specify a width then the rendering result may not represent what you expect. | Optional | 100 150 200 250 300 250 400 50% 100%
withcollapse | If set to true a small button is added to hide and show the navigation tabs. | Optional | true false

### Properties for BMOBILE:VERTICALTABPANE

Basic
navmode | There are several rendering modes. For example set this property to nav-pills if you want the tabs to be rendered as pills. | Optional | nav-tabs nav-pills
style | CSS style definition that is directly passed into this control. With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are: border: 1px solid #FF0000 background-color: #808080 You can combine expressions by appending and separating them with a semicolon. Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function. | Optional |
styleclasses | CSS style classes separated by a blank. | Optional |
panecolstyle | Inline CSS style settings applied to the pane. | Optional |
panecolstyleclasses | CSS style classes separated by a blank applied to the pane. For responsive pages it is recommended to apply one of the col-* classes to define the width. | Optional | col-* col-sm-* col-md-* col-lg-* col-xl-* border border-primary border border-secondary border border-dark border border-light
navcolstyle | Inline CSS style settings applied to the navigation tabs. | Optional |
navcolstyleclasses | CSS style classes separated by a blank applied to the navigation tabs. For responsive pages it is recommended to apply one of the col-* classes to define the width. | Optional | col-auto col col-* col-sm-* col-md-* col-lg-* col-xl-* offset-* offset-sm-* offset-md-* offset-lg-* offset-xl-* mx-auto btn-group btn-group-vertical
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
aspectratio | Defines the proportional relationship between width and height of the control. Example: 4by3 | Optional | 1by1 16by9 21by9 4by3
width | Width of the control. There are three possibilities to define the width: (A) You do not define a width at all. In this case the width of the control will either be a default width or - in case of container controls - it will follow the width that is occupied by its content. (B) Pixel sizing: just input a number value (e.g. "100"). (C) Percentage sizing: input a percantage value (e.g. "50%"). Pay attention: percentage sizing will only bring up correct results if the parent element of the control properly defines a width this control can reference. If you specify this control to have a width of 50% then the parent element (e.g. an ITR-row) may itself define a width of "100%". If the parent element does not specify a width then the rendering result may not represent what you expect. | Optional | 100 120 140 160 180 200 50% 100%
height | Height of the control. There are three possibilities to define the height: (A) You do not define a height at all. As consequence the control will be rendered with its default height. If the control is a container control (containing) other controls then the height of the control will follow the height of its content. (B) Pixel sizing: just input a number value (e.g. "20"). (C) Percentage sizing: input a percentage value (e.g. "50%"). Pay attention: percentage sizing will only bring up correct results if the parent element of the control properly defines a height this control can reference. If you specify this control to have a height of 50% then the parent element (e.g. an ITR-row) may itself define a height of "100%". If the parent element does not specify a width then the rendering result may not represent what you expect. | Optional | 100 150 200 250 300 250 400 50% 100%
withcollapse | If set to true a small button is added to hide and show the navigation tabs. | Optional | true false

### Properties for BMOBILE:TAB

Basic
name | Text that is displayed inside the control. Please do not specify the name when using the multi language management - but specify a "textid" instead. | Optional |
nameprop | Name of adapter parameter which dynamically provides the text that is shown inside the control. | Optional |
textid | Multi language dependent text that is displayed inside the control. The "textid" is translated into a corresponding string at runtime. Do not specify a "name" inside the control if specifying a "textid". | Optional |
straighttext | If the text of the control contains HTML tags then these are by default interpreted by the browser. Specifiying STRAIGHTTEXT as "true" means that the browser will directly render the characters without HTML interpretation. Example: if you want to output the source of an HTML text then STRAIGHTTEXT should be set to "true". | Optional | true false
invisiblemode | This property has three possible values: (1) "invisible": the control is not visible without occupying any space. (2) "disabled": the control is deactivated: it is "grayed" and does not show any roll over effects any more. (3)"cleared": the control is not visible but it still occupies space. | Optional | invisible disabled
visibleprop | Name of the adapter parameter that provides the information if this control is displayed or not. As consequence you can control the visibility of the control dynamically. | Optional |
openmethod | Name of the event that is sent to the adapter when the user does a "tab" selection. The index of the "tab" that is opened can be transferred to the adapter by using the property OPENEDINDEXPROP. | Optional |
style | CSS style definition that is directly passed into this control. With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are: border: 1px solid #FF0000 background-color: #808080 You can combine expressions by appending and separating them with a semicolon. Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function. | Optional |
styleclasses | CSS style classes separated by a blank. | Optional | bg-light ml-* mr-* mx-* mx-sm-* mx-md-* mx-lg-* mx-xl-* mt-* mb-* my-* border border-primary border border-secondary border border-dark border border-light
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |

## BMOBILE:TABSUBPAGES, BMOBILE:VERTICALTABSUBPAGES, BMOBILE:STRAIGHTTAB and BMOBILE:PAGER

The controls implement responsive tab controls. A BMOBILE:TABSUBPAGES control and a BMOBILE:VERTICALTABSUBPAGES control can have static tabs and dynamically defined tabs. The static tabs are added via BMOBILE:STRAIGHTTAB controls at design time. The HTML code is generated into the page holding the BMOBILE:TABSUBPAGES/BMOBILE:VERTICALSUBPAGES control.

- Properties for BMOBILE:TABSUBPAGES

- Properties for BMOBILE:VERTICALTABSUBPAGES

- Properties for BMOBILE:STRAIGHTTAB

- Properties for BMOBILE:PAGER

For the Adapter Interface and Built-In Events see the corresponding sections in ROWTABSUBPAGES and STRAIGHTTABPAGE.

In addition, the adapter interface may optionally contain a STRAIGHTTABCOUNT and/or a level field:

    2 STRAIGHTTABCOUNT (I4)
    2 TABITEMS (1:*)
    3 LEVEL (I4)

#### STRAIGHTTABCOUNT

The count of static tabs. This is useful to conveniently calculate the index in the array of the dynamically defined tabs.

#### LEVEL

Drop down menus are supported. The level defines whether it is a sub item in a dropdown menu or a root item. By adding an optional BMOBILE:PAGER, short cut links for the previous clicked tabs will be added.

For more information see the corresponding samples in the NaturalAjaxDemos.

### Properties for BMOBILE:TABSUBPAGES

Basic
valueprop | Name of the adapter parameter that provides the content of the control. | Obligatory |
navmode | There are several rendering modes. For example set this property to nav-pills if you want the tabs to be rendered as pills. | Optional | nav-tabs nav-pills
style | CSS style definition that is directly passed into this control. With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are: border: 1px solid #FF0000 background-color: #808080 You can combine expressions by appending and separating them with a semicolon. Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function. | Optional |
styleclasses | CSS style classes separated by a blank. | Optional | bg-light ml-* mr-* mx-* mx-sm-* mx-md-* mx-lg-* mx-xl-* mt-* mb-* my-* border border-primary border border-secondary border border-dark border border-light
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
aspectratio | Defines the proportional relationship between width and height of the control. Example: 4by3 | Optional | 1by1 16by9 21by9 4by3
width | Width of the control. There are three possibilities to define the width: (A) You do not define a width at all. In this case the width of the control will either be a default width or - in case of container controls - it will follow the width that is occupied by its content. (B) Pixel sizing: just input a number value (e.g. "100"). (C) Percentage sizing: input a percantage value (e.g. "50%"). Pay attention: percentage sizing will only bring up correct results if the parent element of the control properly defines a width this control can reference. If you specify this control to have a width of 50% then the parent element (e.g. an ITR-row) may itself define a width of "100%". If the parent element does not specify a width then the rendering result may not represent what you expect. | Optional | 100 120 140 160 180 200 50% 100%
height | Height of the control. There are three possibilities to define the height: (A) You do not define a height at all. As consequence the control will be rendered with its default height. If the control is a container control (containing) other controls then the height of the control will follow the height of its content. (B) Pixel sizing: just input a number value (e.g. "20"). (C) Percentage sizing: input a percentage value (e.g. "50%"). Pay attention: percentage sizing will only bring up correct results if the parent element of the control properly defines a height this control can reference. If you specify this control to have a height of 50% then the parent element (e.g. an ITR-row) may itself define a height of "100%". If the parent element does not specify a width then the rendering result may not represent what you expect. | Optional | 100 150 200 250 300 250 400 50% 100%
triggerserver | Flag indicating whether the adapter should be triggered if the user switches between pages. If set to true, method trigger() inside the TABSUBPAGESInfo object is called - before switching the page. Therefore the adapter can abort a page switch - maybe a user has to enter some data first on the current page before switching to another one. | Optional | true false
withcollapse | If set to true a small button is added to hide and show the navigation tabs. | Optional | true false
withdropdown | If set to true tabs can have drop-down menus. An additional Natural field level is generated. | Optional | true false

### Properties for BMOBILE:VERTICALTABSUBPAGES

Basic
navmode | There are several rendering modes. For example set this property to nav-pills if you want the tabs to be rendered as pills. | Optional | nav-tabs nav-pills
style | CSS style definition that is directly passed into this control. With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are: border: 1px solid #FF0000 background-color: #808080 You can combine expressions by appending and separating them with a semicolon. Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function. | Optional |
styleclasses | CSS style classes separated by a blank. | Optional |
panecolstyle | Inline CSS style settings applied to the pane. | Optional |
panecolstyleclasses | CSS style classes separated by a blank applied to the pane. For responsive pages it is recommended to apply one of the col-* classes to define the width. | Optional | col-* col-sm-* col-md-* col-lg-* col-xl-* border border-primary border border-secondary border border-dark border border-light
navcolstyle | Inline CSS style settings applied to the navigation tabs. | Optional |
navcolstyleclasses | CSS style classes separated by a blank applied to the navigation tabs. For responsive pages it is recommended to apply one of the col-* classes to define the width. | Optional | col-auto col col-* col-sm-* col-md-* col-lg-* col-xl-* offset-* offset-sm-* offset-md-* offset-lg-* offset-xl-* mx-auto btn-group btn-group-vertical
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
aspectratio | Defines the proportional relationship between width and height of the control. Example: 4by3 | Optional | 1by1 16by9 21by9 4by3
width | Width of the control. There are three possibilities to define the width: (A) You do not define a width at all. In this case the width of the control will either be a default width or - in case of container controls - it will follow the width that is occupied by its content. (B) Pixel sizing: just input a number value (e.g. "100"). (C) Percentage sizing: input a percantage value (e.g. "50%"). Pay attention: percentage sizing will only bring up correct results if the parent element of the control properly defines a width this control can reference. If you specify this control to have a width of 50% then the parent element (e.g. an ITR-row) may itself define a width of "100%". If the parent element does not specify a width then the rendering result may not represent what you expect. | Optional | 100 120 140 160 180 200 50% 100%
height | Height of the control. There are three possibilities to define the height: (A) You do not define a height at all. As consequence the control will be rendered with its default height. If the control is a container control (containing) other controls then the height of the control will follow the height of its content. (B) Pixel sizing: just input a number value (e.g. "20"). (C) Percentage sizing: input a percentage value (e.g. "50%"). Pay attention: percentage sizing will only bring up correct results if the parent element of the control properly defines a height this control can reference. If you specify this control to have a height of 50% then the parent element (e.g. an ITR-row) may itself define a height of "100%". If the parent element does not specify a width then the rendering result may not represent what you expect. | Optional | 100 150 200 250 300 250 400 50% 100%
withcollapse | If set to true a small button is added to hide and show the navigation tabs. | Optional | true false
withdropdown | If set to true tabs can have drop-down menus. An additional Natural field level is generated. | Optional | true false

### Properties for BMOBILE:STRAIGHTTAB

Basic
name | Text that is displayed inside the control. Please do not specify the name when using the multi language management - but specify a "textid" instead. | Optional |
nameprop | Name of adapter parameter which dynamically provides the text that is shown inside the control. | Optional |
textid | Multi language dependent text that is displayed inside the control. The "textid" is translated into a corresponding string at runtime. Do not specify a "name" inside the control if specifying a "textid". | Optional |
straighttext | If the text of the control contains HTML tags then these are by default interpreted by the browser. Specifiying STRAIGHTTEXT as "true" means that the browser will directly render the characters without HTML interpretation. Example: if you want to output the source of an HTML text then STRAIGHTTEXT should be set to "true". | Optional | true false
invisiblemode | This property has three possible values: (1) "invisible": the control is not visible without occupying any space. (2) "disabled": the control is deactivated: it is "grayed" and does not show any roll over effects any more. (3)"cleared": the control is not visible but it still occupies space. | Optional | invisible disabled
visibleprop | Name of the adapter parameter that provides the information if this control is displayed or not. As consequence you can control the visibility of the control dynamically. | Optional |
style | CSS style definition that is directly passed into this control. With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are: border: 1px solid #FF0000 background-color: #808080 You can combine expressions by appending and separating them with a semicolon. Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function. | Optional |
styleclasses | CSS style classes separated by a blank. | Optional | bg-light ml-* mr-* mx-* mx-sm-* mx-md-* mx-lg-* mx-xl-* mt-* mb-* my-* border border-primary border border-secondary border border-dark border border-light
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |

### Properties for BMOBILE:PAGER

Basic
styleclasses | CSS style classes separated by a blank. | Optional |
style | CSS style definition that is directly passed into this control. With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are: border: 1px solid #FF0000 background-color: #808080 You can combine expressions by appending and separating them with a semicolon. Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function. | Optional |
comment | Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view. | Optional |
maxcount | Maximum number of pager buttons. Each pager button holds a link for the last clicked tab. | Optional |

### On this page

- BMOBILE:CARD
- BMOBILE:CARDCONTAINER
- BMOBILE:COL
- BMOBILE:PANEL
- BMOBILE:ROW
- BMOBILE:CONTAINER
- BMOBILE:FORM, BMOBILE:FORMINLINE
- BMOBILE:FORMAREA
- BMOBILE:FORMGROUP
- BMOBILE:LISTGROUP
- BMOBILE:SIDEBARCONTAINER, BMOBILE:SIDEBAR, BMOBILE:SIDEBARGROUP, BMOBILE:HORIZONTALBAR, BMOBILE:CONTENT
- BMOBILE:TABPANE, BMOBILE:VERTICALTABPANE and BMOBILE:TAB
- BMOBILE:TABSUBPAGES, BMOBILE:VERTICALTABSUBPAGES, BMOBILE:STRAIGHTTAB and BMOBILE:PAGER