CODEWITHSUNDEEP
androidhtmlcssionic-framework
David Prieto
David Prieto

Reputation: 2299

Ionic: CSS renders differently on Ionic Serve, Android emulator and Android device

Building the interface of my Ionic app I have the problem that it renders differently depending on where do you run it. Every time I fix something I end up breaking something else.

Here is how the message inbox I'm developing looks like:

The HTML code is like this:

<ion-view hide-back-button="false" view-title="Buzón de Mensajes" class="buzon-page">
  <!-- <ion-nav-bar> </ion-nav-bar> -->
  <ion-nav-buttons side="right">
    <button class="button button-icon icon ion-android-exit" ng-click="cerrarSesion()">
    </button>
  </ion-nav-buttons>

  <div class="superior">     
  <div class="list list-inset" >
    <label class="item item-input">
      <i class="icon ion-search placeholder-icon"></i>
        <input type="text" placeholder="Buscar">
    </label>
  </div>


  <div class="botones">
    <div class="row">
      <div class="col">
        <button class="button button-outline button-block button-positive">
          Promociones
        </button>
      </div>
      <div class="col">
        <button class="button button-outline button-block button-energized" >
          Aprobados
        </button>
      </div>
      <div class="col">
        <button class="button button-outline button-block button-assertive" >
          Alerta
        </button>
      </div>
      <div class="col">
        <button class="button button-outline button-block button-balanced" >
          ATM
        </button>
      </div>
    </div>
  </div>
  </div>

    <ion-content class="lista-contenedor">
    <ion-list class="list">
        <ion-item ng-repeat="mensaje in mensajes" 
        ng-class="mensaje.tipo == 'Promocion' ? 'clasePromocion': 
                  mensaje.tipo == 'Aprobado'  ? 'claseAprobado' : 
                  mensaje.tipo == 'Alerta'    ? 'claseAlerta'   : 
                  mensaje.tipo == 'ATM'       ? 'claseATM'      : 'default'" 
        ng-click="abrirMensaje($index)" 
        on-hold="mostrarMenu(mensaje, $index)"
        item="item"
        class="item-remove-animate">

        <h2><b>{{ mensaje.hid }}</b></h2>
        <h3>{{ mensaje.alert }}</h3>
        <p class="cont">{{ mensaje.mens }}</p>
        <p class="fecha">{{ mensaje.fecha }}</p>

        <ion-option-button class="button-positive" ng-click="mostrarMenuComp($index)">
          Compartir
        </ion-option-button>
        <ion-option-button class="button-assertive" ng-click="mostrarMenuElim($index)">
          Eliminar
        </ion-option-button>

      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

And the CSS like this:

/* 
  CSS para la pagina Buzon 
*/
/* tercera linea de cada mensaje */
.buzon-page .cont{
  color: gray;
}

/* contenedor de cuadro busqueda y botones */
.buzon-page .superior{
  margin-top: 15%;
}

.buzon-page .list-inset{
  margin-bottom: 0%;
}

/* cuadro de busqueda */
.buzon-page label{
  margin-top: 0%;
  border:2px solid #C0C0C0;
}

/* hilera de botones */
.buzon-page .botones{
  margin-top: 1%;
  margin-bottom: 1%;
}

/* cada boton */
.buzon-page .button-block{
  font-weight: 100;
  font-size: 1em;
  line-height: 1.5;
  padding: 0px;
  border:2px solid;
}

.buzon-page .row, .col{
  margin-left: 0px;
  margin-right: 0px;
  padding: 0px;
}

.buzon-page .lista-contenedor{
  margin-top: 33%;
}

.item-remove-animate .item-content {
  padding: 15px;
}

.clasePromocion .item-content {
  border-left: solid 6px #0078ff !important; /* azul */
}

.claseAprobado .item-content {
  border-left: solid 6px #faaf40 !important; /* amarillo */
}

.claseAlerta .item-content {
  border-left: solid 6px #ee4036 !important; /* rojo */
}

.claseATM .item-content {
  border-left: solid 6px #00a551 !important; /* verde */
}

.default .item-content {
  border-left: solid 6px white !important; /* blanco por defecto */
}

.buzon-page .fecha{
  position: absolute;
  top: 15px;
  right: 20px;
}

EDIT

Obviously the gap in the Android device is because of .buzon-page .lista-contenedor{ margin-top: 33%; }. The question is why is it necessary in Ionic Serve and Android emulator and a problem in an actual device? How am I supposed to develop and app like this?

Debugging with Chrome DevTools would be the ideal but I don't have acces to a device with 4.4+ android version.

Upvotes: 1

Views: 6171

Answers (1)

Ariel
Ariel

Reputation: 1527

Android and iOS have different browsers, and render things slightly different, on some cases you have to work with your CSS to make specific's CSS for Android or iOS.

When you build your app to run on iOS or Android, specific classes are automatically added to the body tag.

  • iOS: <body class="platform-ios">
  • Android: <body class="platform-android">
  • Web: <body class="platform-browser">

Work with those classes to solve your problem. Add them to your CSS to make specific changes.

Upvotes: 7

Related Questions