When I used a bootstrapped 3.0 template together with Angular JS, I found out that the height of the DIV layer where ng-view resides does not change its height to fill the window viewport height if its content height is small.

I have not found any solution in any forum regarding this problem so what I did was to create a directive and added it to the HTML element where ng-view is located.

My template contains only a horizontal bar at the top, while the bottom is occupied by the content where ng-view is.
This is my HTML:

This is my directive:

What the code does, is that once the ng-view works its magic and populates the HTML contents to the DIV layer, the Angular JS Directive will wait for the DOM till it is ready. Angular JS also has its own way to detect if a DOM is ready the same way JQuery does, but with a different syntax.

Once it is ready, I call on the $(window).resize() function to simulate a window viewport resize, then do the formula to adjust the height of the DIV content layer to fill the extra height of the window viewport.

Without calling the resize() function the height adjustment will not work when, say, you have a tab element and one of those tabs contains small content.

If you have a footer at the top, then simply add the footer height to the computation.

This one was another pain. The error message is misleading one would think right away there is something wrong in the XML layout file.

Although there may be times the cause would be that, the most obvious cause for this is when you have large images placed in only one drawable folder.

In my case, I placed the image in the drawable-sw600dp-hdpi folder and when I deployed it in my Samsung Galaxy S2, it produced this error because Android resized the image as a Bitmap in every row in the Listview.

As well, I guess it ran out of memory since the phone only has 1GB of RAM unlike my Nexus 7 2nd Gen where it has 2GB of RAM so that masked the real cause lay on the image being resized.

The more rows shown in the ListView, the more probable occurrence that this error message will show up and crash the app.

Try to add the same images in all the drawable folders regardless if they are resized to a smaller resolution or not. At least, the Android OS will just pick up the images right away without having to resize them accordingly.

A normal thing occurs to EditText widgets whenever a very long text is entered. What happens is that the width of theEditText gets resized even if you place android:layout_width=”wrap_content”.

But do not fret. There is a way to go around this. Use the attributes android:layout_width=”0dp” andandroid:layout_weight=”1″.

It also helps (but not necessary) if you ensure that the EditText is only a one-liner by adding android:singleLine=”true”.


Related Posts Plugin for WordPress, Blogger...