CODEWITHSUNDEEP
kotlinandroid-jetpack-composekotlin-multiplatformcompose-desktop
Anga
Anga

Reputation: 2672

Aligning a resized TextField in Jetpack Compose

I am having problem aligning a resized TextField in Jetpack Compose for Desktop. When I resize the width of the TextField, the TextField automatically adjust itself to center position on screen. I have tried using Modify.Align and it did not work.

Can someone help? Here is my code

@Composable
fun addSales(sales: Sales,
             actionChangeSales: (sales: Sales) -> Unit,
             actionQuantityInc: (() -> Unit),
             actionItemNameInc: (() -> Unit)){
    Column{
        TextField(
            value = sales.itemName,
            textStyle = TextStyle(color = Color.DarkGray),
            onValueChange = {
                actionChangeSales(Sales(itemName = it))
                actionItemNameInc.invoke()
            },
            label = { Text("Item name")}
        )

        Spacer(modifier = Modifier.height(16.dp))

        OutlinedTextField(
            value = roundQuantity(sales.quantitySold),
            textStyle = TextStyle(color = Color.DarkGray),
            onValueChange = {
                actionChangeSales(Sales(quantitySold = getDoubleFromEditText(it)))
                actionQuantityInc.invoke()
            },
            label = { Text("Quantity")},
            modifier = Modifier.width(120.dp)
        )
    }
}

enter image description here

Upvotes: 2

Views: 7423

Answers (2)

Madushan
Madushan

Reputation: 7478

You have to wrap them in a Column again.

Pseudo code as below

Column(
    horizontalAlignment = Alignment.CenterHorizontally,
    modifier = Modifiler.fillMaxWidth() // needed so it knows the full width to center the content within it
) {
    // This wraps your content and centers it
    
    Column( horizontalAlignment = Alignment.Start ){
        // This wraps and aligns the content to the left/start

        // place your content here
    }
}

Upvotes: 1

Spatz
Spatz

Reputation: 20158

As a workaround, try to wrap OutlinedTextField with Box and apply the width modifier there:

            Box(modifier = Modifier.width(120.dp)) {
                OutlinedTextField(
                    value = "123456789",
                    textStyle = TextStyle(color = Color.DarkGray),
                    onValueChange = {},
                    label = { Text("Quantity") },
                )
            }

Upvotes: 5

Related Questions