Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

New content appended to wrapper rather than replacing container #479

Closed
johnpuddephatt opened this issue Jan 3, 2020 · 8 comments
Closed

New content appended to wrapper rather than replacing container #479

johnpuddephatt opened this issue Jan 3, 2020 · 8 comments
Assignees
@xavierfoucrier
Labels
@barba/css bug
Milestone
2.10.0

Comments

@johnpuddephatt
Copy link

The problem

I had barba/core working as expected. Then I installed barba/css and ran into problems with fetched content being appended to my barba wrapper rather than replacing my barba container as I expected.

Description

My markup looks like this:

@if(!isset($_SERVER['HTTP_X_BARBA']))
  <body>
    <div id="app" data-barba="wrapper" role="document">
      <header>My header content</header>
@endif

      <main data-barba="container" data-barba-namespace="{{ basename( get_permalink() ) }}">
        @yield('content')
      </main>

@if(!isset($_SERVER['HTTP_X_BARBA']))
      <footer>My footer content</footer>
      ### FETCHED CONTENT IS APPEARING HERE ###
    </div>
  </body>
@endif

When I navigate to a new page without barba/css it works as expected. When using barba/css, however, my new content appears where I've indicated in the markup. The previous page content is removed however, I do not see duplicate content.

The javascript calling Barba is very simple. I was originally running Barba with barba.init();. To use the CSS module I changed this to:

  barba.use(barbaCss);
  barba.init();

BarbaCSS is installed and I've verified this to be working by adding some simple opacity transitions between pages. I don't see any console messages.

Environment

  • Barba version that exhibits the issue: @barba/core@^2.9.6, @barba/css@2.1.15
  • Build used: import from node_modules
  • Browser OS/version used: Chrome 79.0.3945.88 on OS X Mojave
@johnpuddephatt
Copy link
Author

Note this still occurs if I remove the conditionals checking if $_SERVER['HTTP_X_BARBA'] is set.

@johnpuddephatt
Copy link
Author

I've created a minimum example and uploaded to GitHub and published it with GitHub pages. Hopefully this will help – I feel like I must be doing something wrong but for the minimum example I've copied code straight from the legacy page on the site and am still seeing the same problem.

Repository: https://github.com/johnpuddephatt/barba-test
Public URL: https://johnpuddephatt.github.io/barba-test/index.html

This demo loads Barba core and css from unpkg. It runs barba with:

barba.use(barbaCss);
barba.init();

The problem is as before: page content ends up beneath the footer.

@ouun
Copy link

ouun commented Jan 14, 2020

Same here. For now I moved the footer inside the container but would love to avoid the get-around. However thank you very much for barba.js, it is fun to use!

@xavierfoucrier xavierfoucrier changed the title @barba/css issue – new content appended to wrapper rather than replacing container New content appended to wrapper rather than replacing container Jan 30, 2020
@gsabater
Copy link

gsabater commented Mar 3, 2020

I'm having the same issue,
For some reason I get two containers and after the first click, only one container is updated.
This would be my DOM:

div[data-barba="wrapper"]
  div[data-barba="container" class="barba-container"

After the first click, the dom changes and appends a second container with the second page.

div[data-barba="wrapper"]
  div[data-barba="container" class="barba-container"
  div[data-barba="container" class="barba-container"

The thing is that after the second click, the second container would be updated as expected instead of adding a third container.

I think that i should get rid of the extra container with JS, but im not sure and I also i cant find any simple hideshow example for barba v2 as it was on v1

thanks

@xavierfoucrier
Copy link
Member

I recently discussed about this issue with @thierrymichel, and it should work the same way as @barba/core works. So it will be fixed in a future release, be patient 😉

@thierrymichel thierrymichel self-assigned this May 28, 2020
@stale stale bot added the wontfix label Jul 27, 2020
@stale stale bot added the wontfix label Sep 26, 2020
@barbajs barbajs deleted a comment from stale bot Nov 24, 2020
@barbajs barbajs deleted a comment from stale bot Nov 24, 2020
@stale stale bot added the wontfix label Jan 23, 2021
@crgeary
Copy link

crgeary commented Feb 24, 2021

I also have this issue.

It seems the container is appended as the last child of the wrapper. Even though that is not the correct location for it.

I have my wrapper set to my <body> tag as per the example in the docs. Why is this? What are the implications of me moving the wrapper deeper into my markup to ensure the container is appended in the correct location?

Thanks

@barbajs barbajs deleted a comment from stale bot Feb 24, 2021
@xavierfoucrier
Copy link
Member

Hi @crgeary,

There is no implications, if you want to put the Barba wrapper inside the body tag on a specific div its possible.
The documentation show a general way of using Barba, but you can put it where you want inside your DOM.

Hope it's clear 😉

@stale stale bot added the wontfix label Jun 9, 2021
@barbajs barbajs deleted a comment from stale bot Jan 31, 2022
@tniou
Copy link

tniou commented Jul 20, 2022

I'm also having this issue, I'm working on a WordPress setup and the barbaCss breaks the functionality :

-When I put the data-barba="container" in the 'main' element, the transition gets stuck to the 'leave-active' state

-When I put the data-barba="container" in a div inside the 'main' element, the container with the new page data gets added to the end of the data-barba="wrapper" container and never replaces the targeted element, so it stays on the bottom of the page (after the footer which does not get affected)

@xavierfoucrier xavierfoucrier added this to the barba@next milestone Apr 20, 2023
xavierfoucrier added a commit that referenced this issue Apr 24, 2023
@xavierfoucrier
fix(core): 🐛 fix container replacement in the dom
2798de1 
This fix #479.
@xavierfoucrier xavierfoucrier mentioned this issue May 8, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@xavierfoucrier xavierfoucrier

Labels
@barba/css bug
Projects
None yet
Milestone
2.10.0
Development

No branches or pull requests
7 participants
@thierrymichel @xavierfoucrier @crgeary @gsabater @johnpuddephatt @ouun @tniou