CODEWITHSUNDEEP
angulartypescript
abhijith
abhijith

Reputation: 127

Hide a div element on small screen and show another div in place of that div

Here I want to hide a div element when the screen size goes below 600px and instead of that div I want to show another div element. Please guys any help is really appreciated since I am new to this platform. Thanks in advance.

The html code goes like this.

<div class="survey-wrapper container" *ngIf="!form">
  <div class="text-center tab-button">
    <div
      class="col-20 tabStyle"
      *ngFor="let tabData of tabArray; let i = index"
      [ngClass]="{ completed: i <= navCount }"
    >
      <img [src]="tabData.active" class="tab-icon" />
      <div class="tab-title">{{ tabData.title }}</div>
      <img
        src="assets/img/digital/arrow_right.svg"
        class="tab-arrow"
        [ngClass]="{ arrowOpacity: i <= navCount }"
      />
    </div>
  </div>
</div>

When the screen size reduces below 600px I want to show this content.

<div class="showContainer">
        <img [src]="tabData.active" class="tab-icon" />
        <div class="tab-title">{{ tabData.title }}</div>
        <img
          src="assets/img/digital/arrow_right.svg"
          class="tab-arrow"
          [ngClass]="{ arrowOpacity: i <= navCount }"
        />
    </div>

The styles for the classes used are as follows in the class .survey-wrapper I have given the media query where once the screen size goes below 600px I have given the property display: none which is working as expected.

  .survey-wrapper {
    position: relative;
    text-align: center;
    @media (max-width: 600px) and (min-width: 376px) {
      display: none;
    }
    .tabContainer {
      border: 1px solid rgba(0, 0, 0, 0.125);
      width: 100%;
      float: left;
    }
    .col-20 {
      width: 20%;
      float: left;
    }
    .tabStyle.completed {
      background-color: #ffffff;
      .tab-title {
        color: #383838;
      }
      .tab-arrow.arrowOpacity {
        opacity: 1;
      }
    }

    .tabStyle {
      background-color: #f9f9f9;

      display: flex;
      .tab-icon {
        height: 23px;
        width: 23px;
        float: left;
        margin-right: 4px;
        margin-top: 22px;
      }
      .tab-title {
        float: left;
        color: #b3b3b3;
        font-family: $font-family-colfax-regular;
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
        padding-right: 4px;
        padding-top: 25px;
        padding-bottom: 25px;
      }
      .tab-arrow {
        opacity: 0.4;
      }
    }
    .tabStyle:first-child {
      border-top-left-radius: 8px;
      border-bottom-left-radius: 8px;
    }
    .tabStyle:last-child {
      border-top-right-radius: 8px;
      border-bottom-right-radius: 8px;
    }
  }

The styles for the other div element is not written.

Upvotes: 0

Views: 243

Answers (2)

Tushar Walzade
Tushar Walzade

Reputation: 3809

If you want to use bootstrap sizes, you may use bootstrap classes d-sm-none & d-lg-none respectively on your divs as follows - 

<div class="survey-wrapper container d-sm-none" *ngIf="!form">
    <div class="text-center tab-button">
        <div class="col-20 tabStyle" *ngFor="let tabData of tabArray; let i = index" [ngClass]="{ completed: i <= navCount }">
            <img [src]="tabData.active" class="tab-icon" />
            <div class="tab-title">{{ tabData.title }}</div>
            <img src="assets/img/digital/arrow_right.svg" class="tab-arrow" [ngClass]="{ arrowOpacity: i <= navCount }" />
        </div>
    </div>
</div>

<div class="showContainer d-lg-none">
    <img [src]="tabData.active" class="tab-icon" />
    <div class="tab-title">{{ tabData.title }}</div>
    <img src="assets/img/digital/arrow_right.svg" class="tab-arrow" [ngClass]="{ arrowOpacity: i <= navCount }" />
</div>

Here's a link for more reference.

Upvotes: 1

Chandesh
Chandesh

Reputation: 14

Check the window size with "window.innerWidth". Your component should be somme what like below code:

import { Component, HostListener, AfterViewInit } from '@angular/core';
@Component()
export class AppComponent implements AfterViewInit { 
    windowWidth: number = window.innerWidth;
    ngAfterViewInit() {
        this.windowWidth = window.innerWidth;
    }

    @HostListener('window:resize', ['$event'])
    resize(event) {
        this.windowWidth = window.innerWidth;
    }
}

In your html for div add if condition:

<div *ngIf="windowWidth >= 600">Your Content</div>
<div *ngIf="windowWidth < 600">Your Content</div>

Upvotes: 0

Related Questions