HelloI'm making an app for tablet devices, and I need to hide both the top bar (status bar) and the bottom bar (navigation bar) of the tablet.Is it possible? Could someone give me an example of how it can be done?Thank you
Hi @Carme Duch
Can you pls refer the below forum discussion link, If it helps.
https://www.outsystems.com/forums/discussion/51949/how-to-hide-bottom-bar-in-particular-screen/
Thanks,
Sivasakthi M
Can you please try this CSS below
@media only screen and (min-width: 480px) and (max-width: 768px){
header, footer{
display: none;
}
Also, you can modify the min & max width values based on your device's width (requirements)
Hi @Carme Duch , hope you're doing well.Based on my analysis, the bottom bar appears to be encapsulated within a reusable web block, rather than being directly embedded in the page's structure.
Considering the layout architecture relies on placeholders to render dynamic content, I recommend detaching or removing the bottom bar web block from the associated placeholder in the layout. This should effectively eliminate the element from the rendered output and resolve the issue.Please feel free to reach out if you have any further questions or require additional clarification.Thanks and Regards!
Hi, simply don't use a layout—place your main container directly in the screen
Thanks for your replies,
The problem I have is hiding the navigation bar of the tablet
with the status bar i put this css and it worked for me
this code hide the status bar
Any idea?
Thanks
Can you pls share the oml, If it is possible.
Hi @Carme Duch,
Unfortunately, standard web apps (HTML/JavaScript in a browser) cannot hide the device’s system navigation bar for security and user experience reasons.
You can go fullscreen mode, which can minimize or hide some system UI elements, especially on Android.
Hope this helps
Hi @Aditi Saraswat
How I can configure my application in fullscreen mode ?
Hi,
You can use this javascript
<button onclick="openFullscreen()">Enter Fullscreen</button>
function openFullscreen() {
const elem = document.documentElement; // or any specific element
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) { /* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE11 */
elem.msRequestFullscreen();
To Exit Fullscreen:
function closeFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) { /* Safari */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE11 */
document.msExitFullscreen();
Note :
Fullscreen is limited to user gestures (must be triggered by a click/tap).
iOS Safari does not fully support the Fullscreen API
Try this component from Forge: https://www.outsystems.com/forge/component-overview/2834/fullscreen-o11
Hello,
I've done a lot of tests and they haven't worked.I've been researching to hide the android navigation bar with ODC, I have to find this code, but it is written with Kotlin, but outsystems does not accept this language.Do you know how I could use it?
First code
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_SENSOR_LANDSCAPE
window.decorView.setOnSystemUiVisibilityChangeListener({ visibility ->
if (visibility > 1) {
immersiveMode()
} })
Second code
class MainActivity : AppCompatActivity() {
setContentView(R.layout.activity_main)
hideSystemUI()
private fun hideSystemUI() {
window.decorView.systemUiVisibility = (
View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY
or View.SYSTEM_UI_FLAG_LAYOUT_STABLE
or View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
or View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
or View.SYSTEM_UI_FLAG_FULLSCREEN
)
Hi, @Carme Duch I just integrated the Cordova plugin into an ODC library. I tested it and it works fine on my end. I'll share the library with you so you can use it too :Just drag and drop the library's public block (FullscreenBlock) into the screen .Feel free to make any updates to this library :
Please go through the following discussion hope this will help you to resolve the issue
https://www.outsystems.com/forums/discussion/70712/full-screen-mode-of-the-browser-and-disabling-special-key-actions/
Thanks.
you can try this forge component. Hope it helps.
https://www.outsystems.com/forge/component-overview/16947/navigationbar-odc
Sriyamini.J