GithubHelp home page GithubHelp logo

Comments (7)

valgeirb avatar valgeirb commented on May 22, 2024 5

Is the extra div causing problems? I could try moving all the events etc. to the outermost div - I'll let you know how that goes 👍🏻

from vue3-popper.

valgeirb avatar valgeirb commented on May 22, 2024 3

@timmaier Yes, the default slot of the Popper is wrapped with an inline-block, this is so that you can't activate the Popper when clicking "outside" of the wrapped element.

Here's a demo with the inline-block style removed (so that the element takes up the full width of the parent element) with some borders to make things clearer:

demo

I just feel that this could confuse people and you can always add width: 100% to your button to make it full width.

That said, if you have any suggestions I'm all ears 👍🏻

Edit: All that said, the class="inline-block" should probably be on the outermost div, I'll poke at this some more...

from vue3-popper.

ThorntonStuart avatar ThorntonStuart commented on May 22, 2024 2

Was there any solution to this one? I think the ability to apply modifiers - specifically the applyStyles (https://popper.js.org/docs/v2/modifiers/apply-styles/) - would be helpful here in allowing users to override the class="inline-block".

Unfortunately the class="inline-block" seems to have an arbitrary width in my use case and doesn't respond to the 100% width of it's immediate child, nor extend to the width of it's parent.

from vue3-popper.

timmaier avatar timmaier commented on May 22, 2024 1

I also found an issue with styles in particular the elements inside the Popper would no longer take on the full width of the parent element.

from vue3-popper.

osbre avatar osbre commented on May 22, 2024

In my case, it causes problems with styles
BTW thanks for reaching out

from vue3-popper.

valgeirb avatar valgeirb commented on May 22, 2024

This is causing some unwanted issues, what is your styling problem exactly?

from vue3-popper.

thplat avatar thplat commented on May 22, 2024

Sorry for hijacking this issue, but a way of getting rid of the wrapper, or at least defining the tag of the wrapper would be much appreciated. I have a use case where user generated content comes from a database. The content contains HTML and is wrapped in

tags. Inside of the content I am transforming parts of it to render popovers, however since vue3-popper renders a div, and a div is invalid within paragraphs, it leads to hydration issues in a SSR context.

from vue3-popper.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.