Ionic angular router overflow

2022-05-04 10:34 Norbert Bartko imported from Stackoverflow

In my app I have 3 nested ion-router-outlet's which work fine, until the third ion-router-outlet has overflowing content. Can I somehow set the inner outlet to height: auto, or something similar, so that my content becomes scrollable.

This is what the app looks like when no overflow occurs and this is how it looks with overflow inside the inner outlet.

This is my code for the wrapper of the third outlet:

html
<ion-content [scrollEvents]="true" (ionScroll)="onScroll($event)">
  <ion-grid fixed class="padding">
    <h1 class="title">
      {{ title }}
    </h1>

    <app-tab-navigation baseUrl="/admin/authentication/" [tabOptions]="tabOptions"></app-tab-navigation>

    <ion-router-outlet></ion-router-outlet>
  </ion-grid>
</ion-content>

scss
ion-router-outlet {
  overflow: visible;
  margin-top: 48px;
  padding-top: 0px;
}

The interesting thing is, when I use angular's router-outlet the overflow works fine but then I need to use the ion-router-outlet.

Im using ionic 6 with angular 13.

Is there any way to fix this with css or any ionic configuration?

See also questions close to this topic

Creating Sticky Navbar with Drop Down Menu HTML

I am creating a HTML web page which contains a sticky navbar with drop down menu. However, when I created one, the dropdown menu does not works in the sticky navbar and so goes vise versa. below is the screenshot of both the result of the two codes.

*image with dropdown menu but without sticky navbar

*image with sticky navbar but without dropdown menu

below is the code for "image with dropdown menu but without sticky navbar"

    <!DOCTYPE html>
    <html>
    <head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-    awesome/4.7.0/css/font-awesome.min.css">
    <style>
    body {margin:0;font-family:Arial}

   .topnav {
    overflow: hidden;
    background-color: #333;
  }

  .topnav a {
    list-style-type: none;
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    position: sticky;
  }



  .active {
    background-color: #04AA6D;
    color: white;
  }

  .topnav .icon {
    display: none;
  }

  .dropdown {
    float: left;
    overflow: hidden;
  }

  .dropdown .dropbtn {
    font-size: 17px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
  }

  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }

  .dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }

  .topnav a:hover, .dropdown:hover .dropbtn {
    background-color: #555;
    color: white;
  }

  .dropdown-content a:hover {
    background-color: #ddd;
    color: black;
  }

  .dropdown:hover .dropdown-content {
    display: block;
  }

  @media screen and (max-width: 600px) {
    .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
    .topnav a.icon {
      float: right;
      display: block;
    }
  }

  @media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
    .topnav.responsive .dropdown {float: none;}
    .topnav.responsive .dropdown-content {position: relative;}
    .topnav.responsive .dropdown .dropbtn {
      display: block;
      width: 100%;
      text-align: left;
    }
  }
  </style>
  </head>
  <body>
        <div class="header">
        <h2>Scroll Down</h2>
    <p>Scroll down to see the sticky effect.</p>
  </div>

  <div class="topnav" id="myTopnav">
    <a href="#home" class="active">Home</a>
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <div class="dropdown">
      <button class="dropbtn">Dropdown 
        <i class="fa fa-caret-down"></i>
      </button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div> 
    <a href="#about">About</a>
    <a href="javascript:void(0);" style="font-size:15px;" class="icon"     onclick="myFunction()">&#9776;</a>
  </div>

  <div style="padding-left:16px">
    <h2>Responsive Topnav with Dropdown</h2>
    <p>Resize the browser window to see how it works.</p>
    <p>Hover over the dropdown button to open the dropdown menu.</p>
  </div>

  <h3>Sticky Navigation Bar Example</h3>
  <p>The navbar will <strong>stick</strong> to the top when you reach its scroll position.</p>
  <p><strong>Note:</strong> Internet Explorer do not support sticky positioning and Safari         requires a -webkit- prefix.</p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>


  <script>
  function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
      x.className += " responsive";
    } else {
      x.className = "topnav";
    }
  }
  </script>

  </body>
  </html>

below is the code for "image with sticky navbar but without dropdown menu"

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-    awesome/4.7.0/css/font-awesome.min.css">
<style>


body {
  font-size: 20px;
}
body {margin:0;}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px 20px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}
    
/*======================================================================*/

body {
  background-color:white;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #38444d;
}

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
    
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
  display: block;
}


footer {
  text-align: center;
  padding: 3px;
  background-color: DarkSalmon;
  color: white;
}

</style>
</head>
<body>

<div class="header">
  <h2>Scroll Down</h2>
  <p>Scroll down to see the sticky effect.</p>
</div>

<ul>
  <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li class="dropdown">
      <a href="javascript:void(1)" class="dropbtn">Dropdown</a>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </li>
</ul>

<h3>Sticky Navigation Bar Example</h3>
<p>The navbar will <strong>stick</strong> to the top when you reach its scroll position.</p>
<p><strong>Note:</strong> Internet Explorer do not support sticky positioning and Safari requires a -webkit- prefix.</p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>


<footer>
  <p>Author: Hege Refsnes<br>
  <a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>


</body>
</html>

Please i need some help with this as i am new to html and css.

Javascript: Change element class if button has a certain value
```
        <div class="main-div main-div2"> 
          <button id="update-btn" class="btn update-btn"> 
              Up to date
          </button>
        </div>
```
I want to make it so if update-btn has a value of "Up to date", change the div class from "main-div main-div2" to "main-div main-div3". Otherwise, if it's any other value, change it to "main-div main-div2"

What kind of loop would be good for this Javascript function too if I want it to be checking constantly?

Thank you.

Boostrap vertical sizing with different style width and height

I am trying to set verticaly icon on profile photo card inside div to be in the middle in white box(div), but dont know why it doesnt works. When I use style="width: 300px; height: 300px; for div square I can center it on horizontaly, but not verticaly :/ Can someone explain me what I am doing wrong?

Anyway is there any way how to resize bootstrap icons except display-1???

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    
  <div class="container-sm offset-md">
        <h1 class="p-4 m-4">Nastavení profilu</h1>
        <div class="row">
            <div class="col">
                <div class="card p-4 m-4">
                    Osobní údaje
                    <input type="text" name="name" class="form-control" placeholder="Jméno">
                    <input type="text" name="surname" class="form-control" placeholder="Příjmení">
                    <input type="email" name="email" class="form-control" placeholder="E-Mail">
                    <input type="date" name="name" class="form-control">
                </div>
                
            </div>

            <div class="col-4">
                <div class="card p-4 m-4 bg-light">
                    Profilová fotografie
                    <div class=" square text-center border display-1 m-3 bg-white mx-auto">
                        <i class="bi bi-person-fill align-middle justify-content-center text-secondary"></i>
                    </div>

                    <input type="file" id="customFile" name="file" hidden="">
                        <div class="text-center">
                            <button class="btn btn-success" for="customFile">Nahrát</button>
                            <button type="button" class="btn btn-danger">Smazat</button>
                            
                            <p class="text-muted mt-3 mb-0">Poznámka: Minimální velikost 300px x 300px</p>
                        </div>
                </div>
                
            </div>
        </div>

        <div class="row">
            <div class="col">
                <div class="card p-4 m-4">
                    Změna hesla
                </div>
                
            </div>

            <div class="col">
                <div class="card p-4 m-4">
                    Zobrazit/skrýt podrobnosti
                </div>
            </div>
        </div>
    </div>

How to get only one question to the preview page in survey management website in angular?
I am using querystring to h=get the questions on preview page but I am not able to get one question on 1st page and 2nd on another page after clicking next button.

Querystring
```
const queryString = {
      SurveyId: 1,
      PageNo: 0,
      PageSize: 20
    };
```
@Host() or ng-container incompatibility between angular 9 and 10
Here are two live examples on stackblitz:
- angular 9
- angular 10
To check the difference between them, open console and notice that:

In form-error-control-name.directive.ts line 22:

For angular 9, this.parent.control is not null For angular 10, this.parent.control will throw error

What is the difference? I checked angular 10 update doc but don't know which incompatibility this is.

Thanks!

How can I delete a row by its SKU instead of its ID?

I try to delete the row using the sku of the product. I'm using spring boot and angular. I got an error when I added the sku on my button like this one (click)="onDeleteProductBySku(deleteClick?.sku)" it said that the Property 'sku' does not exist on type '(product: Product) => void'.. On my command prompt, I got this error. How can I solve this problem?

Error: product/product.component.html:50:109 - error TS2339: Property 'sku' does not exist on type '(product: Product) => void'.

50 <button class="btn btn-outline-danger btn-sm me-2" (click)="onDeleteProductBySku(deleteClick?.sku)">Delete</button>
                                                                                                                                  
product/product.component.ts:12:16
    12   templateUrl: './product.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component ProductComponent.

ProductsController.java --> This is working on the postman.

//Delete a product record using sku
//http://localhost:8080/products/deletebysku?sku=12345678

@DeleteMapping("/products/deletebysku")
@ResponseBody
private void deleteProductBySku(@RequestParam String sku){
    productsService.deleteProductBySku(sku);
}

product.component.ts

 public deleteProduct!: Product;

 public onDeleteProductBySku(sku: string): void {
    this.productServive.deleteProductBySku(sku).subscribe(
      (response: void) => {
        this.messageShow();
        console.log(response);
        this.getAllProduct();
      },
      (error: HttpErrorResponse) => {
        this.errorMessage(error.message);
      }
    );
 }

 public deleteClick(product: Product) {
   this.deleteProduct = product;
   console.log("delete by sku");
 }

product.service.ts

public deleteProductBySku(sku: string): Observable<void> {
  return this.http.delete<void>(`${this.apiServerUrl}/products/deletebysku?sku=${sku}`);
}

product.component.html

<button class="btn btn-outline-danger btn-sm me-2" (click)="onDeleteProductBySku(deleteClick?.sku)">Delete</button>

Can i use firebase + spring boot at same time in Ionic app

I'm building a mobile app in ionic and i want to know if i can use firebase and spring boot at the same time in the same app so i can benefit firebase real-time database and authentication and use my custom APIs in spring. If anyone has used it before, tell how it was and can they work efficiently at the same time ?
ReferenceError: Jitsi Meet Plugin ionic

I am trying to integrate this jitsi-meet plugin in ionic but when running the application I have this error.

Thank you very much to the person who can help me please

enter image description here

ERROR: Playwright does not support webkit on mac10.13

Here is my code debug log6474

Darwin 16.7.0
6475 verbose node v16.15.0
6476 verbose npm  v8.9.0
6477 error code 1
6478 error path /Users/------/onet/node_modules/playwright
6479 error command failed
6480 error command sh -c node install.js
6481 error /Users/-----/onet/node_modules/playwright-core/lib/server/registry/index.js:605
6481 error     if (!downloadPathTemplate || !executablePath) throw new Error(`ERROR: Playwright does not support ${descriptor.name} on ${_hostPlatform.hostPlatform}`);
6481 error                                                         ^
6481 error
6481 error Error: ERROR: Playwright does not support webkit on mac10.13
6481 error     at Registry._downloadExecutable (/Users/-----/onet/node_modules/playwright-core/lib/server/registry/index.js:605:57)
6481 error     at Object._install (/Users/----/onet/node_modules/playwright-core/lib/server/registry/index.js:434:28)
6481 error     at Registry.install (/Users/-----/onet/node_modules/playwright-core/lib/server/registry/index.js:590:26)
6481 error     at async installBrowsersForNpmInstall (/Users/----/onet/node_modules/playwright-core/lib/server/registry/index.js:780:3)
6482 verbose exit 1
6483 timing npm Completed in 47084ms
6484 verbose unfinished npm timer reify 1651869366404
6485 verbose unfinished npm timer reify:build 1651869403151
6486 verbose unfinished npm timer build 1651869403160
6487 verbose unfinished npm timer build:deps 1651869403161
6488 verbose unfinished npm timer build:run:install 1651869403338
6489 verbose unfinished npm timer build:run:install:node_modules/playwright 1651869403400
6490 verbose code 1

I am so frustrated can any one help I did following I ionic to do nvm I have OD Sierra should I upgrade.

Related questions

Ionic angular router overflow

See also questions close to this topic