Text input size

The upgrade that included validation, has impacted the sizing of text input elements. The text input does not fill the allocated area. Have others seen this issue? Is there a workaround?

1 Like

Hey Chris!

Would love to take a look at this. Would if be possible for you to post a screenshot that shows what you mean by “the text input does not fill the allocated area”?

Hi Ryan, Thanks for the quick reply. Here is a screen shot. The “insights” text input was highlighted so you can see delta between allocated space and used. Same thing happened for other text input on screen and I can’t seem to control the size of the text input.

Got it, thanks for the clarification!

We’ll look into this and I’ll get back to you when I have some more information on a fix.

Hey @chris-g, while we work to get the bug fixed, here’s a CSS workaround:

  • Add a Text Component to the app.
    • Turn on “Render as HTML”
    • Turn off “Render as Markdown”
  • Add this CSS code to the value of the Text Component:
<style>
  .input-control-component__multiline .flex {
    flex-grow: 1;
  }
</style>

That should make the text input grow to fill the space like this:

This workaround wil solve the issue for all text inputs on this page, but will not affect other Retool pages. If you want to do this for multiple Retool pages at once, you can add this to the “Preloaded CSS” area in the advanced settings page (it’s the same, just without the <style> tags):

  .input-control-component__multiline .flex {
    flex-grow: 1;
  }

LMK if that works for you!

1 Like

Hi @alex . Thanks for the update. I am using text input vs text so I set the css on the advanced settings screen. It worked for Chrome but did not resolve the issue in Safari. The safari issue came up in some searches but I didn’t get to a resolution yet. Chris

Hey @chris-g – just wanted to let you know that we shipped a fix for this bug last week! :tada:

You can remove the custom CSS and it the Text Input component should grow to the size of its container correctly now. Please let us know if there’s anything that we can help with.

Great! Thanks @alex

Was this definitely fixed? I’m still seeing the issue. Text Input components are not growing to the size of their containers. Screen Shot 2020-05-09 at 3.37.51 PM