Survey Form - Project

#1

Hi,

Could someone tell me how I make the placeholder text, inside the textarea ( Enter your comment here) appear on the top left ?
I have tried different variations, such as the vertical-align property, but nothing happens.

Here is my pen: https://codepen.io/nenna_e/pen/pooBXZQ?editors=1100

Also, the default mode of the radio-buttons and the check-boxes didn’t appear with the blue background (as checked) yesterday…how come this happens overnight when everything in the code looks just the way it did the day before… :thinking:??

#2

Not related to your questions, but I found a typo (width) here:

.container {
  widht:100%;
  padding: 7rem 7rem;
}

Not sure what you mean.

#3

Sharp eye :), thanks.

As you see now. The radio-buttons and also the checkboxes appears with
a blue background to it when checked. This wasn’t so yesterday. Yesterday they
appeared with a white background and the check / dot appeared with the same color
as the darkest text in the survey form.

I can’t figure out how this could happen…

#4

image

I don’t see a blue background when checked.

This might have to do with browser default CSS.

#5

Yes, that is exactly what it looked like yesterday for me ( I’m using the same browser as yesterday).

#6

Can you post a screenshot of what you see, if it’s different than my screenshot. Also try looking at the page on another browser/device.

In regards to the textarea, this is your problem:

image
image721×58 3.75 KB

Right now you are using <input type="textarea">. But “textarea” is not a valid type of input, so the input defaults to “text”. And that is only a one-line input. So use <textarea>.

It’s probably a good idea to make sure all the tests are passing before you get nitty-gritty with the styling.

Everyone has a different process when working on a project, but I find it good to make sure all the html is correct and the user stories are passing before trying to make it look perfect. In this case, passing the user story test would have solved a styling problem for you.

#7

Then my main problem here seems to be that I’m not even recieving any failed reports when I run the tests, except for the “#moccha div missing” warning:

29
29867×479 35.4 KB

Textarea did the trick, thanks!

#8

Here is the other screenshot:53

They look the same on safari at least. But on my mobile they look totally different- probably bacause I haven’t made it responsive yet?

#9

This is a problem that it seems many people here have had. If you search the forum for “mocha div missing” you will find many posts and many solutions. One of them is that you have to add codepen.io to the list of allowed third-party website cookies.
First, check your browser’s console for errors. You can post what you see here.

What browser are you using? The test suite might only work in Chrome.

#10

I solved the test issue. As you wrote, it was a cookie problem :).
And again - thanks!

#11