开发者

Inserting component on click between grid rows positioning

I have the exact same issue depicted in this post(link attached below), the only difference is that I can't seem to get the positioning correct for the new element. Currently, my element just inserts at the end of the grid instead of below the card clicked.

Inserting component on click between grid rows

I have been trying to use the ID and row index of each card to hopefully get the new element to drop below the card that was clicked.

in the code below I am trying to append the

  • on button click to a specific card based on its ID

    <div fxFlex class="grid-container">
    
        <div
          class="grid-item card"
          *ngFor="let x of fleetVehicles; let i =  index;"
          [id]="x.id"
          (click)="toggleCard(i + 1, x.id)"
    
        >
          <div class="inside-card">
            <header>
              <header>Audi {{ x.id }}</header>
            </header>
            <article>
              <div>
                <img src="assets/images/audi.png" style="width: 80%; height: 70%" />
              </div>
    
              <div>
                <footer>HVC 529 EC</footer>
              </div>
              <!-- <div
                kind="highlight"
                [class]="collapse ? 'dropdown' : 'gsMDEi'"
              ></div> -->
            </article>
          </div>
        </div>
    
        <li *ngIf="collapse" id="confirmBooking" class="accordion">
          <div class="card-dropdown" style="flex-direction: row; display: flex">
            <div fxFlex="60" style="width: 100%; height: 100%">
              <header class="dropdown-header">Audi</header>
              <article>
                <div style="padding: 26px;">
                  <div class="icon-pos">
                    <div class="p-info">
                      <i cla开发者_Python百科ss="fas fa-door-open icon-style"></i>Doors
                    </div>
                    <div class="p-info">
                      <i class="fas fa-users icon-style"></i>Seats
                    </div>
                    <div class="p-info">
                      <i class="fas fa-gear icon-style"></i>Manual
                    </div>
                    <div class="p-info">
                      <i class="far fa-snowflake icon-style"></i>A/C
                    </div>
                  </div>
                  <div style="height: 100%; width: 100%;">
                    <img src="assets/images/audi.png" style="width: 75%;"/>
                  </div>
                </div>
                <footer style="height: 50px;">
                  <div class="dropdown-footer">HVC 529 EC</div>
                </footer>
              </article>
            </div>
    
            <div fxFlex="40" style="width: 70%; height: 100%; text-align: -webkit-center">
              <div style="height: 100%; display: flex; justify-content: center">
                <form style="width: 50%; margin: 6px;">
                  <label for="Vehicle">Vehicle</label>
                  <input
                    type="text"
                    id="Vehicle"
                    name="Vehicle"
                    placeholder="Vehicle"
                  />
                  <label for="Name">Name</label>
                  <input
                    type="text"
                    id="Name"
                    name="Name"
                    placeholder="Enter your name"
                  />
                  <label for="Start Date">Start Date</label>
                  <input matInput type="datetime-local" />
                  <br />
                  <label for="End date">End date</label>
                  <input matInput type="datetime-local" />
                  <br />
                  <label for="Customers">Customers</label>
                  <select id="Customers" name="country">
                    <option value="australia">VW</option>
                    <option value="canada">Audi</option>
                    <option value="usa">Mercedes</option>
                  </select>
    
                  <label for="Passengers">Passengers</label>
                  <select id="Passengers" name="country">
                    <option value="australia">1</option>
                    <option value="canada">2</option>
                    <option value="usa">3</option>
                  </select>
    
                  <label for="Personal Tracker">Personal Tracker</label>
                  <input
                    type="text"
                    id="Personal Tracker"
                    name="Personal Tracker"
                    placeholder="If you have a personal tracker, enter the tracking number"
                  />
    
                  <label for="Floater">Floater Tracker</label>
                  <select id="Floater" name="country">
                    <option value="" disabled selected style="text-color: grey">
                      If you don not have a personal tracker, select a floater
                    </option>
                    <option value="australia">Anel</option>
                    <option value="canada">Andrew</option>
                    <option value="usa">Nico</option>
                  </select>
    
                  <button type="submit" class="sub-button" (click)="makeBooking()">Submit</button>
                  <button type="submit" class="can-button" (click)="cancelBooking()">Cancel</button>
                </form>
              </div>
            </div>
          </div>
        </li>
    </div>
    

    here is my typescript for each card that will be displayed based on the fleetVehicles array. in the toggle card function is where I am needing to have the

  • display on click.

     fleetVehicles = [
        { id: 1, name: 'Marc' },
        { id: 2, name: 'Marc' },
        { id: 3, name: 'Marc' },
        { id: 4, name: 'Marc' },
        { id: 5, name: 'Marc' },
        { id: 6, name: 'Marc' },
        { id: 7, name: 'Marc' },
        { id: 8, name: 'Marc' },
        { id: 9, name: 'Marc' },
        { id: 10, name: 'Marc' },
        { id: 11, name: 'Marc' },
        { id: 12, name: 'Marc' },
      ];
    
    collapse = false;
      selectedRowIndex!: number;
      
      toggleCard(row: number, id: number) {
        this.selectedRowIndex = row;
        console.log(row);
    
        // this.model = {
        //   columnId: Array.from(
        //     this.renderer.parentNode(this.column).children
        //   ).indexOf(this.column),
        //   width: this.width,
        // };
        // console.log(this.model);
    
        if ((row = id)) {
          // this.collapse = !this.collapse;
          document.getElementById('confirmBooking');
          // b?.style.display="block";
        }
        console.log(this.fleetVehicles.find((x) => x.id == id));
      }
    
  • 0

    上一篇:

    下一篇:

    精彩评论

    暂无评论...
    验证码 换一张
    取 消

    最新问答

    问答排行榜