JavaScript Treehouse Club - MASH MASH - HTML Forms/Divs/Input

Iván Herrera
Iván Herrera
3,043 Points

I can't click in the first box of every form, i can type in when i use "tab" button though, anyone knows the solution?

When i'm filling the form i can't click nor type in in the first box of every question unless i use "tab" button

Can you post a snapshot to your workspace?

You can see how to take a snapshot here:

It will be easier to check out your problem if we're testing in the same environment as you.

3 Answers

Good catch!

I had some trouble figuring out exactly what it was.

The problem is with the answer div at the top of the form.

<div id="answers" class="hide">
      <p>Your home is in <span id="location"></span> with a <span id="pet"></span> as you are a <span id="profession"></span> who owns a <span id="home"></span>.

Initially this div is hidden and then it's shown when you submit the form. The problem is with how it is hidden. It's given a height of 0 and opacity of 0.

This means that the paragraph inside of the div is going to overflow its container and overlap with the text inputs below.

Even though you can't see that paragraph it is still able to cover the inputs and block the click.

Probably one of the easiest ways to fix it is to add overflow: hidden; to the answer div styles so that the overflowing paragraph is hidden. This way it doesn't overlap and block the inputs.

Line 60 in the css file is where you should find the #answers styling. Add the overflow: hidden to that.

#answers {
    /* opacity: 0; */
    margin: 60px 0;
    background: #fff;
    border-radius: 6px;
    color: #BB475C;
    transition: 1s linear;
    overflow: hidden; /* add this */
Iván Herrera
Iván Herrera
3,043 Points When you go to the preview, you can't click in the first box.