How to customize the application for phone or tablet
Kittox 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, Kittox 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-mobileforces fullscreen rendering
This means the menu controllers have no mobile-specific logic — the view decides how to display itself based on the context.
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.