How can I add space between the title and icon?
<div className="new-data_title">
{title},<icon icon={icon}/>
</div>
</Button>```
Simplest way is to use
or  
{title} <icon icon={icon}/>
check this link for more details:
[https://blog.hubspot.com/website/html-space][1]
Related
I need to do animation where my grid items will shrink and expand on scroll like this https://k72.ca/en/work, I have no progress for now can anyone give me a hint or help me to find package for it or tell me how should it be done?
my list looks like this:
{projects?.map((projectData) => {
const project = tData(projectData)
const slug = toKebabCase(
`${projectData.en?.client}-${projectData.en?.project}`
)
return (
<div
key={projectData.id}
className="projects-grid-item"
style={{
backgroundImage: `url(${project?.mainImage})`,
}}
>
<div className="project-content-wrapper">
<div className="nox-h-4">
<Link href={`${PROJECTS_ROUTE}/${slug}`}>
<a>
{project?.client} - {project?.project}
</a>
</Link>
</div>
<div className="additional-info-wrapper nox-body-1">
<div className="services">
{project?.services}
</div>
<div>{project?.year}</div>
</div>
</div>
</div>
)}
A good first step would be looking into the Intersection Observer API. It provides a way to track elements captured in the current viewport.
A second step might be to use an observer instance to change classes of elements in order to trigger the transitions that you're looking to implement.
in the Code below I am trying to use Link. The problem is, the first Link element does work, while the second Link element inside the map does not work. It does nothing when clicking on it. I searched a lot on different websites but could not find a reason why that is the case. Can anyone explain to me why this is the case and if there is a solution to my problem?
return (
<div>
<p><Link to='/test'>Testlink</Link></p>
<div className={style.searchBarContainer}>
<input className={style.searchBar} type="text" placeholder={placeholder}
onChange={handleChange} onFocus={handleFocusIn}
onBlur={handleFocusOut}/>
<div className={style.searchIcon}><i className="search icon"></i></div>
</div>
<div className={style.dataWindow}>
{searchInput.map((value, key) =>{
return(
<div className={style.dataItem} key={value.id}>
<p><Link to='/test'>{value.last_name}, {value.first_name}</Link></p>
</div>
);
})}
</div>
</div>
)
Thanks in advance
Alexej
You should use Link element on top lavel at least to provide a much wider hit area to click:
return (
<div>
<p><Link to='/test'>Testlink</Link></p>
<div className={style.searchBarContainer}>
<input className={style.searchBar} type="text" placeholder={placeholder}
onChange={handleChange} onFocus={handleFocusIn}
onBlur={handleFocusOut}/>
<div className={style.searchIcon}><i className="search icon"></i></div>
</div>
<div className={style.dataWindow}>
{searchInput.map((value, key) =>{
return(
<Link to='/test' key={value.id}>
<div className={style.dataItem}>
<p>{value.last_name}, {value.first_name}</p>
</div>
</Link>
);
})}
</div>
</div>
)
Your code is working here in my CodeSandbox. The problem must be somewhere else.
I found my mistake: The handleFocusOut function, that is executed onBlur, was used to hide the window in which there is the link I wanted to select. The onBlur was executed before the Link element, hid the window and therefore nothing happend after clicking on the link. I am now pausing the handleFocusOut function for 100ms so that the link gets executed first and now it works. I know this is not the best solution but it is the only one that worked unitl now. I will search for a better one. Thanks everyone for helping me :)
I have a Hero component in react.js :
if(item.fields!=undefined)
{
var img1=item.fields.images[0].fields.file.url
return (
<Hero hero="roomshero" style={{backgroundImage:`${img1}`}}>
<Banner className="banner" title={`${item.fields.name}`} subtitle="none">
<Link to="/rooms" className="btn-primary">Back to Rooms</Link>
</Banner>
</Hero>
)}
I am getting matching the item clicked by the user and after searching it my data.js file, setting the appropriate item. Each item has a unique image and hence has to be rendered dynamically.
But this is not working in my case.
You have to add url infront of your given img1 url .
Example :
if(item.fields!=undefined)
{
var img1=item.fields.images[0].fields.file.url
return (
<Hero hero="roomshero" style={{backgroundImage:`url(${img1})`}}>
<Banner className="banner" title={`${item.fields.name}`} subtitle="none">
<Link to="/rooms" className="btn-primary">Back to Rooms</Link>
</Banner>
</Hero>
)}
Also don't forget to set the width and height properties to banner tag to view the image.
You have to use the url() CSS function there.
<Hero hero="roomshero" style={{backgroundImage:`url(${img1})`}}>
...
</Hero>
Hope this would be helpful.
I have been struggling with adding a link with the text 'here' to flow inline with the entire paragraph.
Essentially what I would like to do is
'Gibberish here detailing the required steps.'
How can I accomplish this so as to have everything in a single line? I have tried doing this but it gives me the results attached in the screenshot.
<Flex direction="column" gap="s">
GIBBERISHH{" "}
<Anchor
href=""
trackingId=""
label="Read the Walkthrough"
/>
detailing the required steps.
</Flex>
Edit: Also tried changing the Flex direction to a row but I get this result which is not what I need either. Any suggestions would be great!
Why not a "p" tag if it's a paragraph:
<p>
GIBBERISHH{" "}
<Anchor
href=""
trackingId=""
label="Read the Walkthrough"
/>
detailing the required steps.
</p>
I'm trying to use the material-ui tooltip. I want the tooltip to be displayed at the top.
Even after setting placement="top"
The demo can be found here
What am I doing wrong in here?
Because page has not enough space to show tooltip on top position
Just add simple padding then try it again.
<div style={{padding: '50px'}}>
<Tooltip placement="top" title="Chart Type">
<IconButton >
<ShowChart />
</IconButton>
</Tooltip>
</div>
If you use a form wrapper, the outlined variant contains a "pointer-event: none" property that would prevent the popover from getting any events.