How to center the textarea in a form

Tell us what’s happening:
Hi all. I was working on the project Survey form. I tried my best to beautify it. I noticed the textarea is not positioned in the center. I change the space by using the padding of the form.

Can someone help to center it properly.

Thanks a mil.

Your code so far
Link to the whole code.

https://jsfiddle.net/17tkfwzx/

below is the part in question:

#survey-form {
      
      border: solid;
      padding: 20px;
      margin: 50px 100px;
       }
    textarea {
      width: 100%;
      min-height: 100px;
      resize: vertical;
      border-radius: 10px;
    }

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36.

Challenge: Build a Survey Form

Link to the challenge:

Hi, you can try applying box-sizing: border-box; to textarea.

1 Like

Cool! Thanks i will check it out and let you know if it worked :smiley:

Just took a look at your form @Hisoka. You should not be using <br> to force line breaks or spacing. You use CSS for that.

Thanks it worked! :grin:

But i am wondering why the size of the textarea did not adjust without the box-sizing: border-box;.

Does it have a default size shown somewhere?

I remember i tried to look for the default of textarea on w3schools but it shows it has none…

Thanks for the advice :smiley:

What should i use to line break? display: block; or clear? maybe div?

The spacing can be achieved by using padding and margin on your elements. In some cases you may nest your elements inside a <div> tag, give a class attribute to the div and set the margin and padding as needed.

Check also the differences between block and inline values of the display property in CSS.

The CSS default box-sizing value is content-box, making the element wider.
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

What i meant using an element different from “br”. because @Roma said its not good to use br

its not what i meant. the textarea defualt styles. size, magrin, padding etc. each element has their own defaults.

though thanks for the link. explains why the measurements are different. :slightly_smiling_face:

i found the answer. anyway thanks :grin:

Good job! That’s why we say Read-Search-Ask
Part of being a developer is using Google to help find answers to problems.

1 Like