Wrapped spans shrink width of children

[orar]

Expected behavior Responsive and flexibility. Maintain the rendering of children wrapped by floater. Expect to customize the wrapping spans around the children.

If probably could be a single span wrapped around and a classname as a prop to customize that span

Actual behavior It wraps the children with 2 spans which doesnt retain the rendering of the children. The child wrapper has its with set to 100%. A span is an inline element unlike div.

Steps to reproduce the problem Set children width to 100% wrapped with react-floater in a fixed width container (perhaps). Additional spans wrapped around children will shrink its width.

React version 16

React-Tooltips version 0.5.5

Error stack

[orar]

Instance:

.buttonContainer {
 width: 200px; //doesnt matter
}
.blockButton {
  width: 100%; //will not work
  border-radius: 5px;
}

const Button = ({ innerRef, ...rest })  => {
  return <button ref={innerRef} className="blockButton" >Block Button</button>
}

<div className="buttonContainer" >
  <Floater
    content={something}
    title={someTitle}
  >
    <Button />
  </Floater>
</div>

Will not work because there are additional span wrapped around button suppressing .blockButton effect

[gilbarbara]

Yeah, this won't work since the floater is rendered outside your app in a React Portal...

You can pass your own component to the Floater and set the styles for the button. Check the WithStyledComponents in the demo

[gilbarbara]

@orar Sorry, I understood your problem after my previous comment. You can set the Floater styles prop to change the wrapper options.

<div className="buttonContainer" >
  <Floater
    content={something}
    title={someTitle}
    styles={{
      wrapper: {
        display: 'flex', // or display: 'block' or width: '100%'
      }
    }}
  >
    <Button />
  </Floater>
</div>

[zenVentzi]

I second that. The expected behaviour should be to maintain the styles of the parent. I noticed the 2 spans that wrap the actual component that create the issue.

I tried the wrapper: {} style solution but it didn't work. I'm sure if I hang around more I'll eventually figure out the mini mistake I've made but I'd say that this solution is quite unintuitive. Also I have way more props to be copy-pasted from the parent components into the wrapper: {} style and this creates room for mistakes from copy-pasting.

Appreciate your work though!