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.

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

What techniques can be used to create logos that adapt and transform seamlessly as the screen size varies?

What is the effect of SEO on the use of image width and height attributes for a responsive website

Adjusting the image placement within a modal window (using bootstrap 3)

Logging in with an External Provider using ASP Core, Identity Server 4, and Angular 2

What is a more efficient method for generating HTML code using PHP variables?

Angular2 routing does not trigger the Component constructor and Router life-cycle hooks when the router.parent.navigate method is called from a child component

What are some ways to determine if the current tab is the sender of a message in the Broadcast Channel API?

Utilize ngModel in conjunction with the contenteditable attribute

Can Angular's built-in internationalization features be used to translate bindings?

Execute HTML and JS files through Eclipse PDT to view in a web browser

Displaying a single row of a PHP array in bold formatting

Transforming jQuery Object into a String after making an AJAX request

Solving the issue of IE7 div overflow-y: scroll causing content to be obscured by the scrollbar

Sending information from JavaScript to Python scripts: best practices

Transmit data from the Windows Communication Foundation to JavaScript

Change Observable<String[]> into Observable<DataType[]>

The dynamic design of the webpage allows for a fluid layout, where the navigation bar smoothly adjusts its position when

Snap to the top of the table with merged columns using scroll feature

Tips for displaying user data from a mongodb database on a webpage, making edits to the information, and then saving the updated data

Turning HTML into an image with the power of JavaScript