Blueprint: Components wrapped in <Popover> do not respect width: 100%

Created on 12 Sep 2018  路  2Comments  路  Source: palantir/blueprint

Environment

  • __Package version(s)__: "@blueprintjs/core": "^3.2.0"
  • __Browser and OS versions__: Chrome or JXBrowser

Steps to reproduce

  1. Create a container div with width 100% and a child div with width: 100%
  2. See the child fill the container properly
  3. Wrap the child in a <Popover> (as the click target, not the popover content)
  4. See the child no longer fill the horizontal space.

Actual behavior

See above

Expected behavior

The child continues to fill the parent width even when wrapped in a as the target

Possible solution

Fix the popover spans to prevent this. In my code I'm using

    span.bp3-popover-wrapper, span.bp3-popover-target {
        width: 100%;
    }

in a bunch of places to fix :(

documentation core question

Most helpful comment

@mitchbeard I think switching to div instead of span for your target element will fix this, try targetTagName="div" on the popover

All 2 comments

@mitchbeard I think switching to div instead of span for your target element will fix this, try targetTagName="div" on the popover

i just ran into this issue as well - perhaps worth noting in the docs?

Was this page helpful?
0 / 5 - 0 ratings