How to prevent UI from moving up when typing in input field?

Original Created Jan 23, 2018 | Regeneration Apr 22, 2026

Question

When I type in an input field, the entire UI frame moves upward (as shown in the before/after screenshots). This behavior is undesirable for my application.

Before input: [Image showing normal UI] After input: [Image showing UI shifted upward]

GitHub repository with code: https://github.com/Hexor/HexList

How can I prevent this automatic UI movement when the keyboard appears?

Answer

Problem Understanding

This issue occurs because Tizen's default behavior is to adjust the UI layout when the virtual keyboard appears, making space for the keyboard by shifting content upward. This is handled by default CSS in 'tau.css'.

Solution Methods

Override Default CSS Behavior:
- Create custom CSS to make your UI elements position rigid
- Use position: fixed or position: absolute for elements that shouldn't move
Keyboard Event Detection:
- Implement JavaScript to detect keyboard show/hide events
- Adjust your UI programmatically when these events occur

Code Examples

/* Example CSS to prevent UI movement */
.header-container {
    position: fixed;
    top: 0;
    width: 100%;
}

.content-container {
    margin-top: 60px; /* Adjust based on your header height */
}

// Example JavaScript for keyboard event detection
window.addEventListener('resize', function() {
    if (window.innerHeight < originalHeight) {
        // Keyboard is shown
        // Add your adjustment logic here
    } else {
        // Keyboard is hidden
        // Restore original layout
    }
});

Additional Tips

Test your solution on different screen sizes
Consider accessibility when modifying default behaviors
For more details on keyboard event handling, refer to: Samsung Tizen OS Documentation