CSS + Ionic

ionic-v1
1

Hi.

I have the following form and I’m having some problems with CSS only when I use it on Android.

        <ion-content class="has-header">
            <form novalidate="novalidate" on-valid-submit="enviarOrcamento(orcamento, orcamentoitens)">
                <div class="list">
                    <p class="padding-top padding-left padding-right">Por favor preencha os campos abaixo para que possamos lhe enviar um orçamento:</p>
                    <label class="item item-input validated">
                        <span class="input-label">Nome</span>
                        <input type="text" style="text-align:right" placeholder="seu nome" ng-model="orcamento.nome" required="required" name="nome">
                        <i class="icon ion-alert-circled error col col-10"></i>
                    </label>
                    <label class="item item-input">
                        <span class="input-label">Empresa(opcional)</span>
                        <input class="validated input" type="text" style="text-align:right" placeholder="nome da empresa" ng-model="orcamento.empresa">
                    </label>

Using iOS it shows the label align to the left and the input with the place holder align to the right (perfect). But using Android it shows the label and the input align to the left.

I have others problems. On Android when I have a input with focus and scroll down the screen, the focus (input border) come down together with the screen. And the other problem is that this input border (focus) take more space than it could take, overlaying the label.

Does anyone knows why?

I did not changed the Ionic CSS. This happens in every single input (using the “validate” CSS or not). The CSS from validate I took from here:

Best regards.

Wilton Ruffato Wonrath

2

Hmm, a few question first.

What version of ionic are you using? Can you test this with the nightly builds.
Also, what version of android is this happened on?

3

Hi.

I’m using v1.0.0-beta.8 “fermium-flamingo” and I also tested with nightly build but the same problem continue to happen.

Android 4.0.4 on Xperia Neo and Android 4.1.2 on Samsung Galaxy Tab 3.

There is a “solution” here: http://dogma.co.uk/blog/12-ongoing-problem-with-android-input-boxes

But this solve some problems and create a few others. Any ideas?

4

Hmm, alright can you put this together in a codepen? The snippet above is a bit incomplete

I can test it on a 4.0 and 4.1 device and see what would be the best way to solve this.

5

Hi. I clean it a little but if you need any further information please let me know.

I also changed the link to point to the nightly build.

Best regards.

6

Hmm So I tested this out on a 4.4 device and everything works out great.

Tested again on 4.1 device ( didnt have a 4.0) and things were a bit off as you described. My best bet would be to remove the style and see what works on all platforms and what doesn’t The older webview may just not support it for some reason

7

I encountered the problem with the text-align on Android. My text align on the left on my Xperia SP (4.1.3 or 4) even if I set it on the right. Does anyone solved this problem ? it’s not a big problem but I would like to know if there is a solution. thanks

Edit : Nevermind, I made a mistake, my div class was “col-50” instead of “col col-50”.