How to style this

Knack Community
1

style_feed

This field renders a TEXTAREA on the front end on a form.

I would like that text area to be longer than normal so created the following CSS, but it has absolultely no impact on a form page. Does anyone know why?

#field_189 {
width: 650px !important;
height: 150px !important;
padding: 12px 20px !important;
box-sizing: border-box !important;
border: 2px solid #ccc !important;
border-radius: 4px !important;
background-color: #f8f8f8 !important;
font-size: 16px !important;
resize: none !important;
}

1 Like
2

Hey @GSH, the only thing you’re missing is textarea before #field_159, like so:

textarea#field_189 {
  width: 650px !important;
  height: 150px !important;
  padding: 12px 20px !important;
  box-sizing: border-box !important;
  border: 2px solid #ccc !important;
  border-radius: 4px !important;
  background-color: #f8f8f8 !important;
  font-size: 16px !important;
  resize: none !important;
}
3

Hi there.

Thanks for this and it’s weird because on the form page the width value is not being updated for the text area. Do you know if there is something on a typical form page that would restrain the text area boxes from being larger if you wanted to set their input size beyond what they are set at?

This is the CSS

textarea#field_189 {

width: 800px !important;

height: 300px !important;

background-color: #f8f8f8 !important;

font-size: 16px !important;

resize: horizontal;

}

4

There’s a few things at play here:

Knack’s native styling for the form column element has a max-width of 600px, whereas you’re specifying 800px:

.kn-form-col.is-constrained {
  max-width: 600px;
}

There are also a lot of CSS parameters on textareas and inputs specifying min-width: 100% and max-width: 100%, meaning your custom width specification and resizing is ignored and blocked respectively.
You might need to do a bit more overriding of CSS than just the textarea field unfortunately!

5

Thanks for that, looks like I need to go a little deeper!

6

Here is a tool I use to ID really weird selectors

1 Like