Related questions

CSS Child Margins do not Collapse while Angular Animation

2022-05-04 09:47 endlacer imported from Stackoverflow

I have two vertical stacked parent-boxes which each have several children. These children have a set margin-top and margin-bottom. In a static environment these child-margins collapse.

The second parent-box is hidden by default and can be toggled via a button. Applying an angular animation to the second parent-box gives a weird behaviour, where the margins of the children do not collapse properly during the time of the animation.

I build a working minimal example of the issue here on Stackblitz

What causes this behaviour? Can i fix it without changing the html and the margins of the children? (just removing margin-top for example is not applicable in my case)

1 answer

  • answered 2022-05-04 09:55 temp_user

    You can query for the children, remove their margin, the animate, and put back the margin (it's done implicitly)

    Working example

    export const ENTER_LEAVE_ANIMATION = trigger('enterLeaveAnimation', [
  transition(':enter', [
    query('.child', style({ marginTop: 0 }), { optional: true }),
    itemInvisibleStyle,
    animate('2000ms ease-out', itemVisibleStyle),
  ]),
  transition(':leave', [
    query('.child', style({ marginTop: 0 }), { optional: true }),
    itemVisibleStyle,
    animate('2000ms ease-in', itemInvisibleStyle),
  ]),

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum

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"> <!-- IF up to date, main-div3 -->
          <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:

    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>
  • React native margin: 'auto' working on web but not on device

    I am building an application which uses react native on expo dev. I am trying to add a button in the top left corner which is adjacent to some text o the right hand side, I have used marginRight: 'auto' for this and it does display as expected on the web version but on the app version on Android it appears centered as if the margin styling is ignored, any solutions?

    <View style={styles.header}>
  
  <View style={styles.headerTop}>
    <Text style={styles.headerText}>Question {currentQuestion+1}/{questions.length}</Text>
    <TouchableOpacity 
      onPress={() => navigation.navigate("Home")}
      style= {styles.exitButton}
      >
      <Text style={styles.buttonText}>Exit</Text>
      </TouchableOpacity>
      </View>
    <Text style={styles.timer}>{timer}</Text>
  </View>

    header: {
    flexGrow: 0,
    padding: 8,
  },
  headerTop: {
    flexDirection: 'row-reverse',
  },
  headerText: {
    fontSize: 24,
    textAlign: 'right',
  },
exitButton: {
    padding: 12,
    paddingHorizontal: 12,
    backgroundColor: '#1BA7F9',
    borderRadius: 12,
    marginRight: 'auto',
  },
  buttonText: {
    fontSize: 20,
  }
  • Remove Vertical margins between Flex Children

    I'm trying to create a simple grid-based ASCII graphics system in HTML.
    The system interprets an array of single-character strings as a grid, with regular partitions representing rows.
    These rows are then appended to some parent via a DIV or P container.

    Aside from negative margins, how can I stylize this so that the distance between rows and columns are the same?

    Here's what I've tried so far:

    .grid {
  display: flex;
  flex-direction: column;
  row-gap: 0px;
  font-family: monospace;
}
    <!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <div class="grid">
    <div>XXXX</div>
    <div>XXXX</div>
    <div>XXXX</div>
    <div>XXXX</div>
  </div>
</body>

</html>

    To be clear, I need the characters to sit flush against each other.

  • Text moves when hovering

    Every time I hover over social bar and it gets bigger , headers moves down some pixels. I know it's because of the margin, but I don't know how to fix it. CSS code:

    .socialbar {
  /* color: white; */
  background: pink; /* added by community for better display */
  display: flex;
  justify-content: center;
}

.socialbar img {
  width: 50px;
  height: auto;
  margin-top: 60px;
  margin-left: 16px;
  margin-right: 16px;
  transition: 0.3s;
}

.socialbar img:hover {
  width: 65px;
  height: auto;
  .headers {
    color: white;
    font-family: 'Montserrat', sans-serif;
    display: flex;
    justify-content: center;
    margin-top: 200px;
  }
    <div class="socialbar">
  <a class="magic_eden" href=""><img src="https://i.imgur.com/57ypMsv.png"></a>
  <a class="discord" href=""><img src="https://i.imgur.com/YFeIsm8.png"></a>
  <a class="twitter" href=""><img src="https://i.imgur.com/ft9IJP1.png"></a>
</div>

<div class="headers">
  <span class="header_one">
      About
  </span>
</div>

  • NativeScript Routable Animations not working

    I want to implement an animated transition between two pages using NativeScript and Angular.

    I have one common "Notifications" screen, on which there is a ToogleBarView (a custom component similar to a TabView) with the "Messages" and "Transactions" buttons on the top, and an area below it, inside which transactions or messages should be displayed, depending on which the button was pressed by the user

    I need to use exactly router-outlet, so I can't animate the transition with a router. I found this example: https://github.com/NativeScript/ns-ng-routable-animations and did everything according to it.

    I'm new in NativeScript and Angular, so I don't really understand what's wrong here. Any help would be greatly appreciated, many thanks in advance!

    But the transition happens without animation and when switching pages I get the next error:

    JS: -------------
JS: === ERROR ===
JS: Unable to process animations due to the following failed trigger transitions
JS:  @routeAnimation has failed due to:
JS:
JS: - `query(":leave")` returned zero elements. (Use `query(":leave", { optional: true })` if you wish to allow this.)   
JS:
JS: - `query(":enter")` returned zero elements. (Use `query(":enter", { optional: true })` if you wish to allow this.)   
JS:
JS: - `query(":leave")` returned zero elements. (Use `query(":leave", { optional: true })` if you wish to allow this.)   
JS: 
JS: - `query(":enter")` returned zero elements. (Use `query(":enter", { optional: true })` if you wish to allow this.)   
JS: Error: Unable to process animations due to the following failed trigger transitions
JS:  @routeAnimation has failed due to:
JS:
JS: - `query(":leave")` returned zero elements. (Use `query(":leave", { optional: true })` if you wish to allow this.)   
JS:
JS: - `query(":enter")` returned zero elements. (Use `query(":enter", { optional: true })` if you wish to allow this.)   
JS:
JS: - `query(":leave")` returned zero elements. (Use `query(":leave", { optional: true })` if you wish to allow this.)   
JS:
JS: - `query(":enter")` returned zero elements. (Use `query(":enter", { optional: true })` if you wish to allow this.)   
JS:
JS:     at TransitionAnimationEngine.reportError (file: src\webpack:\my-app\node_modules\@angular\animations\__ivy_ngcc__\fesm2015\browser.js:3077:0)
JS:     at TransitionAnimationEngine._flushAnimations (file: src\webpack:\my-app\node_modules\@angular\animations\__ivy_ngcc__\fesm2015\browser.js:3224:0)
JS:     at TransitionAnimationEngine.flush (file: src\webpack:\my-app\node_modules\@angular\animations\__ivy_ngcc__\fesm2015\browser.js:3041:0)
JS:     at InjectableAnimationEngine.flush (file: src\webpack:\my-app\node_modules\@angular\animations\__ivy_ngcc__\fesm2015\browser.js:3904:0)
JS:     at file://...
JS: -------------

    Here is my routes from routing-module.ts:

    const routes: Routes = [
  {
    path: "",
    component: NotificationsComponent,
    children: [
      {
        path: "transactions",
        component: TransactionsComponent,
        data: { 
          animation: "transactionsPage"
         },
      },
      {
        path: "messages",
        component: MessagesComponent,
        data: { 
          animation: "messagesPage"
         },
      },
      { path: "", redirectTo: "transactions", pathMatch: "full" },
    ],
  },
];

    notifications.component.html:

    <StackLayout [@routeAnimation]="prepRouteState(routerOutlet)">
  <AppHeader title="Notifications"></AppHeader>
  <ToggleBarView margin="100" height="32" [tabs]="tabs"></ToggleBarView >
  <router-outlet #routerOutlet="outlet"></router-outlet>
</StackLayout>

    notifications.component.ts:

    import { ChangeDetectionStrategy, Component } from "@angular/core";
import { ToggleBarTab } from "~/app/toggle-bar-view/toggle-tab";
import {
  animate,
  animateChild,
  group,
  query,
  style,
  transition,
  trigger,
} from "@angular/animations";

const slideLeft = [
  query(":leave", style({ transform: "translateX(0)" })),
  query(":enter", style({ transform: "translateX(-400)" })),

  group(
    [
      query(":leave", animate(500, style({ transform: "translateX(400)" }))),
      query(":enter", animate(500, style({ transform: "translateX(0)" }))),
    ],
    { delay: 10 }
  ), // Needed because a wierd animation scheduling bug in IOS
];

const slideRight = [
  query(":leave", style({ transform: "translateX(0)" })),
  query(":enter", style({ transform: "translateX(400)" })),

  group(
    [
      query(":leave", animate(500, style({ transform: "translateX(-400)" })), {
        delay: 100,
      }),
      query(":enter", animate(500, style({ transform: "translateX(0)" })), {
        delay: 100,
      }),
    ],
    { delay: 10 }
  ), // Needed because a wierd animation scheduling bug in IOS
];


@Component({
  selector: "AppNotifications",
  templateUrl: "./notifications.component.html",
  styleUrls: ["./notifications.component.scss"],
  animations: [
    trigger("routeAnimation", [
      transition("transactionsPage => messagesPage", slideRight),
      transition("messagesPage => transactionsPage", slideLeft),
    ]),
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class NotificationsComponent {
  tabs: ToggleBarTab[] = [
    { title: "Transactions", route: "/notifications/transactions" },
    { title: "Messages", route: "/notifications/messages" },
  ];

  prepRouteState(outlet: any) {
    return outlet.activatedRouteData["animation"] || "firstPage";
  }
}
  • How to use a preexisting JSON animation file in Angular?

    I have a pre existing JSON animation but I'm not sure how to implement this on a Angular Page when I want to route to a new page, the only things I have found is how to implement Animations that are made inside the project already