Discussion :

[flamant]

Bonjour, je développe une petite application angular material. Mon objectif est d'obtenir le design suivant pour une card, qui s'applique à tous les média (desktop, mobile, tablette)


mon composant app.component.html est le suivant

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
    <mat-toolbar color="primary">
      <div style="width:100%;" class="md-toolbar-tools" >
        Liste des annonces
        <span flex></span>
      </div>
    </mat-toolbar>
    <div fxLayout="row">
      <div fxFlex="20%"></div>
      <div fxFlex="60%">
        <mat-card *ngFor="let annonce of annonces; let i = index" style="border:red">
            <mat-card-content style="border:blue">
                <img src="./../assets/image/image{{i+1}}.jpg" alt="Avatar" style="position:absolute;top:0px;left:0px;width:40%;height:100%">
                <div class="container" style="left: 45%; top:10px;">
                  <div style="left:70%;">{{annonce.dateConstruction | date:'dd MMMM yyyy'}}</div>
                  <div>
                    <span>{{annonce.type}}</span>
                    <span style="float:right">{{annonce.prix}}</span>
                  </div>
                  <h4>{{annonce.surface}}</h4>
                  <h4>{{annonce.adresse}}</h4>
                  <div style="left:45%;">
                    <p>{{annonce.description}}</p>
                  </div>
                </div>
            </mat-card-content>
        </mat-card>
      </div>
      <div fxFlex="20%"></div>
    </div>
 
    <router-outlet></router-outlet>

Je suis nul pour placer les éléments et texte (ou image) dans les pages html (jreaux62, (ou un autre membre de developpez.com suffisamment fort en html/css) si tu lis cette discussion, ça m'intéresserai de prendre des cours particulier avec toi, moyennant finance, bien sur) et dans ce cas dans une "card". J'obtiens la sortie suivante sur mon browser


De plus, quand je réduis mon browser, je ne peux pas voir les éléments et textes sur la droite de mon image placés correctement. j'ai essayé de reproduire la même chose sur stackblitz (https://stackblitz.com/edit/angular-...e=package.json), mais j'ai des soucis avec les tags angular material qui ne sont pas pris en compte.

Donc, pouvez vous m'aider en me disant ce qui ne va pas, commenter le code correct à appliquer, de manière à ce que je puisse progresser. Merci beaucoup.

[darkstar123456]

Bonjour,

Vu que Angular Material, ainsi que ton code, utilisent les flexbox, il est beaucoup plus simple que l'image soit dans une colonne et ton contenu dans une autre

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<mat-card class="card-annonce" *ngFor="let annonce of annonces; let i = index" style="border:red">
 
    <img src="./../assets/image/image{{i+1}}.jpg" alt="Avatar" style="position:absolute;top:0px;left:0px;width:40%;height:100%">
 
    <mat-card-content style="border:blue">
        <div class="container" style="left: 45%; top:10px;">
            <div style="left:70%;">{{annonce.dateConstruction | date:'dd MMMM yyyy'}}</div>
            <div>
                <span>{{annonce.type}}</span>
                <span style="float:right">{{annonce.prix}}</span>
            </div>
            <h4>{{annonce.surface}}</h4>
            <h4>{{annonce.adresse}}</h4>
            <div style="left:45%;">
                <p>{{annonce.description}}</p>
            </div>
        </div>
    </mat-card-content>
</mat-card>

Par contre, pour le responsive, il va falloir ajouter un peu de CSS pour dire que la disposition change suivant la résolution de l'écran

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
.card-annonce {
     display: flex;
     flex-direction: column;
}
 
@media (min-width: 992px) {
     .card-annonce {
          flex-direction: row;
     }
}

ATTENTION : Un de ton plus gros problème est d'avoir mis ton image en position: absolute !!! Elle sort donc du flux et ne respecte plus la flexbox, uniquement son parent relatif (position: relative) le plus proche

[Invité]

Bonjour,

1- SUPPRIME TOUS les attributs style="..." du code HTML !
Écris plutôt le code CSS entre balises <style></style> (en phase de TEST, puis dans un fichier externe).

2- voici une solution avec flexbox : https://codepen.io/jreaux62/pen/KKKWXxX

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/* mobile first */
mat-card { 
  display:block;
  border:1px solid red; 
  overflow:hidden;
}
mat-card-content > img { 
  display:block;
  width:100%; 
}
mat-card-content > div.container { 
  background:lightgrey;
  padding:10px;
}
/* tablet / desktop */
@media screen and (min-width:769px) {
  mat-card-content { 
    display:flex; 
  }
  mat-card-content > img { 
    flex:1 1 40%; 
  }
  mat-card-content > div.container { 
    flex:1 1 60%; 
  }
}

Cela dit, je ne connais pas Angular (ni son CSS propre).