0

Tengo una duda con Angular. En realidad, mas con CSS. La cuestión es la siguiente. Tengo en una página 2 columnas. En la primera a la izquierda puedo ver cierta información de clientes (es un listado) y la idea es que cuando el usuario haga un 'hover' sobre cada uno de ellos en la columna de la derecha se muestre un DIV con los detalles de los clientes. Para esto pienso crear un servicio a través del cual debería filtrar el cliente sobre el que se hizo el hover y devolver la información completa del mismo. Pero mi duda es, luego en la columna de la derecha, como hago para que se vaya mostrando a la altura desde donde se hizo el 'hover'? Espero se entienda mi pregunta. Adjunto HTML

<div class="loading">
  <app-loading-spinner *ngIf="!owners"></app-loading-spinner>
</div>
<div>
  <div class="wrapper">
    <!-- left column -->
    <div class="owners-container">
      <div class="owner" *ngFor="let owner of owners">
        <p>
          <strong> Full name:</strong> {{ owner.first_name }}
          {{ owner.last_name }} <strong>| Gender:</strong> {{ owner.gender }}
          <strong> | Status:</strong> {{ owner.status }}
        </p>
      </div>
    </div>
    <!-- right column -->
    <div class="owners-details-container">
      <div>
        <h2>Nombre del owner</h2>
        <p>Mas datos sobre el owner</p>
        <p>Mas datos sobre el owner</p>
        <p>Mas datos sobre el owner</p>
        <p>Mas datos sobre el owner</p>
        <p>Mas datos sobre el owner</p>
      </div>
    </div>
  </div>
</div>

Y el CSS hasta el momento.

.loading {
  display: grid;
  place-content: center;
}
.owner {
  border: 2px solid black;
  padding: 1em;
}
.owner:hover {
  background-color: lightgray;
  cursor: pointer;
}

.owners-container {
  width: 40%;
  margin-bottom: 10em;
}
.owners-details-container {
  border: 2px solid black;
  padding: 2em;
  width: 40%;
  height: 40vh;
}
.wrapper {
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: space-around;
  margin: 2em;
}
2
  • Entonces la duda es como maquetar la información o como filtrarla ?
    – user128299
    Commented el 25 jul. 2020 a las 13:12
  • Perdona, quizás no fui muy claro. Mi duda es cómo maquetarla.
    – Daro
    Commented el 25 jul. 2020 a las 13:22

1 respuesta 1

0

Supongo que hay otros metodos para solucionar Tu problema, Y por curiosidad he practicado una solucion. En al columna derecha he añadido [ngStyle]="{'margin-top.px': mtop}" para despues de tener la posicion del puntero cambia margin-top asi el div con los detalles se aparece en l aposicion de puntero. Esta opcion tiene un fallo hay que calcular la altura de cadro con detalles para que se ajusta al centro de puntero: HTML

<div>
    <div class="wrapper">
        <!-- left column -->
        <div class="owners-container" id="divw">
            <div class="owner" *ngFor="let owner of reserva" (mousemove)="mHover($event, owner)" (mouseleave)="mLeav()">
                <p>
                    <strong> Full name:</strong><br> {{ owner.name }} {{ owner.from }}<br> <strong>| Gender:</strong><br> {{ owner.name }}<br>
                    <strong> | Status:</strong> <br>{{ owner.to}}
                </p>
            </div>
        </div>
        <!-- right column -->
        <div class="owners-details-container" [ngStyle]="{'margin-top.px': mtop}" (mouseenter)="mHover($event)">
            <div>
                <h2>Nombre del owner</h2>
                {{myname}}
            </div>
        </div>
    </div>
</div>

.TS

 mHover(event: MouseEvent, owner: any) {  
    const mo =  event.pageY || 0
     console.log(mo)
     this.mtop = mo - 64;
     this.myname = owner.name;
  }

  mLeav() {
    this.mtop = 0;
  }

Resultado screeny

Te lo dejo para ver o tal vez te sirve.

Una actualizacion - calcula alto de cadro con detalles.

mHover(event: MouseEvent, owner: any) { 
    const dh = document.getElementById('dis') 
    const oh = dh?.offsetHeight || 0;    
    const mo =  event.pageY || 0
     console.log(mo, dh?.offsetHeight)
     this.mtop = mo - (oh / 2);
     this.myname = owner.name;
  }

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.