gregthebusker/react-confirm-bootstrap

Style glitch when used inside a `ButtonGroup`

Closed this issue · 3 comments

When the component is used inside a ButtonGroup, the button will be positioned wrong. The additional span element causes the styles for .btn-group > .btn to not be applied.
screenshot

I'm not sure how best to fix this issue. I wrap the button in a span because I need to have both the Button and the Modal element on the page. You can pass your own children in, and use your own inline styling for them, but it's certainly not ideal. I wish there was a good line styles version of react bootstrap which could help fix this. Do you have any thoughts on how best to solve your use case?

I'm afraid not. I guess you have to get rid of the span somehow.
First I thought about returning an array from the render function, but I guess that's discouraged. You could also append the Modal element to the document body in componentDidMount and remove it in componentWillUnmount, but that doesn't feed very Reacty.

Just merged in a pull request #5 that should address this. Let me know if you have issues.