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 trialNicolas Hampton
44,638 PointsA 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
Nicolas Hampton
44,638 PointsAlright, 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
Preston Davis
5,932 PointsThey should REALLY fix this video.
Jonathan Grieve
Treehouse Moderator 91,253 PointsThank 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
20,907 Pointsthis was helpful thanks!
Janice Childers
18,958 PointsThanks! This was driving me crazy trying to figure out why it didn't work.
Nicolas Hampton
44,638 PointsYou're welcome everybody! Sorry about the delay in response, I've just been kept really busy as of late!
Jonathan Leon
18,813 PointsI 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? :)
Madelyn Petersohn
5,005 PointsI used the answer by Iain Simmons on this post to fix the CSS...
It worked for me :)
Philip Howley
11,796 Pointsworked for me. thanks!
agreatdaytocode
24,757 Pointsagreatdaytocode
24,757 PointsVery helpful. I hope they update the video.
E-M Grey
10,131 PointsE-M Grey
10,131 PointsThanks.
Brendan Whiting
Front End Web Development Techdegree Graduate 84,738 PointsBrendan Whiting
Front End Web Development Techdegree Graduate 84,738 PointsThank you!!
Jaymes Young
36,282 PointsJaymes Young
36,282 PointsThanks that helped a lot.