Problem width Radio Buttons and Checkbox - Survey Form

HTML-CSS
1

Hi everyone,

I’m currently making my survey form for the Free Code Camp HTML/CSS project. However, as I’ve been making this web page for some reason radio buttons, as well as checkbox, disappear . The buttons appeared on HTML but now I cannot find them. This is the last test that still i couldn´t pass.
Here is the codepen :

I really hope you can help me. Sorry for my English.

Thanks!!

Your code so far****

2

the error is in the css when you style the input:

input {
    font-size: 15px;
    display: block;
    width: 100%;
    height: 100%;
    padding: 10px 15px;
    background: none;
    border: 1px solid #a0b3b0;
    color: #c1bdba;
}

to style text input fields you styled all the inputs,
and setting height: 100%,
the radio are not showed because parent container height is equal to 0,
to style only text inputs use a class or use: input[type=text]{ }

2 Likes
3

Sorry for my english too! :rofl:

1 Like
4

Hi @saraeolivera and @miguelgiacobbe

You will finish by hate me @miguelgiacobbe haha! The height of the parent container will be set at auto if there is no size specified (default value), plus in setting the size at 100% for both width and width for each input means that each input should take all the space in the container, but there are other elements inside the container. So it create a bug. If you try to set up only the width, it will work because there is a specific size for the container width, and they are set up as block. Do you agree with that?

@saraeolivera in doing your style for the input tags, what did you want to style exactly? The little squares and rounds that represent the checkboxes and radio buttons or the text of them?

1 Like
5

You have a good English :+1:

1 Like
6

Probably freeCodeCamp will kick me out for disinformation!
:disappointed_relieved:
Thank you to reviewing my answers!!

7

Not at all, we need you here! It was in reading you I interpreted, that’s why I ask you if you agree. Even maybe when you said 0 in your mind it just means it starts from 0. You are giving infos no disinformations. Even what I said is maybe wrong according to another dev. :wink:

8

thanks,
See you next in the forum!

1 Like
9

Hi! @LucLH ! Thanks for helping me. I did not want to style the squares neither the rounds of the radio buttons. I just wanted to style the inputs that are above checkpoints and radio buttons but, somehow, the style I gave affected all.

I really appreciate your help.

10

You’re really welcome @saraeolivera! You mean the label texts of each radio/checkbox right?

11

If it is the text part, you should apply the style for the label tags. When you try to change the input tags style, you are working on the squares or rounds beside the text, so not the text directly.

12

I meant the labe "name"m “age” and “number”. What i did now is a div to style these three. Now radio and checkboxes are shown but under the question and not side by side.

I

print 1
print 1798×369 17.9 KB

1 Like
13

I think the radio should be inside the label…

2 Likes
14

I have already solved the problem! (it took me a while) Thank you guys for the help!!

Here is the result:

2 Likes
15

Perfect @saraeolivera, it was on the label you had to work. Congrats for your project :wink:

1 Like
16

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.