Angularjs UI y boostrap 3.0 problema con formulario dentro de Tabs

El siguiente articulo es un tanto técnico, pero quiera publicarlo para que otros pudieran resolver el mismo problema que tuve.

Angularjs es un framework javascript que nos ahorra mucho tiempo en el desarrollo de una aplicación web, para este framework existe una versión de Boostrap con todos los widgets convertidos en directivas.

Ahora bien con el widget Tabs de bootstrap existe cierto problema cuando tienes un formulario dentro de las tabs he intentas acceder al ngFormController dentro de tu controlador. El problema es que en tu controlador no existe el ngFormController de tu formulario por lo tanto no puedes acceder a ninguno de sus metodos.

El problema en si es que la directiva Tab crea un scope aislado y todo elemento dentro de el sera aislado de su padre , por tal razón nunca aparecerá dentro del scope padre. La unica forma de resolver este problema es usando la directiva  "ng-form" de angular para crear nuestro formulario y pasando como modelo un objecto anteriormente definido en el controlador padre, de esta manera cuando la directiva Tab cree su scope heredara del controlador padre.

He creado un ejemplo de como debería de ser resulto este problema :

http://plnkr.co/edit/HKyh1BJYL12knGMfkRq0?p=preview

Mas información en detalle del problema en el siguiente link donde estuve preguntado sobre el problema :

https://github.com/angular-ui/bootstrap/issues/574#issuecomment-34859522

Google Maps a pantalla completa con paneles sobre el mapa.

Recientemente he comenzando una web app donde el mapa de GoogleMaps tiene que estar como background y todo el contenido de la aplicacion sobre el al estilo de ventanas flotantes. Este tipo de web app es muy comun actualmente, por lo cual queria compartir con ustedes la manera en como lo hice para que puedan aplicarlos en sus proyectos.

En el siguiente link de jsFiddle encontraran todas las clases necesarias como poderlo reproducir en sus proyectos, he usado boostrap 3 para el estilo de los paneles. Lo importante seria que los elementos que quieres que floten sobre el mapa tienen que tener la clase "overMap" adicional a esta clase tienes que agregar otra la cual determinara la posicion en sobre el mapa , aqui una lista de las que puedes usar:

• overMap-topCenter
• overMap-topLeft
• overMap-topRight 
• overMap-bottomCenter
• overMap-bottomRight
• overMap-bottomLeft
• overMap-centerAll
• overMap-centerLeft
• overMap-centerRight

Segun cual asignes determinara la posicion.



Creo que no se ve muy bien en la vista previa de jsFiddle , asi que les dejo el enlace directo a la aplicacion a pantalla completa donde podras ver mejor el resutado:

link : http://jsfiddle.net/SaulBurgos/3FtbC/4/embedded/result,js,html,css/

Comparativa de css framwork web

Por que de solo bootstrap no se  vive  ...encontre una web donde hacen una buena comparativa entre distintos frameworks css para crear proyectos web de manera rapida.

Ahora solo falta que escojas uno y te pongas a trabajar.

link : http://responsive.vermilion.com/compare.php

Problema google maps y bootstrap 2.0

Hola trabajando en un proyecto me he encontrado que cuando usas bootstrap 2.0 y pones un mapa algunos controles y infowindows no se ven como deberian algunos salen cortados y a veces no se ven .

El problema parece ser es en el css de bootstrap en una line de codigo que comienza con :

img{max-width:100%;vertical-align:middle;border:0;-ms-interpolation-mode:bicubic}

la parte que nos afecta es:  max-width:100%;  que se usa para motivos de responsive design en mi caso el proyecto no usa responsive design en ese caso no era necesario. para arreglar el problema solo tienes que quitar esa parte del codigo y el problema estara resuelto.

aqui puedes ver un ejemplo del error: http://jsfiddle.net/jhnRD/1/

aqui el resultado cuando no usas bootstrap : http://jsfiddle.net/aVx8L/