I don't want to make the textInput two rows tall – I'm just trying to make the font-size and input field itself larger for a single line of text.
Has anyone achieved that with custom CSS?
Hey @aac!
You can do this with custom CSS!
<style>
._retool-textinput1 * {
font-size: 1.05em;
}
</style>
Just replace textinput1 with the name of your component.
As customary, screenshot of it in action!
*Edit: the second style tag should be
</style>, but this doesn't break the functionality in this example
Hey @aac can you clarify what you mean by the input box in this case? There are a few different pieces of text (placeholder, input text, label, etc). Is there one in particular that you’re looking to control?
Also, if you are familiar with CSS you can also inspect the page with Chrome DevTools to find the right elements to target.
The white container with rounded corners that the "Company Name" input resides in. I've been trying to figure out which element to modify using DevTools, but haven't quite worked it out.
The .retool-widget .retool-container has height: 40px. Everything beneath it seems to have height: 100%. Increasing that height to say, 60px, increases the size of the preview box in the DevTools, but doesn't increase the size of the white input container. So with your original suggestion, I was able to make the text inside that input bigger, but I want to make that entire container bigger itself, without dragging it down to another row, which'll double the height (and makes it look like two text lines).
Hey @aac, sorry for the delay. You can technically do this but I don't really recommend it, haha. There will probably might be some unexpected side-effects and if/when we update the CSS on our side yours will probably break (plus our design team is going to reprimand me for posting this poorly-written CSS).
<style>
._retool-textinput3 .ant-input {
height: 40px;
bottom: 7px;
font-size: 15px;
}
<style>
You will want to change textinput3 to the name of your component. Also, you can adjust the values for the height and bottom properties to your liking.
1 Like
@luccmattos you're confusing the Text component with the TextInput component. The former has a value prop you can set.
But is it possible to use for TextInput then ?
Hi @luccmattos! Are you looking for the value box so you can write custom CSS? If so, custom CSS has now moved to a different part in the app! You can click the three dots > Scripts and styles > CSS, then write your CSS there 
