Comments (7)
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.
@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:
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.
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.
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.
In my case, it causes problems with styles
BTW thanks for reaching out
from vue3-popper.
This is causing some unwanted issues, what is your styling problem exactly?
from vue3-popper.
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)
- popper always in top HOT 2
- [Question] How can I stop clicking the target again from closing the popper HOT 1
- Interface props isn't exported. HOT 2
- Default styling is very broken HOT 8
- Can't put several children
- Prevent form submit when popper used inside the form HOT 1
- Clicking the target shouldn't close the popper if in hover mode
- Feature request - Popper strategy parameter HOT 2
- preventOverflow missing HOT 2
- Landing page / Docs: "Guide" hyperlink goes to page with 404 message
- Offset overlap prevents from showing the tooltip on hover HOT 1
- [Question] Align dropdown to the right of trigger element
- When ı switched pages to quickly popper wasn't disconnect HOT 3
- Popper doesn't close when tapping outside of popper on iOS
- Provide access to update method HOT 1
- Repeated id when using several poppers in the same page - accessibility enhancement
- Issue with disableClickAway.
- [Feature request]: Window offset
- Emit on direction changing
- [Question] Always one on the screen
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue3-popper.