Question 80214 in CSS Question posted in
Some basic documentation can be found here.

Resize color palette when zoom level is changed in responsive mode in Angular – Css

I am using Angular 15 and trying to resize the color palette based on zoom level.

<input #primaryColor (change)="colorChange($event,'primary')" formControlName="primaryColor" class="color-input" type="color">

The type is color for this.

When I change the view to Mobile Mode in Developer Tools and change the zoom level from 100% to 50% for example, the color palette is going out of the screen when I select zoom level from the Dropdown of the browser.

The screenshots for Galaxy Fold Mobile device is shown with 100% and 75% zoom levels. In 100%, the color palette fits properly. But when the zoom level is changed to 75%, the color palette is going out of scope.

Color Palette 100%

Color Palette 75%

How to resize and fit the color palette based on zoom level here?

Tags:

2

Answers


  1. 0

    The color selection is OS and browser based. So if its in android mobile the color selection will be done based on screen available and color picker will be different. So if you want to change the picker you can choose angular package available to use.

    I hope this help.

    <input type="color" value="#ff0000" style="width:60px;height:60px;">
    Login or Signup to reply.
  2. 0

    Use a media query to achieve this task.

    The class is

       .color-palette {
      width: 50vw;
      height: 50vh;
    }

    The media query is:

    @media screen and (max-width: 768px) and (max-height: 1024px) and (min-resolution: 2dppx) and (max-zoom: 1.5) {
  .color-palette {
    width: 75vw;
    height: 75vh;
  }
}

    You can add more media queries for different sizes.

    now just apply this class to the color input.

    <div class="color-palette">
  <input #primaryColor (change)="colorChange($event,'primary')" formControlName="primaryColor" class="color-input" type="color">
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search