How to prevent table re-size when use ng-show?

Question

I have a table that uses Angular's ng-show to hide/show a drop-down menu in the table. The problem is that when you select a button to edit a row in the table, the table re-sizes. This can be disorienting for the user when the table is really long.

Here is my code

Answer 1

Right now you table cells grow and shrink with the content. When the content grows, so does the table cell. Since your dropdown is larger than the text the table reformats itself. This issue can easily be solved by setting a width and height on the table cell that changes. Here is your example, updated:

http://plnkr.co/edit/4xyoVxc7kn8dFWhNob4G?p=preview

By setting a width and height on the Event Name column the table no longer needs to reformat when the content changes.