Survey form test 16 and editing labels in nested classes

GhostTheSavage · December 23, 2018, 6:17pm

TLDR: I need help with the 16th test and also adjusting the positioning of the radio/textbox labels. Adjusting the position is fine, but when I attempt to select down to one of the labels within the nested classes it does not affect the content:

.answers .survey-form .answers-list .improve label {
    display: inline-block;
    text-align: right;
    width: 0%;
    padding: 5px;
    vertical-align: top;
    margin-top: 10px;
}

I am missing the last test for the checkbox field. I believe I have met the criteria, but I attempted to accomplish this task with CSS grid. I know it’s unnecessarily complex but wanted practice with CSS grid. One thing is I need to make the grid structures a little less complex…using a nested ul with grid seems to make it difficult to select inner classes.

Also, does anyone know how I can fix the positioning of the labels for the radio and checkboxes? I’ve tried selecting them with classes but have failed.

Thanks for any feedback.

GhostTheSavage · December 23, 2018, 7:42pm

It looks like my code passed all the tests now. However, I am still stuck how to modify the position of the labels for radio and checkboxes. The primary issue is selecting the subclasses, as highlighted in the OP.

lasjorg · December 23, 2018, 10:08pm

To target individual labels, without changing anything to the structure and not giving any classes, you need a pretty nasty selector, using nth-child or nth-of-type

.improve > form > ul > li:nth-child(4) > label {
  font-size: 50px;
  color: red;
}

.improve > form > ul > li:nth-of-type(5) > label {
  font-size: 50px;
  color: blue;
}

lasjorg · December 23, 2018, 10:34pm

I know you’re close to passing all the tests and that’s great and on the surface, it also looks good, but there are things wrong with this.

I guess you did it for layout reasons, but you have some confusing HTML.

The left-hand side of the form should not be a list, and the list items inside that list (the .question-list ul) should have been the labels for the inputs. You also have multiple form elements, you should only have one form element (at least if your making one form with one submitting action).

I know it’s a lot of work but I would really suggest that you at some point try and redo this with a better structure. I know it’s tempting to do “alternative” things with Grid, but in this case, I would really use a more natural document flow and structure.

You have some extremely over qualifying, deeply nested, selectors and some that do not make any sense.

.answers .survey-form .answers-list .comments .comments .comments

At most this should be

.answers .survey-form .answers-list .comments

Even better, the comments class is only applied to the elements it needs to style and can stand alone.

.comments

Selector qualifiers rarely need to go up more then one level as long as you use classes wisely.

Example: I do not need to qualify with .image-grid to get to the paragraph inside .image-container

<div class="image-grid">
  <div class="image-container">
    <h2>Picture title</h2>
    <img src="https://via.placeholder.com/150" alt="">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam architecto minus recusandae sed nobis dolorum fugiat. Quibusdam dicta molestiae numquam eius reprehenderit a exercitationem, doloremque corrupti mollitia aperiam repellendus atque.</p>
  </div>
</div>

.image-container > p {
  font-size: 22px;
  color: #2d2d2d;
}

GhostTheSavage · December 23, 2018, 10:53pm

You have provided some valuable, thorough feedback, which highlights the flaws of me focusing strictly on CSS grid. I had a feeling this was wrong when things became deeply nested. It felt unnatural.

I will redo the project with a more natural HTML flow. What I also gather from your feedback is if I give more unique classes, then I don’t need to reference so deeply modify sub-components. Moreover, as you mentioned, I have multiple forms, which is silly and cumbersome. I did not realize the end result of the form rolls up to an action…

Thank you kindly. I will report back once finished.

GhostTheSavage · December 26, 2018, 1:47am

@lasjorg here is my revised version: https://codepen.io/GhostTheSavage/pen/NejNQj. I overwrote the old.

Two problems:

I am failing the following story:
- “User Story #13: Inside the form element, I can select a field from one or more groups of radio buttons. Each group should be grouped using the name attribute.”
- But as far as I can tell I am passing giving this code, unless I am doing something wrong:

           <div class="inputs" id="inputs-radio">
                <ul class="radio">
                    <li class="rec">
                        <label for="rec">Definitely
                        <input type="radio" name="radio-buttons" id="radio">
                        </label>
                    </li> 
                    <li class="rec">
                        <label form="rec">Maybe
                        <input type="radio" name="radio-buttons" id="radio">
                        </label>
                        </li> 
                    <li class="rec">
                        <label for="rec">Not sure
                        <input type="radio" name="radio-buttons" id="radio">
                        </label>
                    </li> 
                </ul>
            </div>

Lastly, I am attempting to justify the radio and check-boxes. Right now they are awkwardly centered in the middle of their location:

Any suggestions or help would be appreciated.

lasjorg · December 26, 2018, 3:45am

The radio inputs need the value attribute.
Id’s have to be unique, there should not be two id’s on the same page with the same value.
The for attribute value of a label should correspond to the id value of the associated input.
You have miss-typed for as form on the “Maybe” radio input.
Setting the default padding to 0 on the ul’s should help a bit with your layout issue.

ul {
  padding: 0;
}

Spoiler:

Don't peek unless you have to, try fixing it first without looking.

<!-- What you now -->
<div class="inputs" id="inputs-radio">
  <ul class="radio">
    <li class="rec">
      <label for="rec">Definitely
      <input type="radio" name="radio-buttons" id="radio">
      </label>
    </li> 
    <li class="rec">
      <label form="rec">Maybe
      <input type="radio" name="radio-buttons" id="radio">
      </label>
      </li> 
    <li class="rec">
      <label for="rec">Not sure
      <input type="radio" name="radio-buttons" id="radio">
      </label>
    </li> 
  </ul>
</div>

<!-- My fixes -->
<div class="inputs" id="inputs-radio">
  <ul class="radio">
    <li class="rec">
      <label for="definitely">Definitely
      <input value="definitely" type="radio" name="radio-buttons" id="definitely">
      </label>
    </li> 
    <li class="rec">
      <label for="maybe">Maybe
      <input value="maybe" type="radio" name="radio-buttons" id="maybe">
      </label>
      </li> 
    <li class="rec">
      <label for="not-sure">Not sure
      <input value="not-sure" type="radio" name="radio-buttons" id="not-sure">
      </label>
    </li> 
  </ul>
</div>

GhostTheSavage · December 26, 2018, 5:02am

Thanks to your thorough feedback, I am correcting all these semantic mistakes. They come with my lack of experience, so I apologize. I was confused with for, id etc when using labels and inputs, but you cleared that up quickly.

It definitely feels like I am over-qualifying things at times.

For example:

            <div class="inputs">
                <ul>
                    <li class="checkbox">
                        <label for="front-end" class="checkbox-label"><input type="checkbox" name="improve" id="front-end" class="checkbox" value="1">Front-end projects</label>
                    </li>
                </ul>
            </div>

This feels verbose to me. Maybe there are a lot of unnecessary components. I am sure I will learn to not include so much.

Lastly, it seems my labels are slightly above the checkboxes. Is this just a browser thing, or can I fix this minor formatting error?

Thank you for all your help and time. You have increased my learning greatly. @lasjorg

lasjorg · December 26, 2018, 5:55am

You don’t have to apologize for anything, we are here to learn. Making and correcting mistakes is one of the best ways to learn.

OK that was more difficult then I thought it would be, also I’m not really happy with it, but it works without having to add any class or change the HTML. I’m sure it’s a better way, but I will leave that up to you.

Start by removing the .checkbox class from the type="checkbox" inputs, then add this CSS, it should look better.

label {
  display: flex;
  align-items: center;
}

.labels > label {
  flex-direction: row-reverse;
}

.radio > label {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

input {
  margin: 0 5px 0 0;
}

/* Removing the .checkbox class on the checkbox inputs means
 * you have to double the margin here to get the same spacing
*/
.checkbox {
  margin-bottom: 20px;
}

For the name, email, and age. It would help if the inputs and labels had a parent container, then you can use flex-box to align them.

GhostTheSavage · December 26, 2018, 6:41am

Thanks. I think it looks good enough for this exercise. Not sure if you mean a parent container for each, or one parent container for both labels and inputs.

You don’t have to apologize for anything, we are here to learn. Making and correcting mistakes is one of the best ways to learn.

You’re 100% right, above. The exercises are a nice intro but nothing serves better to learning than trying something and breaking it.

Now that I have had some practical experience, I am going to brush back up on flex and positioning of elements. Going through some of these difficulties will hopefully make some of these concepts stick better. Thanks again for all of your help. Hope to see you around.