Comments (4)
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
from react-floater.
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
from react-floater.
@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>
from react-floater.
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!
from react-floater.
Related Issues (20)
- Can't resolve 'react/jsx-runtime' after updating to 0.9.0 version HOT 8
- not positioning correctly if conditionally changes value of target HOT 5
- If the Floater is on the left, the arrow will cover content HOT 1
- Can we upgrade to use popperjs/[email protected] which has 40% less bundle size than popper 1.16.1 HOT 3
- eventDelay on mobile HOT 1
- Floater will not close when hover control is clicked (iPad, iOS 13, Safari) HOT 1
- Placement Center with Spotlight HOT 2
- `global` is undefined HOT 4
- Joyride automatically starts when using center HOT 1
- Tree-changes/nested-property may cause prototype-pollution HOT 1
- nested-property is out of date and contains a bug HOT 11
- Upgrade of peerdependencies to include react 17.0.0 HOT 2
- Vite fails to build/run because of "global is not defined" HOT 9
- tree-change / fast-deep-equal causes Maximum Call Stack Size Exceeded in jest HOT 2
- Setting z-index and background color causes the floater to appear behind it - v0.8.0 HOT 1
- Tooltip with hover on react components doesn't work (v0.8.0) HOT 1
- OffsetY and OffsetX
- Broken functioning of conditionally rendered tooltips HOT 2
- portalElement not working HOT 1
- Demo Sandbox Broken HOT 1
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 react-floater.