Search code examples
cssangularsassangular-material

How can I implement a "see more" button on a div with set height, but very large content?

I'm sure this has been asked many times before, but I'm having difficulty wording this in a way that gets me results. I have also found very outdated answers (8+ years ago), and they seemed too complicated considering the technology we have today.The modern solutions I've found work specifically with text, by using things like -webkit-line-clamp

This project uses Angular, Angular Material, and Sass, so I'm sure there is an elegant way to achieve this. I just need to implement something like the image below:

enter image description here

The content shown inside will be a bar chart, but I don't think this makes much of a difference.

Again, I'm sorry for asking a, no doubt, extremely repeated question, but I just haven't found any answers or tutorials. A suggestion for search terms would already help me a lot.

Solution

  • As you said its been answered many times, so please upvote this answer from Design.Garden

    import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div [ngClass]="{'fade': showFade, 'image': true}">
      <span *ngIf="showFade" class="show-fade" (click)="showFade = !showFade"> show more!</span>
</div>
  `,
  styles: [
    `
    :host {
      display: block;
      height:100%;
    }
    .image::before {
      
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('https://placehold.co/500X600');
  background-repeat: no-repeat;
    background-size: cover;
    }
    .fade {
      height:100%;
      display: flex;
      align-items: end;
      justify-content: center;
    }
    .show-fade {
      z-index: 1;
      margin-bottom:100px;
      cursor: pointer;
    }
    .fade::before {
      -webkit-mask-image: linear-gradient(to bottom, white 60%, transparent 80%);
    }
  `,
  ],
})
export class App {
  showFade = true;
  name = 'Angular';
}

bootstrapApplication(App);

    stackblitz