Roberta  Ward

Roberta Ward

1596078240

How I Fix Strange Behavior of MatExpansionPanel

I have worked with Angular Material for several years and I love how easy it is to integrate their components into my apps. Among some of the most popular components like MatTab and MatTable, I often use MatExpansionPanel to render data that regulates a parent-child relationship. The problem with MatExpansionPanel is that it will automatically close when the data is getting updated. For example, assume we have a list of parent folders which also contain several sub folders that need to be loaded at runtime. The issue occurs right after sub folder data is loaded. Since the data structure has changed MatExpansionPanel suddenly collapses and the user needs to expand the panel again to view the contents. The issue is demonstrated below:

Image for post

Expansion Panel automatically closes when data get updated

My First Attempt

Initially I thought this can be easily fixed by adding some custom logic to reopen the panel after the data is getting loaded. By doing this the parent folder can finally expand after sub folders are rendered but I am not fully satisfied with the current behavior. As the result, the expansion panel starts collapsing for a few milliseconds then begins to open again which, in fact, is not very graceful to see.

Image for post

Ungraceful Success

After some time struggling to find the root cause, I realized that the problem is not caused by MatExpansionPanel itself. It’s definitely a side effect of the way my data structure gets updated.

In my implementation I use *ngFor structural directives to render each expansion panel. When the data structure is updated, *ngFor destroys existing MatExpansionPanels and re-renders the components again which causes all the states of the expansion panel to be lost completely. I then started digging into Angular doc to understand how *ngFor works and found out something interesting that might help me fix this problem.

#angular-material #javascript #ui #angular #design

What is GEEK

Buddha Community

How I Fix Strange Behavior of MatExpansionPanel

Appsinvo : What is the Internet of Behavior & the Future of IoB

Appsinvo has the best experience in developing IoT projects. Hence you can constant us for consultation with our professionals and get a huge reach in your business. Read More at : https://www.appsinvo.com/blog/what-is-the-internet-of-behavior-the-future-of-iob/

#benefits of internet of behavior #what is the internet of behavior used for? #what is the internet of behavior? #appsinvo

Fixing Corrupted Undo Tablespace | #dailyDBA 33

0:01 #dbaChallenge: Which cases sql plan hash value will change?

Questions Picked-up For This Episode:

1:31 If RMNA backups are residing on different DISK GROUPS then can we restore the rman backup? If yes then is there any specific change is needed in restore syntax?

03:35 #dba Challenge!

04:17 How to fix when undo tablespace get corrupted?

06:09 Is optimizer smart enough to choose between index scan and table scan?

07:30 What is the difference between using table_name and schema.table_name in a query?

11:11 cdump location is growing faster and filling up entire /data mount point. What to do?

#dailyDBA #dbaGenesis

Your comments encourage us to produce quality content, please take a second and say ‘Hi’ in the comments and let me and my team know what you thought of the video …
DBA Genesis provides all you need to build and manage effective Oracle technology learning. We designed DBA Genesis as a simple to use yet powerful online Oracle learning system for students. Each of our courses is taught by an expert instructor, and every course is available with a challenging project to push you out of your comfort zone!!

DBA Genesis is currently the fastest & the most engaging learning platforms for DBAs across the globe. Take your database administration skills to next level by enrolling into your first course.

Start your DBA Journey Today !!

#fixing #fixing

Roberta  Ward

Roberta Ward

1596078240

How I Fix Strange Behavior of MatExpansionPanel

I have worked with Angular Material for several years and I love how easy it is to integrate their components into my apps. Among some of the most popular components like MatTab and MatTable, I often use MatExpansionPanel to render data that regulates a parent-child relationship. The problem with MatExpansionPanel is that it will automatically close when the data is getting updated. For example, assume we have a list of parent folders which also contain several sub folders that need to be loaded at runtime. The issue occurs right after sub folder data is loaded. Since the data structure has changed MatExpansionPanel suddenly collapses and the user needs to expand the panel again to view the contents. The issue is demonstrated below:

Image for post

Expansion Panel automatically closes when data get updated

My First Attempt

Initially I thought this can be easily fixed by adding some custom logic to reopen the panel after the data is getting loaded. By doing this the parent folder can finally expand after sub folders are rendered but I am not fully satisfied with the current behavior. As the result, the expansion panel starts collapsing for a few milliseconds then begins to open again which, in fact, is not very graceful to see.

Image for post

Ungraceful Success

After some time struggling to find the root cause, I realized that the problem is not caused by MatExpansionPanel itself. It’s definitely a side effect of the way my data structure gets updated.

In my implementation I use *ngFor structural directives to render each expansion panel. When the data structure is updated, *ngFor destroys existing MatExpansionPanels and re-renders the components again which causes all the states of the expansion panel to be lost completely. I then started digging into Angular doc to understand how *ngFor works and found out something interesting that might help me fix this problem.

#angular-material #javascript #ui #angular #design

Rahul Jangid

1617275780

The animated sticky navigation bar on scroll | Fixed Navbar on Scroll

Hello, guys in this tutorial we will create an animated sticky navigation bar on scroll using HTML CSS & JavaScript

Common Query

  1. how to create a fixed navbar
  2. how to add class on scroll
  3. how to create a sticky navigation bar on scroll

Hello, guys In this tutorial we will try to solve above mention query. and also we will learn how to create an animated sticky navigation bar on scroll using HTML CSS & JavaScript

First, we need to create three files index.html and style.css then we need to do code for it.

Fixed Navbar Step:1

Add below code inside index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Animated Sticky Nav</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="style.css" />
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
</head>
<body>
  <header>
    <h1>Quizzz</h1>
  </header>
  <nav id="navbar">
    <ul class="menu-list">
      <li class="logo"><a href="#"><img src="quiz-logo.png" alt="logo"></a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">FAQ's</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </nav>
  <script>
    const nav = document.querySelector("#navbar");
    const NavTop = nav.offsetTop;

    function fixnavbar(){
      if(window.scrollY >= NavTop){
        document.body.style.paddingTop = nav.offsetHeight + "px";
        document.body.classList.add("fixed-nav");
      }else {
        document.body.style.paddingTop = 0;
        document.body.classList.remove("fixed-nav");
      }
    }
    window.addEventListener("scroll", fixnavbar);
  </script>
</body>
</html>

Fixed Navbar Step:2

Then we need to add code for style.css which code I provide in the below screen.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Oswald', sans-serif;
}
body {
  background: #f2f4f6;
  height: 200vh;
}
header {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fbb833;
  height: 25vh;
}
header > h1 {
  color: #fff;
  font-size: 100px;
  text-shadow: 3px 5px 0 rgb(0 0 0 / 20%);
}
nav#navbar {
  background: #3f3d56;
  top: 0;
  position: relative;
  width: 100%;
  transition: all 0.5s linear;
  z-index: 1;
}
ul.menu-list {
  display: flex;
  list-style: none;
}
ul.menu-list li {
  display: flex;
  flex: 1;
  text-align: center;
  justify-content: center;
  align-items: center;
  padding: 5px 0;
}
ul.menu-list li.logo {
  max-width: 0;
  overflow: hidden;
  background: #fff;
  transition: all 0.5s linear;
}
.logo > a > img {
  max-width: 80px;
}
ul.menu-list li > a {
  text-decoration: unset;
  display: flex;
  color: #fff;
  transition: 0.2s linar;
  text-transform: uppercase;
}
body.fixed-nav nav#navbar {
  position: fixed;
  box-shadow: 0 1px 2px rgb(0 0 0 / 20%);
}
body.fixed-nav li.logo {
  max-width: 300px;
}

Fixed Navbar Output: Watch Now

We hope you liked this article (The animated sticky navigation bar on scroll | Fixed Navbar on Scroll). You should definitely keep your thoughts about it in the comment below and share this article with your friends.

#html #css #navbar #fixed navbar #fixed navbar on scroll

WordPress 5.5.1 Fixes Millions of Broken Sites

The WordPress 5.5.1 maintenance release is designed to stop sites from breaking. But the errors will still need to be fixed.
WordPress described the issue like this: “In WordPress 5.5 the global JavaScript objects listed below were removed without being deprecated. WordPress 5.5.1 adds a backfill for these globals so they no longer cause JavaScript errors.”

Millions of Websites Affected

The spreadsheet revealed the previously unknown amount of sites that were broken.
There initially was casual speculation that the impact was relatively small and limited to thousands of websites. But that wasn’t the case.
WordPress 5.5 negatively impacted millions of websites.

#wordpress #fixes issues #fixes millions of broken sites