How to center the textarea in a form

HTML-CSS
#1

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:

#2

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

1 Like
#3

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

#4

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.

#5

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…

#6

Thanks for the advice :smiley:

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

#7

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.

#8

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

#9

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

#10

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:

#11

i found the answer. anyway thanks :grin:

#12

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