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.

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

pagy_bootstrap_compact_nav working fine, pagy_bootstrap_responsive_nav is blank #140

Closed
evamedia opened this issue Mar 9, 2019 · 22 comments

Comments

@evamedia
Copy link

evamedia commented Mar 9, 2019

I have setup Page fine, adding the extras. If i use the compact extra it displays fine, trying the responsive extra and it's empty, inspect the html it creates the nav-id but there is no btn-group created.

I was of the understanding that require 'pagy/extras/bootstrap' in my page.rb should load compact and responsive, am a bit lost.

@evamedia evamedia closed this as completed Mar 9, 2019
@ddnexus
Copy link
Owner

ddnexus commented Mar 9, 2019

I hope you found out the problem by yourself. Missing the Javascript initialization?

@evamedia
Copy link
Author

evamedia commented Mar 10, 2019 via email

@ddnexus
Copy link
Owner

ddnexus commented Mar 10, 2019

Which event listener are you using?
Production not working with Javascript makes me think to asset:precompile. Did you re-compile?

@evamedia
Copy link
Author

evamedia commented Mar 10, 2019 via email

@ddnexus
Copy link
Owner

ddnexus commented Mar 10, 2019

OK, so let's recap (correct me if I am wrong):

  • in dev mode it works
  • in prod mode it doesn't
  • when it doesn't work:
    • the nav is initially empty
    • after a resize the nav gets populated
    • after the first correct rendering... does it work or not?
    • is there any difference in different browsers and different initial sizes?

@ddnexus ddnexus reopened this Mar 10, 2019
@evamedia
Copy link
Author

evamedia commented Mar 10, 2019 via email

@ddnexus
Copy link
Owner

ddnexus commented Mar 10, 2019

Another question that I added later: is there any difference in different browsers and different initial sizes?

BTW if I understand correctly, in production the only differences are:

  • the breakpoints behave differently than in dev
  • the problem appear to be related to the small size (first breakpoint?)
  • do bigger size work well?

@evamedia
Copy link
Author

evamedia commented Mar 10, 2019 via email

@ddnexus
Copy link
Owner

ddnexus commented Mar 10, 2019

That's interesting.
Can we check if there is no difference in the bootstrap breakpoints settings between the dev and prod?
Could you share a minimal app with that settings in order to reproduce the issue?

@evamedia
Copy link
Author

evamedia commented Mar 10, 2019 via email

@ddnexus
Copy link
Owner

ddnexus commented Mar 10, 2019

That would work... let's start with adding my email-address to the bitbucket repo, so I could clone it and try it locally. Thanks.

@ddnexus
Copy link
Owner

ddnexus commented Mar 10, 2019

Maybe also the web address/access to the deployed app, so if I am lucky I don't even have to run the app locally, but use the deployed one.

@ddnexus
Copy link
Owner

ddnexus commented Mar 10, 2019

One thing that I notice: the pagy breakpoints in the initializer are probably a problem (although doesn't explain the difference dev/prod). Did you try to change that?

@evamedia
Copy link
Author

evamedia commented Mar 10, 2019 via email

@evamedia
Copy link
Author

evamedia commented Mar 10, 2019 via email

@ddnexus
Copy link
Owner

ddnexus commented Mar 10, 2019

That are not a default! they are just a bad example. Sorry. I should change that, because the width values are crazy small! You should sync them with the standard width of the bootstrap breakpoints. Please, can you try that?

@evamedia
Copy link
Author

evamedia commented Mar 10, 2019 via email

@ddnexus
Copy link
Owner

ddnexus commented Mar 10, 2019

Great! Could you post the breakpoints? Are they synced with the bootstrap breakpoints that you use?

@evamedia
Copy link
Author

evamedia commented Mar 10, 2019 via email

@ddnexus
Copy link
Owner

ddnexus commented Mar 10, 2019

Not sure to understand "wider and wider than the viewport". Do you mean that the pagy :size for the breakpoint is not respected?

@ddnexus
Copy link
Owner

ddnexus commented Mar 10, 2019

Please, take a look at this page https://bootstrapcreative.com/bootstrap-4-media-queries/ and use the container widths as the reference. The pagy nav applied breakpoint depends on the container width, so please ensure that the container would snap at different widths correctly even without the pagy nav in it.

@evamedia
Copy link
Author

evamedia commented Mar 10, 2019 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants