Tips for creating a flexible popover widget

Question

Tips for creating a flexible popover widget

I am facing an issue with my project that has a popover (ng-bootstrap) similar to what I need. The problem is that the tooltips and popovers are not flexible when it comes to resizing the page. To address this, I attempted to put a mat-grid (which works perfectly for me) inside the popover, but it does not behave as expected. The mat-grid shrinks when I adjust the browser width, but the rows are not properly separated as they should be. I want the popover to be more flexible in size. How can I achieve this using either mat-grid or another solution?

Below are some examples of mat-grid layouts. When I make the page smaller, the popover appears too large compared to how Google's layout adjusts its size.

https://i.sstatic.net/kDdOT.jpg

Here is a demo on stackblitz: https://stackblitz.com/edit/angular-nsqsbi-8xn4rg?file=app/main/GridList/grid-list-overview-example.html

I used Bootstrap row and column classes inside the popover body, and I had to comment out the mat-grid part on stackblitz because it was not functioning correctly.

<mat-grid-list cols="1" rowHeight="5:1">
  <mat-grid-tile>1</mat-grid-tile>
  <mat-grid-tile>2</mat-grid-tile>
</mat-grid-list>

html css angular

Answer 1

Answer №1

When it comes to resizing your pop up window, the browser might not automatically adjust its size. To make this happen, you can use media queries in your code.

By implementing media rules and overriding styles for your ngb-popover-window, you can control the resizing behavior. This code should be added to your grid-list-overview-example.css.

:host ::ng-deep .popover
{    
    background: orange;
    border: 10px solid red;
    max-width: 350px;
    max-height: 50px;
}

@media screen and (max-width: 300px) {
  :host ::ng-deep .popover
  {
    background: lightpink;
    border: 5px solid lightgreen;
    max-width: 50px;
    max-height: 50px;
  }
}

@media screen and (max-width: 205px) {
  :host ::ng-deep .popover
  {
    background: lightgrey;
    border: 5px solid red;
    max-width: 50px;
    max-height: 50px;
  }
}

@media screen and (max-width: 100px) {
  :host ::ng-deep .popover
  {
    background: yellow;
    border: 5px solid lightyellow;
    max-width: 50px;
    max-height: 50px;
  }
}

Key points to note:

@media helps determine viewport dimensions
:host ::ng-deep is used for style overrides in Angular

Answer 2

When it comes to resizing your pop up window, the browser might not automatically adjust its size. To make this happen, you can use media queries in your code.

By implementing media rules and overriding styles for your ngb-popover-window, you can control the resizing behavior. This code should be added to your grid-list-overview-example.css.

:host ::ng-deep .popover
{    
    background: orange;
    border: 10px solid red;
    max-width: 350px;
    max-height: 50px;
}

@media screen and (max-width: 300px) {
  :host ::ng-deep .popover
  {
    background: lightpink;
    border: 5px solid lightgreen;
    max-width: 50px;
    max-height: 50px;
  }
}

@media screen and (max-width: 205px) {
  :host ::ng-deep .popover
  {
    background: lightgrey;
    border: 5px solid red;
    max-width: 50px;
    max-height: 50px;
  }
}

@media screen and (max-width: 100px) {
  :host ::ng-deep .popover
  {
    background: yellow;
    border: 5px solid lightyellow;
    max-width: 50px;
    max-height: 50px;
  }
}

Key points to note:

@media helps determine viewport dimensions
:host ::ng-deep is used for style overrides in Angular

Tips for creating a flexible popover widget

Answer №1

Similar questions

Scaling Images using HTML and CSS

The select dropdown default choice is not appearing as expected

Exploring data in C# using HtmlAgilityPack to extract information from a table

Transmitting intricate Objects to Angular Directive

Tips for creating a Google Chart using temperature and humidity data sourced from an XML file

Tips for setting one image as the background for an entire page

Instructions on saving an aspx page content type on the server side as an HTML page and displaying this HTML on the client side

A centered Bootstrap navigation bar on a WordPress site

Tips for sending php data to javascript efficiently

How can I trigger a JavaScript function when the ENTER key is pressed?

Sequence of background colors not altering as intended

Leveraging Component without the need for Import

Adding a MySQL-PHP combination programmatically

Troubleshooting a problem with the Bootstrap dropdown menu

Is it possible to show the Display Center within the dropdown menu?

What is the best way to arrange multiple elements on the second row within a div?

Exploring the world of tabbed dynamic routing in Angular 2 version 4

What is the best way to resize a Drawable to fit the width of a TextView?

Is it possible for Skycons to show a duplicate icon?

What is the best way to prevent the background-image fade effect in Chrome?