``Why Ionic 3 Popover Sizes Should Adapt to Different Screen

Currently in my Ionic 3 project, I am utilizing a popover with a set height using the following code snippet:

editOpty(rw){
     let popover = this.editOptyPopup.create(EditOptyPopoverComponent, rw, { cssClass: 'edit-opty-popover'});
    popover.present({

    });
  }

The corresponding CSS looks like this:

.edit-opty-popover .popover-content{
        width: 1400px;
 }

However, the limitation of the fixed width is evident. Ideally, I would like the popup width to be slightly smaller than the width of the screen it appears on.

Answer â„–1

Experiment using the % symbol in this instance.

.customize-options-popover .popover-content{
        maximum width: 90%;
 }

Answer â„–2

Take into account the options below:

width:calc(100vw - 10px) 

or

width:calc(100% - 10px) 

Choose according to your requirements.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The directive does not function properly when used across multiple files

Struggling with @Directives and @Hostlisteners - seeking assistance The directive added to the input seems unresponsive, failing to trigger any events or console.log(). I'm puzzled and frustrated as there appears to be a missing piece of the puzzle t ...

Tips for positioning a solitary md-tab component to the right

Can a single md-tab element be aligned to the right of md-tabs while keeping the rest of the tabs in their original position? ------------------------------------------------------------------------- | Tab 1 | Tab 2 | Tab 3 | ...

How to vertically align the elements within a DIV in jQuery Mobile

Is there a way to vertically align the content of a jQuery grid's block so that it is centered with another element in the same row? <div class="ui-grid-a" style="border:1px solid"> <div class="ui-block-a" style="vertical-align:middle" >& ...

Issue with Bootstrap 4 navbar dropdown on mobile: unable to click on menu item

My website is currently in development with Bootstrap 4. I'm facing an issue where, on mobile devices, when the menu items collapse into the three bars, they are not clickable. Despite following the recommendations in the Bootstrap documentation, the ...

The package information could not be loaded from the registry due to an error: The "timeout" parameter must be in numerical form. Instead, it was received as a string ('100000')

Encountered an issue while trying to install Angular Material in my project: PS C:\Users\Avinash Kumar\Desktop\Projects\CRUD\Project 2\Library Management System\UI\UI\Frontend> ng add @angular/material â ...

The SpinButton object has an undefined public property called 'value' and the public method 'focus()' is not available

Recently, I've delved into using reactjs, typescript, and Office UI Fabric. However, I'm facing a challenge with one of the components from fabric. In this scenario, I have a simple Product component containing a SpinButton and a DefaultButton. M ...

SwitchMap in Typescript allows you to switch to a

In my TypeScript code, I have implemented multiple interfaces, components, and a key/interface map. interface FooProps { 'keyInFoo': string } const Foo = (props: FooProps) => {} interface BarProps { 'keyInBar': string } cons ...

Is it possible that using npm link could be the root cause of the "module not

As I delve into understanding how to utilize TypeScript modules in plain JavaScript projects, it appears that I am facing a limitation when it comes to using npm linked modules. Specifically, I can successfully use a module that is npm-linked, such as &apo ...

Is there a way to update the styling of specific sections of an input field as the user enters text in React?

Just like in most markdown editors, I am looking to enable the ability to modify parts of an input field as the user enters text. For instance: When the user types "_above_", as soon as the second underscore is typed, the text should be styled accordingly ...

Steps for importing jQuery to vendor.ts in Angular 2 webpack

Currently, I am in the process of setting up my Angular 2 app using webpack. As I review the vendor.ts file, I notice this specific structure. // Angular 2 import '@angular/platform-browser'; import '@angular/platform-browser-dynamic'; ...

How do I implement data range filtering in Typescript?

Seeking assistance with filtering data by date range and forwarding the results to the client. The objective is to extract tickets created within specific dates, but I keep encountering a console error which is proving challenging to resolve. var befor ...

What is the best way to integrate Nextjs Link Component with framer motion in a Typescript environment?

Description I am trying to use Framer Motion to animate a Next.js Link component in a TypeScript environment, but I keep encountering a type error: Property 'Link' does not exist on type '(<Props extends {}>(Component: string | Compo ...

Has the object been altered to become undefined?

product.service.ts: import { Injectable } from '@angular/core'; import { Http, Response } from '@angular/http'; import { Observable } from "rxjs/Observable"; import 'rxjs/add/operator/map' @Injectable() export class ProductSe ...

What is the best way to conceal a canvas or another item?

Within my main canvas, there are three smaller canvases and a text element. <canvas id="Background" width="350" height="300" style="border:6px solid black; position: absolute; left: 10px; top: 10px;"> </canvas> <canvas id="Canvas1" width ...

Angular threw an error saying: "Template parse errors: is not a recognized element"

I am attempting to utilize babel standalone within a react application to transpile Angular TypeScript. The transpiling process seems to be successful, however, I encounter an error when trying to import a component and use its selector within the template ...

Subscribe to a new Observable once the previous one completes

I need assistance in getting the current user after logging in. When I use this.router.navigate([this.returnUrl]); it does not work. Can someone please help me identify what is wrong here and how I can fix it? onSubmit(): void { this.authService.logi ...

angular pipe and tap methods fail to execute the designated function

I am encountering a problem when calling a function in my login service. I have tried using a pipe and tap. Interestingly, when I use res => console.log(res), it outputs the desired result. However, when I attempt to call a function, it seems that the ...

Unable to load variables into site.css in order for Flask app to successfully render home.html

I'm encountering difficulties in getting my site.css file to accept two variables passed in from my app.py using Jinja2 templates, namely {{ variable }}. In app.py, I have defined two variables named empty_fill_line and fill_line, which dynamically up ...

Exploring the inner workings of the canDeactivate guard feature in Angular

Exploring the concept of guards in Angular has sparked a question in my mind. Why can't we simply have a class with a deactivate method that we can import and use as needed? The provided code snippets illustrate my confusion. export interface CanComp ...

Incorporate a dropdown selection option into a clickable Angular 6 table row using Bootstrap 4 styling

I am currently updating a financial account book that displays all available accounts in a table format. Each row provides essential details about a specific account, and when a user clicks on a row, Angular redirects them to a detailed view for that parti ...