2
votes

Comment définir l'arrière-plan d'un composant particulier dans Angular?

Je souhaite modifier la couleur d'arrière-plan d'un composant (de connexion) spécifique dans mon application, mais cela fonctionne. Voici ma page html

<div class='bg'>
  <div style="margin-top: 60px;">
    <div class="container">
      <div class='row'>
        <div class='col-md-6 mx-auto'>
          <div class='card'>

            <div class='card-header'>
              <div>
                <h4 class='text-center'>Login</h4>

              </div>
            </div>
            <div class='card-body'>
              <form class='form'>
                <div class='form-group'>
                  <label>Email:</label>
                  <input class='form-control' name='email' [(ngModel)]='user.username' type='email'>
                </div>
                <div class="form-group">
                  <label>Password</label>
                  <input class='form-control' name='password' [(ngModel)]='user.password' type='password'>
                </div>
                <div class="form-group">
                  <button type='button' class='btn btn-success float-right' (click)='loginUser()'>Login</button>
                </div>
                <br>
                <div class="form-group">
                  <div class='text-center'>
                    <a routerLink='/register'>Don't have account ? Sign Up</a><br />
                    <button type='button' class='btn btn-primary' routerLink='/register'>Register</button>
                  </div>
                </div>

              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

.bg {
  background: #1f4037;
  background: -webkit-linear-gradient(to left, #99f2c8, #1f4037);
  background: linear-gradient(to left, #99f2c8, #1f4037);
}

bien que le code ci-dessus fonctionne, mais il ne définit que la moitié de la page et non la page complète, j'ai essayé de changer la hauteur à 100% mais cela n'a pas fonctionné non plus

p >

angular css

3 commentaires

dans quel fichier avez-vous défini ce . bg classe?

pouvez-vous mettre votre code de démonstration ici fork and post link que nous pouvons le voir en version angulaire: stackblitz.com/edit/ angulaire

Votre composant de connexion est-il le seul à l'écran? pouvez-vous poster un codepen ou autre?

3 Réponses :

1
votes

Changez la hauteur en 100vh

.bg {
  background: #1f4037;
  background: -webkit-linear-gradient(to left, #99f2c8, #1f4037);
  background: linear-gradient(to left, #99f2c8, #1f4037);
  height : 100vh;
}

0 commentaires

2
votes

Vous devez ajuster la hauteur de votre conteneur avec 100vh .

vh - Ce l'unité est basée sur la hauteur de la fenêtre. Une valeur de 1vh est égale à 1% de la hauteur de la fenêtre.

Ce faisant, cela adaptera votre contenu à la hauteur de la fenêtre d'affichage de votre page Web.

Exemple fonctionnel

3 commentaires

mon contenu ne dépasse pas tellement la page complète, mais pourquoi y a-t-il une barre de défilement?

vous pouvez y mettre aussi votre exigence comme overflow: hidden selon votre exigence,

@Lint aussi parce que vous avez défini margin-top supprimez ce qui mène à la barre de défilement

1
votes

.bg {
  background: #1f4037;
  background: -webkit-linear-gradient(to left, #99f2c8, #1f4037);
  background: linear-gradient(to left, #99f2c8, #1f4037);
  padding: 50px
}

obtiendra la hauteur de ses propres éléments internes.

Vous devrez peut-être ajouter des rembourrages pour la classe bg :

<div class='bg'>

1 commentaires

J'avais également besoin de définir height: 100vh cela ne fonctionnait pas avec ça