Popover arrow is not positioned correctly when given 2 positionals about reactstrap

[TheSharpieOne]

Just adding this link with a demo of all of the different placements mentioned in the docs: http://codepen.io/TheSharpieOne/full/KgKxXy/

Note: the reactstrap popover docs show the PropTypes for Popover and the placement proptype specifically allows for all of the combinations.

[eddywashere]

A couple of comments, but most importantly, I’m excited you are also interested in advanced positioning of popovers! Bootstrap css currently supports 4 directions: top, left, right, bottom. However, this is not exactly enforced by reactstrap.

I originally set out to add the css for stuff like this to a separate project, similar to mgcrea/bootstrap-additions but I have not had time. It would be great if bootstrap added it. Their js seems to also support it.

I first came across this in ngstrap. Definitely part of the inspiration for reactstrap and some of it's opinions.

This module supports exotic placement options!
You can position your popover in corners (such as bottom-left) or any other combination two.
Exotic placement options are not part of the Bootstrap's core, to use them you must use bootstrap-additions.css from the BootstrapAdditions project. This project being not yet fully released, meanwhile, you can use the development snapshot compiled for theses docs.

I’ll keep this issue open until there is a decent solution we can recommend. Thanks!

Also, for codepen demo purposes, I’ve been using unpkg.com (previously npmcdn.com). You could use this - https://unpkg.com/[email protected]/dist/css/bootstrap.min.css

[eddywashere]

That's a bummer. Don't feel too strict on this, and am definitely for improving ux. I'd +1 a change to a generic string and updating docs to show // ex: 'top', 'right', 'bottom', 'left'.

[zeroasterisk]

Just checking back in on this one --- any ideas?

I can "fix" this in the inspector by:

1. remove the class name bs-tether-element-attached-left from the parent
2. put `left: 10%' into the arrow element styles

The arrow looks funky because both the -left and the -bottom are affecting :after to make the arrow.

The positioning is funky for approx the same reason.

I think this is a CSS fix for the combos of side+top (corner) positions.

[TheSharpieOne]

Yes, I think CSS is needed to fix this. The problem/issue is: Should this project introduce CSS?
Currently, it's 100% components, 0% styles. All of the styles come from bootstrap (and potentially, the user of the project's own/custom styles).
Bootstrap doesn't support the additional combinations and fixing it would be pretty easy, but is it outside of the scope of this project?

[LiJinyao]

Maybe we should remove the extra position?

[eddywashere]

This project itself should not introduce the css. The extra positions that are included, which are not supported in bootstrap css, are there as a convenience. I'm going to close this as it's not really actionable for this project. I still personally plan to tackle this in my free time. I'm not a fan of the default positions : ] and haven't had to introduce it just yet. When I do, @zeroasterisk will be the first person I ping. Last time I looked, I think tether has different classes, and one would need to port these over to the tether classes attached to popover/tooltip.

[Geczy]

Have this issue as well, shoudn't this be open?

I came from #258

[TheSharpieOne]

It was closed because the extra positions are not supported by bootstrap. You can add custom CSS to handle the extra positions.

[gthomas-appfolio]

I think this is confusing because the code and documentation lists the unsupported 'extra' positions as options: https://reactstrap.github.io/components/popovers/
and this has tripped up some people who think this then should 'just work'.

If we want to leave this flexible for addons, etc. can we just list the placement: PropTypes.string ?

[gthomas-appfolio]

Thanks @eddywashere , I can make a PR

[turnerhayes]

So to make sure I understand; the PR for this won't be supporting the multiply positions, just clarifying that they're not supported in the docs, right?

[gthomas-appfolio]

@turnerhayes Yes, that was my intent

[TheSharpieOne]

I'm closing this since the the issue is no longer active and it appears it was answered above. Please comment and it will be opened if you feel the issue has not been resolved / the question has not been answered.