Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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

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>

Well spotted. Thank you.

Lanre TH
Lanre TH
1,037 Points

that was dope!

thanks a lot!

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

Levi Edwards
Levi Edwards
9,834 Points

Thank you!! you rock!

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.

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

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,008 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;
}

Now what is this?

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 90,717 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 :)

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,008 Points
python -m http.server

CD into directory of index.html

make sure you install python 3.5 correctly.