Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript AngularJS Basics (1.x) Using Angular's Built In Directives Using ng-blur and ng-class to Improve User Experience

A few weird problems with borders and margins...

I noticed a few problems with the borders and margins in this lesson, and it's due to a small typo or two in the css of the workspaces code. I'll post the answer after I've written it out.

7 Answers

Alright, you'll notice that your code may not be doing exactly what Huston's is doing in this lesson. That's because the CSS in workspaces has a small typo. He shows us a rule when he's talking about the margin problem we have with our action elements, but in his copy of the code, the classes are a bit different than what we have in workspaces. It's a small typo. Just go to main.css, and you'll see a rule that says this:

.list .item.editing .actions {
      margin-top: 17px; }

All we need to do is add the "-item" so that we're targeting the correct classes, like this:

.list .item.editing-item .actions {
      margin-top: 17px; }

and your ng-class declaration will work just fine.

Also, Huston seems to be bouncing between the finished code and our code that we're building, so I think he missed that we need to remove the "editing-label" class from the label element, otherwise we still get the editing border box applied from the CSS rules, even when we're not editing. Go ahead and remove the class from the label element, and you're HTML markup should look like this:

<h1 ng-click="helloWorld()">My TODO's</h1>
    <div ng-controller="mainCtrl" class="list">
      <div class="item" ng-class="{'editing-item': editing}" ng-repeat="todo in todos">
        <input ng-model="todo.completed" type="checkbox"/>
        <label ng-hide="editing" ng-click="helloWorld()"><!--Your code has an "editing-label" class here. Remove it-->
          {{todo.name}}</label>
        <input ng-blur="editing = false" ng-show="editing" ng-model="todo.name" class="editing-label" type="text"/>
        <div class="actions">
          <a href="" ng-click="editing = !editing">edit</a>
          <a href="" ng-click="helloWorld()">save</a>
          <a href="" class="delete">delete</a>
        </div>
      </div>
    </div>

That should allow the class that is applying the border (editing-label) to be toggled by default as you show and unshow the input and the label, and should bring you up to speed with the end of this lesson. Happy Coding!

Nicolas

Very helpful. I hope they update the video.

Thanks.

Thanks that helped a lot.

Preston Davis
Preston Davis
5,932 Points

They should REALLY fix this video.

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,252 Points

Thank you, Nicolas Hampton

I've just applied this fix and it worked perfectly.

I wonder if this could be added to the teachers notes if it's too late now to edit the video Huston Hedinger Thanks :)

Anthony c
Anthony c
20,907 Points

this was helpful thanks!

Thanks! This was driving me crazy trying to figure out why it didn't work.

You're welcome everybody! Sorry about the delay in response, I've just been kept really busy as of late! :smile:

Jonathan Leon
Jonathan Leon
18,813 Points

I also can't figure why from the last video, it changed so the buttons aligh to the right in this video..? their align values in the css are correct but I still can't figure it out its been a while since ive touched any css.

help anyone? :)

worked for me. thanks!