I'm trying to import an external tag on my page so that it'll be visible in the dropdown area. But this external view is taking a full page. When I inspect this in console, I'm finding it above all divs but I'm placing it in the dropdown menu.
<Popover content={RequestFeatureModal} placement={'bottom'}>
Request a feature
</Popover>
const RequestFeatureModal = (
<Menu style={{ width: '100px' }}>
<UpvotyWidget
id="upvoty-display"
style={{ maxHeight: '100px', maxWidth: '100px' }}
baseUrl={'sample.upvoty.com/b/feature-requests'}
boardHash={this.state.ssoToken}
/>
</Menu>
);
Am I doing something wrong? What is the way to import external sources in our project at specific position?
Related
I am currently facing some problem about sidebar navigation. Every time I click the menu below the scrollbar went go to top again. I want it to steady like when I click the bottom menu it will stays its current view. Kindly check file below. Hope you can help me. or suggest another ways to redirect pages from sidebar Thanks.
{nav.nav &&
nav.nav.map((sub, subIndex) => (
<ListItem
key={subIndex}
button
component={NavLink}
to={sub.link}
end={true}
>
<ListItemIcon sx={{ minWidth: "40px" }}>
{sub.icon}
</ListItemIcon>
<ListItemText
primary={sub.name}
primaryTypographyProps={{
variant: "body2",
}}
/>
</ListItem>
))}
video gif
Having an issue displaying images. Looking at the documentation and I don't know what I am missing.
I can't get the image component to show.
This is all from WhatsNew.js, I am calling an IG logo
import { ReactComponent as Instagram2 } from '../images/instagram2.svg'
Below I am also calling for a media file that is in the same folder but I get a non working image.
<CardMedia
image='../images/blog-post-01.png'
style={{height: 140}} />
<CardContent>
Here is my live link and this is the repo GitHub
I think what you are doing now is right. Your image address/url is wrong. I tried this with a url of an image on the internet and it works.
<Card>
<CardMedia
image="https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixlib=rb-1.2.1&w=1000&q=80"
style={{ height: 140 }}
/>
</Card>
Try this in the URL. It might work.
image="/static/images/blog-post-01.png"
OR import the image
import blog from '../images/blog-post-01.png';
<CardMedia
image={blog}
style={{ height: 140 }}
/>
the image to show must be given as object like this :
<CardMedia
image={Instagram2 }
style={{height: 140}} />
<CardContent>
I am having a requirement where I need to create overlay with disabled background using React-Native's ActivityIndicator, the functionality is working fine but I am finding it hard to create overlay that too at the centre of the screen because of my code structure
Code
<ScrollView alwaysBounceHorizontal={false} horizontal={false} contentContainerStyle={{ flexGrow: 1 }}>
<View>
<Test1 listData={testData1} />
<Spacing />
<Test2 listData={testData2} />
</View >}
</ScrollView>
Test1 and Test2 are two independent list components
I have the following piece of React code on my website that shows the search results div only if the search results exist. The backend limits search results to only 20 items at a time, and each item is a dictionary with only three key-value pairs.
This works perfectly on all desktop browsers and also Firefox on Android. But on Android Chrome the search results never show. I've tried changing the display to always block, letting the height and width be undefined, and tons of different formatting changes.
Is there something related to div height or data displayed for mobile Chrome? Has anyone encountered this?
<div
style={{
height: 150,
width: "100%",
overflowY: "scroll",
display: this.props.hasSearchResults ? "" : "None"
}}
>
{/* switch to a div */}
{/* <List> */}
{this.props.search_results.map((result, idx) => (
<div>
<IconButton
size="small"
edge="end"
onClick={event => {
this.handleMenuAdd(event, result);
}}
style={{height: "100%"}}
>
<AddIcon
style={{margin: "auto"}}
fontSize="small"
/>
</IconButton>
<Typography
style={{verticalAlign: "bottom"}}
noWrap={true}
// display="block"
variant="caption"
>
{result.name}
</Typography>
<Typography
variant="caption"
style={{marginLeft: 10}}
noWrap={true}
>
{result.item_type}
</Typography>
</div>
))}
</div>
Thank you all for your attention and input. The problem was serverside. It simply wasn't lowercasing the search query. In Chrome the input was being automatically capitalized and in Firefox it wasn't. Feeling silly but will leave this here in case someone else needs to see it.
I'm very new to Material UI and React. I've got a very odd UI issue and I'm hoping someone here can point out what I did wrong.
What I am doing:
I have a List. For each list items, I want some button to point to different URLs. Here's the code of my list. This is somewhat pseudo code. Each "list item" is generated using map that goes over a data saved in JSON format:
<List>
<ListItem button component="a" href={infoUrl}>
<ListItemAvatar>
<Avatar src={itemIcon} />
</ListItemAvatar>
<ListItemText
primary={this.props.project.name_with_namespace}
secondary={this.props.project.description}
/>
<ListItemSecondaryAction>
<Tooltip id="button-report" title="Report">
<IconButton area-label="Report" href={reportUrl}>
<AssessmentIcon />
</IconButton>
</Tooltip>
<Tooltip id="button-codeRepo" title="Code Repository">
<IconButton area-label="Code Repository" href={repoUrl}>
<CodeIcon />
</IconButton>
</Tooltip>
</ListItemSecondaryAction>
</ListItem>
</List>
Problem:
The list is showing up with all the list items. Primary and Secondary texts as well as the avatars for each list item is also showing up properly, including the 2 "IconButton".
The problem is the tooltip that was added to the IconButton under the ListItemSecondaryAction. For the very first list item, everything is good. For all the other list items, I have to move my mouse pointer to the bottom edge of the icon buttons in order to be able to Click and also see the tooltip.
If I remove the tooltips completely, I don't have any issue with the clicks. I can move the mouse pointer to the middle or other areas within the circular ring of the icon buttons and perform a click.
Am I not using the Tooltip properly here? Tried both Chrome and FireFox and seeing the same issue.
Just add parent div and try to apply tooltip on that; it worked for me:
<Tooltip title="delete" placement="start-top">
<div>
<AiOutlineDelete style={{ fontSize: '30px', alignSelf: 'center' }}/>
</div>
</Tooltip>
Put the Tooltip around the Icon, not the Button:
<IconButton area-label="Report" href={reportUrl}>
<Tooltip id="button-report" title="Report">
<AssessmentIcon />
</Tooltip>
</IconButton>