Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

Texto do HEADER e FOOTER SENDO CORTADO PARCIALMENTE no IOS

Pessoal boa tarde!

Estou com um problema para exibir o conteúdo do HEADER e FOOTER no IOS qdo executo o comando "ionic serve --lab"; ele está cortando o texto parcialmente.

Veja no link a imagem do erro: https://drive.google.com/file/d/1qBhWLCcx3YA2Vckh6YoI73t6Gx1mc_kF/view?usp=sharing

home.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title id="titulo">
        ALURA CAR<br/>LISTAGEM DE VEÍCULOS
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">

  <!--<ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Alura Car</ion-title>
    </ion-toolbar>
  </ion-header> -->

    <ion-list>
      <ion-item>BMW 120i</ion-item>
      <ion-item>ONIX 1.6</ion-item>
      <ion-item>FIESTA 2.0</ion-item>
      <ion-item>C3 1.0</ion-item>
      <ion-item>LAND ROVER</ion-item>
      <ion-item>JEEP RENEGADE</ion-item>
      <ion-item>KWID INTENSE</ion-item>
      <ion-item>SANDERO 1.6</ion-item>
      <ion-item>FORD KA 1.0</ion-item>
      <ion-item>HB20 1.0</ion-item>
    </ion-list>

</ion-content>

<ion-footer >
  <ion-toolbar  >
      <ion-title id="titulo" >
        <h6 >
          Av. dos Estados, 1555<br />
          Centro - Santo André - SP <br/>
          Fone: 11 8841-4154
        </h6>
      </ion-title>
  </ion-toolbar>
</ion-footer>

home.page.scss

#container {
  text-align: center;

  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

#container strong {
  font-size: 20px;
  line-height: 26px;
}

#container p {
  font-size: 16px;
  line-height: 22px;

  color: #8c8c8c;

  margin: 0;
}

#container a {
  text-decoration: none;
}

#titulo{
  background-color: rgb(185, 185, 185);
  text-align: center;
  font-size: medium;
  color: black;
  width: 100%;
  min-height: 50px;
}

Desde já agradeço a ajuda de todos!

EDUARDO AGOSTINHO

3 respostas

Oi Eduardo, tudo bem? Poxa, que legal a sua pergunta! Me vi nesse exato dilema quando comecei a trabalhar com ionic. O grande desafio de trabalhar com aplicativos Android e iOS são as diferenças entre o layout delas. As vezes o mesmo código não funciona corretamente para as duas plataformas. As diferenças são comuns dependendo da resolução e tamanho da tela do seu dispositivo. Por isso as vezes o código do instrutor não resulta na mesma coisa que o seu caso seu emulador tenha configurções diferentes. Uma dica valiosa que eu aprendi e te repasso é que sempre use tamanhos mais intermediários tendo como base o iOS. O que fica bom no ios normalmente fica no android. Mas, o que fica bom no android geralmente não fica no iOS (dica de ouro hahaha).

Sugiro que não trabalhe com tamanhos relativos, pense sempre em pixels. Como por exemplo, trocar o font-size do título:

#titulo{
  background-color: rgb(185, 185, 185);
  text-align: center;
  font-size: 16px; // De medium para 16, por exemplo
  color: black;
  width: 100%;
  min-height: 50px;
}

Sugeri 16px, mas, brinque com os tamanhos e veja qual te agrada mais e que na sua opinião gera um maior custo x benefício para a harmonia do layout que você está criando. Eu sei que as vezes pode parecer um pouco estranho relativizar o código de um com base no outro, o correto seria funcionar igual para os dois, mas, são limitações da tecnologia. Ganhamos em 1 código servir para Android e iOS, mas, nos gera esse trabalho de sempre perceber se o a estrutura atende bem as duas plataformas.

Um forte abraço, espero ter respondido a sua dúvida e qualquer problema me chama aqui que te ajudo!

Bom estudo :)

Prezado Leonardo, bom dia!

Entendi perfeitamente sua resposta, porém, não encontro no projeto onde colocar essa propriedade CSS, até porque pesquisei em todo projeto e não encontro a propriedade #Titulo, talvez acredito que tenha que criá-la mas não consigo determinar em qual scss...

Tentei colocar em vários locais, mas não refletiu no projeto...

Disponibilizei meu projeto em: https://1drv.ms/u/s!Att5VuGyZBRV_T_qo4_EX14uJRVh?e=ca7D1z

Por favor veja se tem algo errado na estrutura, e onde devo colocar essas propriedades CSS.

Desde já agradeço muito sua atenção

EDUARDO AGOSTINHO

Aaaah, agora sim entendi a questão! Anteriormente eu achava que você já havia criado essa configuração de CSS. Esse código que você me mandou é o mesmo do print? Não achei nele as informações de endereço para testar o seu footer. Cada página no ionic carrega o seu próprio css em específico. Então por exemplo, nesse código que você me mandou existe a tela home, certo? Então em pages > home temos 3 arquivos. O home.html, home.scss e o home.ts. O css deve ficar dentro do home.scss.

Atenção!

Cada página tem um seletor próprio para ela no css. Se você colocar o código css dentro do home.scss sem o seletor, o ionic vai propagar esse estilo para todas as outras páginas.

Dentro do home.scss deixe ele assim:

page-home {
#container {
  text-align: center;

  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

#container strong {
  font-size: 20px;
  line-height: 26px;
}

#container p {
  font-size: 16px;
  line-height: 22px;

  color: #8c8c8c;

  margin: 0;
}

#container a {
  text-decoration: none;
}

#titulo{
  background-color: rgb(185, 185, 185);
  text-align: center;
  font-size: medium;
  color: black;
  width: 100%;
  min-height: 50px;
}
}

O page-home {} é o seletor css para a sua home. Testa primeiro com o medium no tamanho do título, se estourar o tamanho segue a regra que eu passei de ir definindo por pixels.

Abração e desculpa a demora, formatei minha máquina recentemente. Precisei reinstalar o ambiente do ionic aqui para rodar o seu código.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software