Stick a Material UI Input when scrolling - javascript

I want to make the Material UI Input stick at the top when scrolling, I have a modal an its content is the search input and the results.
I used overflow-y: scroll; in <div className="modal-content"> and used position: sticky; in <OutlinedInput className="SearchInput" /> but then the search and the results scroll together which I don't want it to, I want only the result to scroll.
Then I removed the overflow-y: scroll; from in <div className="modal-content"> and put it in <div className="card" key={post._id}> but then the results went outside the modal borders as in the Image down below
The Code:
return (
<>
<button onClick={toggleModal} className="btn-modal">
<SearchIcon />
</button>
{modal && (
<div className="modal">
<div onClick={toggleModal} className="overlay"></div>
<div className="modal-content">
<div className="searchBar">
<div style={{ padding: 20 }}>
<div font-size="20px" className="searchTry">Search</div>
<OutlinedInput
className="SearchInput"
placeholder='Search...'
onChange={(e) => searchItems(e.target.value)}
endAdornment={
<InputAdornment>
<SearchIcon />
</InputAdornment>
}
/>
<div style={{ marginTop: 20 }}>
{searchInput.length > 0 ? (
filteredResults.map((post) => {
return (
<div className="card" key={post._id}>
<div className="card-content">
<Link to={`/post/${post._id}`} className="link">
<h2 className="results-title">
{post.title}
</h2>
<ol className="card-username">
{post.username}
</ol>
</Link>
</div>
</div>
)
})
) : (
APIData.map((post) => {
return (
<div className="card" key={post._id}>
<div className="card-content">
<Link to={`/post/${post._id}`} className="link">
<h2 className="card-name">
{post.title}
</h2>
<ol className="card-username">
{post.username}
</ol>
</Link>
</div>
</div>
)
})
)}
</div>
</div>
</div>
<button className="close-modal" onClick={toggleModal}>
<CloseIcon />
</button>
</div>
</div>
)}
</>
);

Related

I am found 'subject' is of type 'unknown'. error during the npm start but code is run and working how to resolved it?

Object.entries(APIData).map(([key, subject], i) => {
return (
<div className="id-result" key={i}>
<div id="heading-result">
<h2 key={i} className="heder-result">{subject.title}</h2>
{/* <img id="pdficon" src={pdficon} alt="download pdf" height="20px" /> */}
<Button className="download-button"><PDFReader /></Button>
</div>
<hr className="hr-result" />
{/* <p className="para-result" key={i}>{subject.para}</p> */}
<p dangerouslySetInnerHTML={{ __html: subject.para }}>
</p>
</div>
)
I am facing error on subject that 'subject' is of type 'unknown'.

Using if else condition to show elements on RectJS

I have some menu items I want to show according to user roles. I have 2 user roles form the database (1 for admin and 0 for normal user). But my code always return the menu items for normal user even if its an admin who is logged in.
I am also storing user details in a useContext and calling them on every component
Kindly Help
My Code
import React, { Component } from "react";
import { Link } from "react-router-dom";
import "./Menubar.css";
import { UserContext } from "../../UserContext";
const Menubar = () => {
const user = React.useContext(UserContext);
console.warn(user.role)
return (
<div>
<div className="appBottomMenu">
{user.role === 1 ? (
<Link to="/admin/home" className="item" tabIndex="1">
<div className="col">
<i className="fi fi-rr-home"></i>
</div>
</Link>
) : (
<Link to="/" className="item" tabIndex="1">
<div className="col">
<i className="fi fi-rr-home"></i>
</div>
</Link>
)}
{user.role === 1 ? (
<Link className="item" to="/admin/farmers">
<div className="col">
<i className="fi fi-rr-users"></i>
</div>
</Link>
) : (
<Link to="/area" className="item" tabIndex="1">
<div className="col">
<i className="fi fi-rr-marker"></i>
</div>
</Link>
)}
<Link to="/community" className="item">
<div className="col">
<i className="fi fi-rr-browser"></i>
</div>
</Link>
{user.role === 1 ? (
<Link className="item" to="/admin/farms">
<div className="col">
<i className="fi fi-rr-users"></i>
</div>
</Link>
) : (
<Link to="/shop" className="item">
<div className="col">
<i className="fi fi-rr-shopping-cart"></i>
</div>
</Link>
)}
<Link to="/profile" className="item">
<div className="col">
<i className="fi fi-rr-user"></i>
</div>
</Link>
</div>
</div>
);}
export default Menubar;
One potential way to force an update on the page on context updates is to utilize the useEffect and useState hooks in conjunction with your useContext. Here is an example, I hope this helps.
For example:
import React, { Component, useEffect, useContext, useState } from "react";
import { Link } from "react-router-dom";
import "./Menubar.css";
import { UserContext } from "../../UserContext";
const Menubar = () => {
const { user } = useContext(UserContext);
const [menuContext, setMenuContext] = useState(user);
const handleSetMenuContext = (updatedMenuContext) => {
setMenuContext(updatedMenuContext);
};
useEffect(() => {
handleSetMenuContext(user);
}, [user]);
return menuContext?.role && (
<div>
<div className="appBottomMenu">
{menuContext.role === 1 ? (
<Link to="/admin/home" className="item" tabIndex="1">
<div className="col">
<i className="fi fi-rr-home"></i>
</div>
</Link>
) : (
<Link to="/" className="item" tabIndex="1">
<div className="col">
<i className="fi fi-rr-home"></i>
</div>
</Link>
)}
{menuContext.role === 1 ? (
<Link className="item" to="/admin/farmers">
<div className="col">
<i className="fi fi-rr-users"></i>
</div>
</Link>
) : (
<Link to="/area" className="item" tabIndex="1">
<div className="col">
<i className="fi fi-rr-marker"></i>
</div>
</Link>
)}
<Link to="/community" className="item">
<div className="col">
<i className="fi fi-rr-browser"></i>
</div>
</Link>
{menuContext.role === 1 ? (
<Link className="item" to="/admin/farms">
<div className="col">
<i className="fi fi-rr-users"></i>
</div>
</Link>
) : (
<Link to="/shop" className="item">
<div className="col">
<i className="fi fi-rr-shopping-cart"></i>
</div>
</Link>
)}
<Link to="/profile" className="item">
<div className="col">
<i className="fi fi-rr-user"></i>
</div>
</Link>
</div>
</div>
);
}
export default Menubar;

Semantic Ui Sidebar is not pushing content when it opens

Pusher is not pushing the content when sidebar opens up, instead it overlaps the content. Using the CDN of semantic ui and it seems that content inside pusher is not pushed.
function toggleMenu() {
setToogle(!toggle);
}
return (
<div>
<Header onToggleMenu={toggleMenu} />
<div className="ui attached pushable" style={{ height: "100vh", width: "175px" }} >
<Sidebarleft toggleMenu={toggle} />
<div className={` ui pusher ${(toggle) ? 'dimmed ' : ''}`} >
<div>Application Main Content</div>
</div>
</div>
Sidebarleft.js
<div class={`ui sidebar overlay push left inverted vertical menu animating ${(classes.visible) ? 'visible ' : ' '} `} >
<div style={{ marginTop: "25px", color: "GrayText", marginLeft: "15px", fontSize: "14px" }} >
MAIN
</div>
<div style={{ marginTop: "35px" }} >
<Link href="/SupplierOnboarding" className="item">
{/* <i class="home icon" style={{marginRight:"33px"}}></i> */}
<span>
{/* <i className="home icon"></i> */}
<i className="user icon" style={{marginLeft:"-5px",color:"white"}}></i>
</span>
<span style={{ marginLeft: "10px",color:"white" }}>Supplier Onboarding</span>
</Link>
</div>
</div>
Header.js
<div class="ui large vertically attached inverted menu">
<span className="item link grey" onClick={props.onToggleMenu}>
<i class="large bars icon "></i>
</span>
{/* <a class="item">
Services
</a>
<a class="item">
People
</a> */}
</div>

How to use a vertical line in a react project which adjust the height dynamiclly?

I need to add a vertical line in my react project.I have used scss to create this. But I have given a fixed size there. What I need to do is adjust the height of the line when card size varies. That when I add new comments the card size get increases.But the line height remains same.How can I get the current card size?
This is how it looks like.
<Col sm={1}>
<div className="vl"></div>
</Col>
styles.scss
.vl {
border-left: 1px solid $disabled-icons-light-blue;
height: 800px;
padding-right: 0px;
}
Given below is the file where I have used the line.
<div>
<div className="icon-list">
<TicketAction icon={<ChevronLeft />} tooltip="Back" />
<TicketAction icon={<ArrowClockwise />} tooltip="Refresh" />
<TicketAction icon={<Archive />} tooltip="Archive" />
<TicketAction icon={<Share />} tooltip="E-mail" />
<TicketAction icon={<Pencil />} tooltip="Edit" />
</div>
<div>
<Card className="card">
<Row>
<Col sm={9}>
<Card.Body>
<div className="header-date text p2">
<p2>2 DAYS AGO ON TUESDAY AT 5.43 AM</p2>
</div>
<Row>
<Col sm={3} className="title">
<h2>{title}</h2>
</Col>
<Col sm={7} className="drop-down">
<PriorityBadge priority="Error" />
</Col>
<Col sm={1} style={{paddingLeft: 20}}>
<Pencil />
Edit
</Col>
</Row>
<div className="ticket-data-topic text p3">
<p3>Hello,</p3>
<div className="ticket-data-content text p4">
<p4
dangerouslySetInnerHTML={{
__html: description
}}
></p4>
</div>
<hr />
<br />
<Tabs>
<Tab eventKey={1} title="Comments">
<br />
<br />
{this.displayComments()}
<br />
<h3 className="add-comment-heading">Add Comment</h3>
<AddComment ticketID={this.state.id} />
</Tab>
<Tab
eventKey={2}
title="History"
className="nav-item nav-link active"
>
History
</Tab>
</Tabs>
</div>
</Card.Body>
</Col>
<Col sm={1}>
<div className="vl"></div>
</Col>
<Col sm={2} className="ticket-data-item-col">
<Card.Body>
<div className=" ticket-item-title text p4">
<p>Created by</p>
</div>
<h4>John Doe (john#gmail.com)</h4>
<p className="ticket-data-item">{date}</p>
<div className=" ticket-item-title text p4">
<p>Ticket ID</p>
</div>
<h4 className="ticket-data-item">{id}</h4>
<div className=" ticket-item-title text p4">
<p>Employer</p>
</div>
<h4 className="ticket-data-item">{employer}</h4>
<div className=" ticket-item-title text p4">
<p>Assigned to</p>
</div>
<h4 className="ticket-data-item">{assignee}</h4>
<div className=" ticket-item-title text p4">
<p>Status</p>
</div>
<h4 className="ticket-data-item">{status}</h4>
<div className=" ticket-item-title text p4">
<p>Priority</p>
</div>
<div className=" ticket-data-item-badge text p4">
<PriorityBadge priority={priority} />
</div>
<div className=" ticket-item-title text p4">
<p>Last Updated</p>
</div>
<h4>John Doe</h4>
<p>03/05/2020</p>
</Card.Body>
</Col>
</Row>
</Card>
</div>
</div>
Don't set any height:
Use flex or grid to set the layout and don't set
align-items: 'center'
Then you will be fine the box will grow as your content grow.
For the vertical line use a border-left or border-right, so that the vertical border will take the height of the Content

Preventing duplicate objects being added to firebase back end

I have a question regarding preventing duplicates from being added to
cart while using firebase as back-end.
It should be straight forward but for some reason, nothing I try is working.
const { products } = this.props;
return (
<div>
{products === undefined ? (
<p>Loading......</p>
) : (
products.map(val => {
return (
<div key={val.id} className="row">
<div className="col-sm-6">
<div className="card-body">
<img src={val.url} className="img-fluid" alt="Responsive" />
<h5 className="card-title">{val.name}</h5>
<h6 className="card-subtitle mb-2 text-muted">
{val.price}
</h6>
<button
className=" "
style={{
float: "right",
marginBottom: "1px",
width: "100%"
}}
onClick={() => this.submit(val)}
>
<i className="fas fa-cart-plus" />
</button>
</div>
</div>
</div>
);
})
)}
</div>
);

Categories