web-dev-qa-db-fra.com

Comment puis-je redimensionner la longueur d'une carte en ionique?

Eh bien, je veux normaliser la largeur égale à ce qui précède, mais je n'obtiens aucun moyen ... J'ai essayé la marge, la largeur et d'autres, mais aucune si vous voulez changer la taille de la carte. Je veux laisser par défaut, me recommandez-vous une commande ou je me trompe? toutes les commandes css que j'ai faites étaient dans home.scss, merci à tous.

Regardez l'impression de mon application ici

page-home {

  .bg{
    background: linear-gradient(to bottom, #00A399 0%, #fafafa 400%);
  }

  .bg-ions{
    background:#000;
    opacity:0.2;
  }

  .btn{
    background:#000;
    opacity:0.2;
    color:white;
  }

  ion-input{
    color:#FAFAFA;
  }

  ion-textarea{
    color:#FAFAFA;
  }

  ion-card{
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  ion-card-content{
    margin-left:-2%;
  }

  ion-item{
    width:50%;
  }

  .summ{
    color:#000;
  }

  ::placeholder {
    color: white;
    opacity: 1; /* Firefox */
  }

  :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: white;
  }

  ::-ms-input-placeholder { /* Microsoft Edge */
    color: white;
  }

}
<br>
<ion-header>
  <ion-navbar>
    <ion-title>
      HybridSumm
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding class="bg">

  <ion-item class="bg-ions">
    <ion-label class="div-pai" color="primary" stacked>Title</ion-label>
    <ion-input placeholder="Ex: The Bio-informatics" style="color:white;"></ion-input>
  </ion-item>
  <br>
  <ion-item class="bg-ions">
    <ion-label color="primary" stacked >Text</ion-label>
    <ion-textarea placeholder="Place the text that you want to summarize." ngDefaultControl [(ngModel)]="test"></ion-textarea>
  </ion-item>
  <br>
  <button ion-button outline style="background: white">Summarize</button>
  <button ion-button>Test</button>

  <br><br>

  <ion-card>

    <ion-card-header>
      Card Header
    </ion-card-header>

    <ion-card-content>
      {{test}}
    </ion-card-content>

  </ion-card>




</ion-content>
ionic-frameworkionic2ionic3
7
Henrique N. Mendes

Ionic définit certaines propriétés par défaut, et la seule façon de les remplacer est de leur donner la règle ! Important .

Ce n'est peut-être pas la meilleure pratique, mais cela fonctionne, et ionic nous donne peu de variables sass pour écraser certaines choses.

Cela fonctionne pour moi en ajoutant ceci dans les règles SCSS suivantes dans votre code:

  ion-card{
    display: flex;
    flex-direction: column;
    width: 100% !important;
    margin: 0 !important;
  }

enter image description here

J'espère que ça marche pour vous.

10
Fran Sandi