TextArea line spacing

Anvil Q&A
1

image
image1071×268 32.8 KB

What I’m trying to do:
I’m trying to increase the space between the lines in my TextArea

I think the place to look is the in the Assets, theme CSS. I don’t know precisely which roles and such to consider, I also don’t know which parameter to try to change. Also, I’m uncertain if theme CSS is available… I have some forms that I created as ‘custom HTML’ - in those I see the html property. Others, like the form I’m working in… I created from ‘Blank Panel’ so, I don’t see editing the html as an option.

2

This is by no means a full answer, but I wanted to share what is in one of my theme.css files from ages ago pertaining to text boxes, encase it helps you.

/* Component: TextBox + TextArea -------------------------------------------------------------------------------    White textarea*/

textarea.anvil-component {
  font-size: 20px;
  line-height: 1.5; <---------------------- Change this number
  /*border-radius: 0;*/
  background-color: white;
  color: rgba(0,0,0,0.87); /*entered text colour*/
  box-shadow: none;
  border-radius: 5px;
  outline: none;
  /*padding: 20px;*/
}


/* Component: TextBox + TextArea -------------------------------------------------------------------------------    Default textarea*/

input.anvil-component, /*textarea.anvil-component,*/ .anvil-component select, .anvil-datepicker input {
  font-size: 20px;
  line-height: 1.5;
  border-radius: 0;
  background-color: transparent;
  color: rgba(0,0,0,0.87); /*entered text colour*/
  box-shadow: none;
}

Here’s what I think is going on:

  • Change the line height attribute for the textarea.anvil-component, something like 1.6 gives a good spacing
  • Comment out the textarea.anvil-component from the input.anvil-component line - this is presumably to stop it conflicting, but I don’t remember if that actually does anything, it was a while back and I was experimenting.
3 Likes
3

Completely fixed the issue, thanks!

4

One more line I (almost) always add to theme.css is this:

/* allow text areas to resize only vertically */
textarea {
  resize: vertical;
}