How to customize the application for phone or tablet

Kitto^x detects mobile browsers automatically via user agent and adjusts the rendering accordingly.

Home view selection

As explained here you can create different Home Pages in your application for different devices. Just create the home view yaml files using the following standard names:

• HomeTiny.yaml (up to 5")
• HomeSmall.yaml (6" to 10")
• Home.yaml (all other cases)

Fullscreen behavior on mobile

On mobile devices, Kitto^x automatically forces every view and form opened from a menu to display as a fullscreen dialog overlay. This is controlled by two properties that are forced at runtime:

• IsModal is set to True — the view renders as a dialog overlay instead of inline in a tab
• Maximized is set to True — the dialog fills the entire viewport (Width and Height are ignored)

This ensures that on a phone screen, every view uses all available space. The AllowClose property is preserved from the YAML configuration, so views that should not be dismissible (like Login with AllowClose: False) will not show the X button.

The initial Home/Login page is not affected by this logic — it is rendered as a full HTML page by default.

Menu behavior

Both TreePanel and TilePanel menus delegate view opening to kxApp.openView(), a single JavaScript function that decides how to display the view:

• Desktop (central TabPanel exists): opens the view in a tab
• Mobile (no central TabPanel): appends the view to the body as a dialog overlay; the CSS class body.kx-mobile forces fullscreen rendering

This means the menu controllers have no mobile-specific logic — the view decides how to display itself based on the context.

Responsive form field scaling

On narrow screens (@media (max-width: 480px)) Kitto^x automatically keeps data-entry form fields inside the viewport, so a form never scrolls horizontally on a phone. This is a framework rule in Home/Resources/css/kittox.css and applies to every application — no per-app CSS is needed.

What the rules do below the breakpoint:

• the <fieldset> and the whole flex chain (kx-form-body, kx-form-page, kx-form-row, kx-form-field) are allowed to shrink (min-width: 0), instead of staying as wide as their widest field;
• fields stack one per line, with the label above the input (matching the LabelAlign=top the server already applies on mobile);
• every editor fills the field width instead of its fixed CharWidth (the per-field inline width:NNch is overridden): text, memo, HTML memo (the SunEditor widget), select, date / time, number and reference lookup fields;
• checkboxes and radios keep their own square size (they are excluded from the width stretch).

Desktop rendering is unaffected — the rules only apply under the mobile breakpoint.

An application can still override the look for its own views (for example a different label position) by adding scoped rules to its Home/Resources/js/application.css, without touching the framework scaling.

CSS class kx-mobile

When a mobile browser is detected, the <body> element receives the kx-mobile CSS class. This class triggers fullscreen styles for dialog overlays and login forms:

body.kx-mobile .kx-dialog { /* fullscreen */ }
body.kx-mobile .kx-login-dialog { /* fullscreen */ }

You can use this class in your own CSS to customize mobile-specific styles.

See Panel-based Controllers for details on IsModal, Maximized, and AllowClose.