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

Posted by Sean Ford
Sean Ford
9,581 Points

The CSS changed a bunch between the last video and this one (edit/save/delete buttons, input border) without explanation

how can I fix my css to look like Hustons?

8 Answers

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Just add class="item" to the div with the ng-repeat directive, and strangely enough, remove the class="editing-label" from the label.

Oh and in the video he has class="Delete" on the last a element, but it should be lowercase: class="delete", if you want the red 'delete' text.

    <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()">{{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>
tomasliashuk
tomasliashuk
8,014 Points

Well spotted. Thank you.

Lanre TH
Lanre TH
1,037 Points
Lanre TH
Lanre TH
1,037 Points

that was dope!

Yang Li
Yang Li
290 Points

thanks a lot!

dont know why he didnt even talk about the updated version a little bit.

Levi Edwards
Levi Edwards
9,834 Points
Levi Edwards
Levi Edwards
9,834 Points

Thank you!! you rock!

Petrov von Petrov
Petrov von Petrov
21,916 Points
Petrov von Petrov
Petrov von Petrov
21,916 Points

It's hard to believe that 5 months after this issue first popped, the problem still remains... Come on... Either update the Workspace to include the changes in the index file, or (better) update the previous video to guide us to effect the changes ourselves. Having to fish for the solution to this in the questions tab isn't great user experience.

Faddah Wolf
Faddah Wolf
12,811 Points
Faddah Wolf
Faddah Wolf
12,811 Points

Sean Ford,

you should probably mark the top answer, with six votes, as the best answer. worked for me, and that would close this out.

Huston Hedinger - you might want to take a look at this and update the course appropriately ā€” otherwise, a lot of us got lost with how the CSS looked in the last video compared to this one. just my suggestion.

best,

ā€” faddah

 portland, oregon, u.s.a.
Phillip Stafford
Phillip Stafford
3,180 Points
Phillip Stafford
Phillip Stafford
3,180 Points

To get the CSS right, make sure to change the following line:

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

to

.list .item.editing-item .actions {
  margin-top: 17px; }
jason chan
jason chan
31,009 Points
jason chan
jason chan
31,009 Points

Sorry about that now I know what you mean watching the video.

my rough guess of the css for that. 

.actions{
  text-align: right;
  border-bottom: solid 1px #C0C0C0;
}
Bappy Golder
Bappy Golder
13,449 Points

Now what is this?

Christian Carey
Christian Carey
15,445 Points
Christian Carey
Christian Carey
15,445 Points

Make sure that you've put 'class="item"' into the div that contains the ng-repeat directive. The CSS that isn't showing is being applied to the item class.

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Have you downloaded any project files? I've not taken the course but Huston may have given you updated CSS files for your part of the course :)

Sean Ford
Sean Ford
9,581 Points

I had downloaded the files, but due to the use of the NG-Inspector Chrome extension I had to switch over to Workspaces several videos back. As far as I can tell, the CSS is identical in Workspaces and the downloadable project files--and in Jason's code snippet below. Speaking of which, I tried installing Python to my Windows 10 machine to set up a SimpleHTTPServer so I can follow along in my own local development environment, but could not get Python to work. I downloaded and installed the newest version, but when I tried the python -m SimpleHTTPServer 2020 command in the console, it responded saying python isn't a recognized command. Help with that would also be greatly appreciated! Thanks!! :D

jason chan
jason chan
31,009 Points
jason chan
jason chan
31,009 Points 
python -m http.server

CD into directory of index.html

make sure you install python 3.5 correctly.