Jetpack Compose - Scaffold bottom bar hides TextField when keyboard is opened

Question

When I click on the TextField, keyboard opens, but the bottom bar is covering the TextField. Is there a way to make this field visible without programmatically scrolling?

    Scaffold(
        modifier = Modifier.fillMaxSize().navigationBarsPadding().imePadding(),
        bottomBar = {
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(10.dp)
            ) {
                DefaultButton(
                    modifier = Modifier.align(Alignment.Center),
                    enabled = true,
                    onClick = {
                    }) {
                    Text(text = "Test")
                }
            }
        }
    ) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .verticalScroll(rememberScrollState())
                .padding(it)
        ) {

            Box(modifier = Modifier.height(2000.dp).fillMaxWidth().background(Color.Red))
            TextField(value = "Testing", onValueChange = {})
        }

    }

GaneshHulyal · Accepted Answer · 2024-03-28 13:03:07Z

I see ImePadding is given to BottomBar's box modifier, remove imePadding from the box modifier and add it to the TextFields modifier.

Scaffold(
    modifier = Modifier.fillMaxSize().navigationBarsPadding(),
    bottomBar = {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .padding(10.dp)
        ) {
            DefaultButton(
                modifier = Modifier.align(Alignment.Center),
                enabled = true,
                onClick = {
                }) {
                Text(text = "Test")
            }
        }
    }
) {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .verticalScroll(rememberScrollState())
            .padding(it)
    ) {

        Box(modifier = Modifier.height(2000.dp).fillMaxWidth().background(Color.Red))
        TextField(modifier = Modifier.imePadding(),value = "Testing", onValueChange = {})
    }

}

Shakermaker · Accepted Answer · 2024-05-01 22:36:24Z

1

If anyone is wondering this is how I solved the issue, inside scaffold content you just have to apply padding first, and then apply fillMaxSize():

Column(
        modifier = Modifier
            .padding(it)
            .fillMaxSize()
            .verticalScroll(rememberScrollState())

    ) {

        Box(modifier = Modifier.height(2000.dp).fillMaxWidth().background(Color.Red))
        TextField(value = "Testing", onValueChange = {})
    }

answered May 1, 2024 at 22:36

Shakermaker

1841 silver badge7 bronze badges

1 Comment

Chris.Jenkins Over a year ago

Good catch, man Compose Modifiers are a fine art...

Collectives™ on Stack Overflow

Jetpack Compose - Scaffold bottom bar hides TextField when keyboard is opened

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related