Survey-form text area alignment problem

Survey-form text area alignment problem
0
#1

running the code on local browser giving correct output like firefox ,chrome etc;
but while running on codepen.io alignment of textarea changed.
can anyone tell me solution?
https://codepen.io/Shewalkar/pen/oRWQep

#2

Can you upload what you have locally to a GitHub repo? Then we can look at the differences. If you have the exact HTML and CSS it will be the same. I even exported your pen and looked at it locally and it suffers from the same alignment issues.

#3

I did notice one html syntax issue. You have an invalid element type (lable instead of label). Though it is not causing trouble, your ids should be unique in your document. You have id=“label1” on several labels. You should use a class selector and add class=“label1” to the label elements instead.

1 Like
#4

You need to clear the div after the #checkbox div

I would change the HTML to this

<div class="textarea">
  <label>Any Suggestions</label>
  <textarea></textarea>
</div>

You can then add this CSS

.textarea {
  clear: left;
  text-align: center;
}

.textarea > * {
  vertical-align: middle;
}

You may want to look a bit more into how floats and clearing works


But I would suggest not using floats unless you have to practice using them.

#5

Thanks for the help,problem resolved.
But I’m not getting why the output of pencode.io and local browser are different for background color?
can run same code on local browser and on codepen.io check for color scheme on both ?