I'm trying to prototype this diagnostics dump screen in compose. The text is longer than can be show...

# compose

[Travis Griggs]

I'm trying to prototype this diagnostics dump screen in compose. The text is longer than can be shown. So I make it scrollable using Modifier, but then it decides to make the outline as big as the text and scroll the whole thing. You can see the box is "cut off" at the bottom. I'd rather have the box all visible, but the text scroll inside of the box. What is the proper way to configure a sized box of text with vertical scroll? (code tried in thread)

[Travis Griggs]

Column {
   var scrollState = rememberScrollState()
   OutlinedTextField(
      value = Globals.diagnosticsExample,
      onValueChange = { _ -> },
      modifier = Modifier
         .fillMaxWidth()
         .verticalScroll(scrollState)
         .weight(1f),
      readOnly = true,
      textStyle = TextStyle(fontSize = 10.sp)
   )
   Button(
      onClick = {},
      modifier = Modifier
         .fillMaxWidth()
         .padding(vertical = 16.dp),
      colors = ButtonDefaults.buttonColors(containerColor = AccentBlue)
   ) {
      Text(text = "Share")
   }
}

[ephemient]

doesn't it just work out of the box if you don't put Modifier.verticalScroll() on it?

[Travis Griggs]

Now I feel like an idiot kinda.

[Travis Griggs]

File this one under the "trying too hard" I guess.

[ephemient]

if you do want anything more complex (such as controlling where it's scrolled to), the current Compose APIs don't really let you do that. but as long as this works for you, it works :)

[Travis Griggs]

Here's a more complicated question about that screenshot... Is there a way to get the IconButton at the top to right align itself by the actual drawn icon? Instead of the padded box it puts the icon in?

[ephemient]

IconButton set its minimum size to 48x48dp, which is the recommended minimum touch target size. perhaps your icon is smaller than that?

[Travis Griggs]

I'm just using:

Box(modifier = Modifier.fillMaxWidth()) {
   IconButton(onClick = dismissClick, modifier = Modifier.align(Alignment.CenterStart)) {
      Icon(
         Icons.Default.ArrowBack,
         contentDescription = "Exit Diagnostics",
         tint = AccentBlue
      )
   }

And I get that it forces the 48x48 touchable target size. And that's fine and appreciated even. What I want though, is the left edge of the arrow to visually line up with the left edges of the outlined text box and the button at the bottom