This post is about JQuery’s modal() function and not the dialog() function. There is the common problem that when the content is long, the height of the modal window does not automatically adjust based on content height.

To bypass this problem, you need to listen to the show event and resize the modal window. This is how to do it.

This code sets the width to auto as well. However, you can change the width value however you see fit and the height will still auto-adjust itself once the show() function is called.

If you noticed in the code, the max-height attribute is set to 100%. If your content is too long, chances are your modal window will be displayed beyond the screen height. To ensure that the height stays within the display screen height, you can use this value instead:

Where 0.8 means 80% of the window screen height.

If you have no idea what JQuery Chosen is, it is simply a plugin that makes long, unwieldy select boxes much more user friendly.

Using it with Angular JS is no problem. However, a cleaner and simpler way to use it is to make it as a Directive.

For me, this is how I did it.

I used the ngModel attribute to have the scope listen to any changes to it like setting a default value or when a user selects an item in the dropdown.

I tried to use ngOptions as my first choice and had the scope listen to ngOptions.length or attrs[‘options’].length. However when it gets loaded, since I am getting my list asynchronously from the server, it will throw out an Exception.

Not a program stopper but as a developer, nobody wants to see any kind of error messages in the console no matter how harmless they can be. In my case, since I always set all my ngModels a default value, I decided to listen to this attribute instead.

Suppose we have this Javascript code using JQuery:

Now we want to get the $(this) object in Angular JS, you can use the $ variable in order to do this.

And within your selecTab method, you can get the reference of $(this) by doing it like this:

Related Posts Plugin for WordPress, Blogger...