Responsive offset prop
See original GitHub issueI need to make the offset
prop responsive in any way. I want the stickiness behaviour to be based on the height of 2 elements (header and subheader).
At the moment I’m trying to find a fixed value for the offset that works well across our supported devices.
The other quick solution, I have in mind is to have 2 separate sticky elements (one for desktop and one for tablet). I would really like to avoid doing this.
Thanks again for this awesome package. There are so few packages that deliver this in a small and convenient way. 👍
Issue Analytics
- State:
- Created 5 years ago
- Comments:5
Top Results From Across the Web
offset - CSS: Cascading Style Sheets - MDN Web Docs
The offset CSS shorthand property sets all the properties required for animating an element along a defined path.
Read more >How to add offset material-ui Grid - reactjs
the best way I found this solution is as follows. <Grid container> {/* offset grid with column you want to offset */} <Grid...
Read more >Grid
Set offset prop on Grid.Col component to create gaps in grid. offset adds left margin to target column and has the same units...
Read more >React Bootstrap — Grid Layout, Order, and Offset - Dev Genius
We can size columns and move with various props and values. They can be ordered and spaced out according to offsets. Programming.
Read more >Layout and Grid System | Components
You can offset grid columns in two ways: our responsive offset-* props or the margin utility classes. Grid offset-* props are sized to...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Two approaches I could offer:
<div style={{marginTop: '5vh'}}><StickyBox/></div>
No worries! And yes, so far this library concerned with just doing one thing reasonably well. Offering too many features would at some point probably be a bit too much to maintain 😃