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.
Related
I'm currently working on a personal portfolio website where I will be inputting various work experiences, portfolio entries and the like.
In the description of these experiences I would like to have some freedom in the formatting. For example, I might want to add a list in the description. Or I'd like to be able to bold, or italicize different elements in the description.
I'm currently rendering each entry using the map function, and inserting HTML tags in the description just renders the tags in plaintext.
{myExperiences.map((experience) => (
<CardContent sx={{ flexGrow: 1 }}>
<Typography gutterBottom variant="h5" component="h2">
{experience.name}
</Typography>
<Typography gutterBottom component="h2">
{experience.title}
</Typography>
<Typography>
{experience.description} {/* Custom formatting for some entries here */}
</Typography>
<Typography sx={{ color: "gray" }}>
{experience.startDate} - {experience.endDate}
</Typography>
<Typography sx={{ color: "gray" }}>
{experience.location}
</Typography>
</CardContent>
))}
What would be a good way to add custom formatting for certain entries? Ideally the custom formatting shouldn't interfere too much with the rest of the code, however I'm not sure how I'd be able to implement it in a standardized way like this. The formatted descriptions should also be able to be placed in a database
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'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?
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>