I am trying to readjust the positioning of an Overlay, containing a Popover, who's content changes dynamically. As it currently stands, the Popover content updates, but the position of the Popover doesn't change. This results in the updated Popover being in the wrong position (kinda floating there).
First state with content displaying correctly.
After content of Popover updates.
Here's my code:
<Form.Group>
<Form.Label>Listing URL</Form.Label>
<Form.Control name="url" ref={this.urlInput} value={this.state.current_listing.listing.url} onChange={this.handleURL} placeholder="Enter URL"/>
<Overlay target={this.urlInput.current} show={this.state.similar_listings.length > 0} placement="right">
<Popover style={{width: "700px", maxWidth: "700px"}} key={seedrandom(this.state.current_listing.url)}>
<Popover.Title as="h3">Similar Listings</Popover.Title>
<Popover.Content>
<ListingAccordion listings={this.state.similar_listings} callback={this.callback} mode="similar"/>
</Popover.Content>
</Popover>
</Overlay>
</Form.Group>
I've tried adding the shouldUpdatePosition prop to the Overlay as mentioned in previous questions, but it didn't fix anything. I also tried with the OverlayTrigger component, but that also had the same issue.
I ended up solving my own question. Hopefully this helps someone. I fixed the positioning issue by forcing React to re-render the Overlay component.
This answer gets all the credit.
All I did was add the random value key to the Overlay, and update the key whenever the contents change.
Overlay:
<Overlay key={this.state.overlayKey} ... > ... </Overlay>
In the function where the contents of the Overlay are being changed:
this.setState({ key: Math.random() });
Related
I am new to framer motion and I want to make a hover animation on the button. I was able to create the animation successfully but when I hover over the button the text gets distorted and I want to fix it, I have done research but i wasn't able to find a solution
I want to apply animation only to the button not the text inside it
I have tried adding <motion.button layout />
I have tried adding <motion.button layout="position" />
I have also added <span>button text</span>
but the issue is still there
<motion.button
style={{
padding: "10px 30px",
border: "none",
marginTop: "20px"
}}
whileHover={{
scale: 1.1
}}
whileTap={{
scale: 0.9
}}
>
Button
</motion.button>
It would be great if someone would help me in fixing this issue,
https://codesandbox.io/s/late-darkness-ejuzt?file=/src/App.js:134-419 is my code sandbox link where u can see what I'm saying
thanks!
According to this, you can't 'disable' scaling for child components with framer. Try to use react components and variables (or CSS) to disable child scaling.
I am currently trying to integrated a virtualized table in react using react–virtualized, however the table does not seem to render correctly and I am trying to understand as to why. I also have a few other problems that I cant find documentation on how to do as I have pointed out below.
It would be great if anyone has something or could help.
Below is the code I am using and my goal with this is to be able to:
1- Scroll with the page the table
2- Height of rows be automatic and widths
3- The numbers shown in the row need to be formatted some depending on condition and same for wealth depending on condition may show red or green using css.
Now I have been able to get scroll to partially work however at the top of the scroll it shows massive white space when I scroll down while the table is still in view.
<WindowScroller>
{({ height, isScrolling, onChildScroll, scrollTop }) => (
<Table
width={1000}
autoHeight
height={height}
headerHeight={30}
rowHeight={40}
scrollTop={scrollTop}
isScrolling={isScrolling}
onScroll={onChildScroll}
rowCount={this.setData.length}
rowGetter={({index}) => this.setData[index]}>
<Column label="Country" dataKey="country" />
<Column label="Flag" dataKey="flag" />
<Column label="Population" dataKey="population" />
<Column label="Wealth" dataKey="wealth" />
</Table>
)}
</WindowScroller>
Also just out of curiosity is there any library or way that you can just render content on scrolling eg infinite loading on scrolling down the screen that way it renders everything out of the screen as it comes in or as its about 200px from coming into view ?
You can use Material-UI tables for a customizable table, it's very easy and flexible.
If you prefer to use a specific table please share code.
How to make autosuggest suggestions be position above the dialog and not in the dialog? To avoid dialog content scrolling
Sandbox example https://codesandbox.io/embed/adoring-bogdan-pkou8
I don't know the libraries that you are using, but the outer dialog div element with class name MuiPaper-root MuiPaper-elevation24 MuiDialog-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-rounded needs an overflow: visible style.
And the MuiDialogContent-root div element needs overflow-y: unset.
For me this does the trick in the code sandbox.
To explain this behaviour: the dialog crops of everything that vertically overflows his boundaries and creates a scrollbar for that. Because the autosuggest component is DOM-wise inside the dialog component and positioned absolute it is cut off when getting bigger than the dialog. Telling the dialog to not crop it's content and not hide overflowing content by scrolling, lets the autosuggest component overflow correctly. But it also means you can't scroll inside the dialog anymore.
You should let the autosuggest component let its root element append to the body and position itself with the input field as pivot point. That way you don't have to manipulate the overflows, because the autosuggest is DOM-wise "above" the dialog component.
Add max-height to the Paper component that renders the suggestions.
renderSuggestionsContainer={options => (
<Paper style={{'maxHeight':100, overflow:'auto'}} {...options.containerProps} square>
{options.children}
</Paper>
)}
Im using Semantic UI-React. My question is how to position a label or text under an icon? There are only two default options which is left and right of the icon. However I want to position the label below the icon.
Im using Semantic-React library.
For example:
<Button icon labelPosition='left'>
<Icon name='pause' />
Pause
</Button>
In the above snippet the label 'Pause' is added on the left side of the icon in the button.
My requirement is, I want to add the label 'Pause below the icon in the button'. I tried setting the:
labelPosition='down' or 'bottom'
However it does not work. Is there any way to do this?
I came across the same problem.
I believe that this could be done only by overriding the CSS properties of the Button element.
Please try providing !important to the CSS values, since semantic UI takes the highest priority when it comes to priority of the properties.
You can either use a class and define the style there, or else use a specific selector like this: div.ui.stackable.two.column.grid.button{.
Please let me know if this fixes, otherwise I have another solution to it.
Put a line break between the icon and the text.
<Button icon>
<Icon name='pause' />
<br />
Pause
</Button>
To change the amount of space between the icon and the text, you can add margin to the line break.
<Button icon>
<Icon name='pause' />
<br style={{marginBottom: '8px'}} />
Pause
</Button>
I am looking to build a button/view that animates when a user taps and holds on it. This animation will just be a progressive change of color from white to a green color. I have found a tutorial that does exactly this:
http://browniefed.com/blog/react-native-press-and-hold-button-actions/
In the render function, the author uses:
<View style={styles.container} onLayout={this.onPageLayout}>
<TouchableWithoutFeedback
onPressIn={this.handlePressIn}
onPressOut={this.handlePressOut}
>
<View style={styles.button} onLayout={this.onPageLayout2}>
<Animated.View style={[styles.bgFill, this.getProgressStyles()]} />
<Text style={styles.text}>Press And Hold Me</Text>
</View>
</TouchableWithoutFeedback>
<View>
<Text>{this.state.textComplete}</Text>
</View>
</View>
Please note there are two onLayout mentions...one in the parent View and the other in the View about halfway down
The way this works is the onLayout call is supposed to get the size of the TouchableWithoutFeedback button so that I can set the animation to have the correct sizing. However, the second onLayout call just does not get called no matter what I try. The very top View's onLayout is being called so I know that my code is good (as this.onPageLayout and this.onPageLayout2 are exact copies except their console.logs vary slightly).
If I remove all the surrounding code and only have the inner View in this render function, then the onLayout={this.onPageLayout2} works like a charm, but as soon as I put the rest of the parent back in, it no longer works.
Does anybody know how I can get a child View to have their onLayout method work? Or another way or getting the size of the TouchableWithoutFeedback button for my purposes of animation?
Thanks!
You are using TouchableWithoutFeedback and so you don't get any feedback from it's child. Change it to other buttons for example: TouchableOpacity, Then you can have onLayout for both components.