# CSS + Ionic

**URL:** <https://forum.ionicframework.com/t/css-ionic/6219>\
**Category:** ionic-v1\
**Created:** [June 29, 2014, 7:19pm UTC](https://forum.ionicframework.com/t/css-ionic/6219 "2014-06-29T19:19:25Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![wonrath](https://avatars.discourse-cdn.com/v4/letter/w/e495f1/32.png) [@wonrath](https://forum.ionicframework.com/u/wonrath)\
**Post date:** [June 29, 2014, 7:19pm UTC](https://forum.ionicframework.com/t/css-ionic/6219/1 "2014-06-29T19:19:26Z")

</div>

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:

> **[How to do Validation with angular JS/ionic Framework](http://forum.ionicframework.com/t/how-to-do-validation-with-angular-js-ionic-framework/265/19)**
>
> I popped out and emulated iPhone 4 & iPhone 5. The icons don't show though:

Best regards.

Wilton Ruffato Wonrath

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [June 30, 2014, 2:39pm UTC](https://forum.ionicframework.com/t/css-ionic/6219/2 "2014-06-30T14:39:16Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![wonrath](https://avatars.discourse-cdn.com/v4/letter/w/e495f1/32.png) [@wonrath](https://forum.ionicframework.com/u/wonrath)\
**Post date:** [June 30, 2014, 11:09pm UTC](https://forum.ionicframework.com/t/css-ionic/6219/3 "2014-06-30T23:09:00Z")

</div>

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](http://dogma.co.uk/blog/12-ongoing-problem-with-android-input-boxes)

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

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 1, 2014, 2:03pm UTC](https://forum.ionicframework.com/t/css-ionic/6219/4 "2014-07-01T14:03:51Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![wonrath](https://avatars.discourse-cdn.com/v4/letter/w/e495f1/32.png) [@wonrath](https://forum.ionicframework.com/u/wonrath)\
**Post date:** [July 1, 2014, 11:26pm UTC](https://forum.ionicframework.com/t/css-ionic/6219/5 "2014-07-01T23:26:52Z")

</div>

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

> **[fJcrv](https://codepen.io/wrwonrath/pen/fJcrv)**
>
> ...

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

Best regards.

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 2, 2014, 4:14pm UTC](https://forum.ionicframework.com/t/css-ionic/6219/6 "2014-07-02T16:14:44Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Bigoo](https://avatars.discourse-cdn.com/v4/letter/b/2acd7d/32.png) [@Bigoo](https://forum.ionicframework.com/u/Bigoo)\
**Post date:** [September 4, 2014, 5:50pm UTC](https://forum.ionicframework.com/t/css-ionic/6219/7 "2014-09-04T17:50:29Z")

</div>

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”.