Problem with new tab style con Android


#1

I have recently read somewhere in the forum (now I can not find the topic anymore) that changes on Android tabs style where intended to make it look more like a native app. But as you can see in the attached screenshots that is not what I am getting.

I am using latest Ionic version (1.0.0-beta8) with Cordova 3.4.0-0.1.3 and a Nexus 4 (it obviously does not happen on iOS or web views).

Android 4.4.3 on an Nexus 4

iOS 6.1.6 on an old iPhone 3GS

Desktop Chrome


Images in this forum
#2

Yo también he leído en algún lado que están implementando cambios en el layout de las apps según el tipo de dispositivo.

También leí que habia la opción de definir el tipo de dispositivo mediante una var en ionic, lo cual hacía que se tratara la app de igual forma en todos los dispositivos.

Igualmente, si te ves con problemas intenta inspeccionar elemento con el nexus4 enchufado al PC utilizando la función de Inspect Devices, (esta URL en chrome: chrome://inspect/#devices, solo funciona con Android 4.4) y comprueba si ionic aplica algún tipo de classname en el body de tu app u otro tipo de cambio en el DOM del documento.

En ese caso ya puedes modificar mediante CSS las tabs y otros elementos de tu app para que sean similares.

O simplemente esperar a que todo avance un poco más :stuck_out_tongue:


#3

Hey there! Interesting, Seems like it could be a few things. First off I would suggest upgrading to cordova 3.5, which is the latest version (just for stability :smile: )

Secondly, was this a project made with the CLI? If not, what plugins do you have installed?

The platform specific features are made possible by using cordova’s device plugin.


#4

We are having the same issue as shown in the picture. Any way to revert to previous behavior without downgrading?


#5

Was your project made with the CLI? If not, what plugins do you have installed?

The platform specific features are made possible by using cordova’s device plugin.


#6

¡Ey! Thanks to everybody for all your answers but today is holiday, here in Spain (we are celebrating we have a new king in the throne of iron, ¡d’oh :stuck_out_tongue: !).

Anyway, I will be back to work tomorrow and I promise to try all you say and answer ASAP.

Thanks again.


#7

It was initially created from the seed project. I can try removing and re-adding the plugin. In the iOS simulator, everything looks good.
Cordova is at 3.5 on both


#8

Good to know. Yeah with every release and update of Cordova, it’s always good practice to remove and then install the plugins again to update them


#9

Removed and re-added device plugin, but same behavior. Any other file I should look at to make sure that it is being referenced properly?


#10

Are you using any custom style for the tabs or is it just the default?


#11

Just built in ones

<ion-tabs class="tabs-light tabs-icon-top tabs-top">
        <ion-tab icon="ion-person-add" title="My Title">

#12

Can you connect with Chromes ADB plugin and remote inspect the app? See if any errors are coming in.


#13

No errors. HTML for ion-tabs is now this:

tabs-light tabs-icon-top tabs-top view tabs-striped

I do see in the CSS where it is setting it to white. Maybe it is a conflict with tabs-light and active. Will try a different color.


#14

If I switch to tabs-positive it does this:

I can see it, but the bar at the bottom cuts of the text.


#15

You can decrease the line height to fix this.

 line-height: 12px !important;

#16

That doesn’t fix the issue with using tabs-light though…


#17

To me looks like the implementations ond device specific css layouts are a little bit out of control.


#18

I temporarily fixed this by putting this in my css file:

.tabs-striped.tabs-light .tab-item.tab-item-active {
color: black;

}

I’ll keep this in until we get a final result. Still need to test to make sure this looks the same on iOS, but it looks ok on Android and in chrome on desktop


#19

With the amount of post about the tab styling I would have to agree with you @Bonda, but this is why we have a community to discuss things :smile:

I will try to put something together tonight for creating a scss style that will work cross platform. It should be used as a basis for making custom themes.


#20

Muchas gracias, sí, probé lo que dices, en principio para ver si había algún tipo de error en la consola y como no vi nada, supuse que sería un tema de la versión (al fin y al cabo es una beta) y di marcha atrás hasta la última que no tiene el cambio (la 6).

Voy a darle una vuelta más, con el resto de consejos, a ver si saco algo en claro y por colaborar un poco, pero no tengo prisa y me es más cómodo esperar a que salga una versión con la correción :-).