I'm using the #artsy/fresnel npm package to build a responsive React application.
Here's my code
<Media greaterThanOrEqual='computer'>
<div style={{ padding: '20px 50px' }}>
Some Content Goes Here
</div>
</Media>
<Media lessThan='computer'>
<div style={{ padding: '50px 100px' }}>
Exact Same Content Goes Here
</div>
</Media>
I've searched through the documentation, but could not find a way to set the padding of my div depending on the Media tag rendered. I want to achieve something like this
<div style={{ padding: (MediaIsGreaterThanComputer ? '20px 50px' : '50px 100px') }}>
Some Content Goes Here
</div>
Is this doable with the #artsy/fresnel framework?
You can do this, but you’ll need to take control over the wrapper div that gets emitted by the Media component (see the note about “render-props”). So something like:
<Media greaterThanOrEqual='computer'>
{(mediaClassNames, renderChildren) => {
return (
<div style={{ padding: '20px 50px' }}>
{renderChildren ? "Some Content Goes Here" : null}
</div>
)
}}
</Media>
Related
I'm currenty creating cards with bootstrap 5. I was successfully able to get an image on top, and card body rendering right underneath it. Some of my card title's were longer than others, and I wanted all my card's body to be the same height. I added class 'text-truncate' and was able to truncate long strings of text with ellipsis. I wanted to add a horizontal scroll so that I can just scroll through the long strings rather than have ellipsis on it.
This is my current code for my cards
<div className="row p-5 m-2">
{userShows.map((userShow) => {
return (
<div className="col-sm " key={userShow.show.id}>
<div className="card" style={{ width: 17 + "rem" }}>
<img
src={userShow.show.images[1].url}
alt="podcastimg"
className="card-img-top"
/>
<div className="card-body ">
<h5
style={{ textAlign: "center" }}
className="card-title text-truncate overflow-scroll"
>
<Link
to={`/show/${userShow.show.id}`}
className="stretched-link"
>
<span style={{ fontWeight: "bold", color: "white" }}>
{userShow.show.name}
</span>
</Link>
</h5>
<span className="card-text">
<h6
style={{
textAlign: "center",
fontSize: "14px",
fontWeight: 400,
color: "white",
}}
>
{" "}
{userShow.show.publisher}
</h6>
</span>
</div>
</div>
</div>
);
})}
</div>
When I add both classes 'text-truncate' and 'overflow-scroll' this is how my cards look:
I'm able to scroll, but the full text isn't there.
When I delete class 'text-trucate', the horizontal scroll obviously does not work since the full card-text is being rendered:
I was unable to find any docs on how to make my card body (card-title and card-text) in one line where I can horizontally scroll instead of using class 'text-trucate'
Does anyone know how I can achieve this? Any tips will be greatly appreciated, thanks in advance!
Using react-particles-js
as a background on a React project, I discover that disables the anchor tag, don't know if its my implementation
const App = () => {
return (
<div className="App" style={{ position: "relative", overflow: "hidden" }}>
<div style={{ position: "absolute" }}>
<Particles height="330vh" width="100vw" params={particlesConfig} />
</div>
<Home /> {/*this is the content */}
</div>
);
};
What it happens its that in this component with link like this
<a
href="https://tienda-de-garage.herokuapp.com/"
style={{ textDecoration: "none", color: "black" }}
>
<p>Tienda de Garage</p>
</a>
Don't work.
I wonder if its the implementation, maybe the use of the view port the increase the size of the area to encompass the background but i'm not sure.
here its a live version, with the 1 link not working to show the issue
You need to set interactivity.detectsOn to window (InteractivityDetect.window or "window")
You can see a working sample here
This sample uses react-tsparticles but it's the same as react-particles-js since they share the same core library tsparticles
I've connected to a websocket and pull real-time data from the server once the page is loaded. However, I want it to load from the bottom-up and not from the top-down of the div. I'm hoping I can keep it scrolled to the bottom of the div unless the user scrolls up in this case.
Here's what I'm currently working with
(I'm planning to also pull more data from their REST API and preload the div with 100-50 messages prior so the user doesn't see nothing upon the initial page load. Though, I'm sure that'll be another question 😂)
I've tried using
display: 'flex', flexDirection: 'column-reverse'
but that alone doesn't seem to be the solution in this case. overflow? I'm not sure
Here is the parent .js file that the component is within:
<Layout style={{ minHeight: '100vh' }}>
<div style={{width: '100%', height: '100%'}}>
<Header id="header">
</Header>
<Content style={{ padding: '24px 50px 0px 50px' }}>
<div style={{ borderRadius: '6px', border: '1px solid rgb(235, 237, 240)', background: '#fff'}}>
<Tbox/>
</div>
</Content>
<Footer/>
</div>
</Layout>
And then here is the component itself:
render() {
const chatBox =
<List
dataSource={this.state.data}
renderItem={item => (
<List.Item >
<List.Item.Meta
avatar={<Avatar size="large" icon="user" />}
title={<div>{item.user} {item.date}</div>}
description={item.message}
/>
</List.Item>
)}
/>;
return (
<div>
<div style={{ height: 400 }}>
<Scrollbars style={{ height: 400 }}>
<section style={{display: 'flex !important', flexDirection: 'columnReverse !important' }}>
<div>
{chatBox}
</div>
</section>
</Scrollbars>
</div>
<div style={{ width: '100%', padding: 0 }}>
...
</div>
</div>
);
}
As mentioned before by Daan, if you can post the result page, it would help since after that the CSS rule can be applied to the result list. Take look at this
how-to-display-a-reverse-ordered-list-in-html
Hope this could help
I'm trying to use a link on a component React which looks like that :
To obtain this result, I have this code :
return (
<>
<div style={{padding: '1em' }}>
<span style={{ color: 'grey' }}>#{Command_ID} - </span>
<span style={{ color: 'purple'}}>{Delivery_Slot}</span><br/>
<strong>{firstname} {lastName}</strong>
<p></p>
{adressPerso},{PostalCode},{city}
</div>
<div>
<IonFooter >
At the end of the code, you have an IonFooter This part of the code is'nt showing and inside, you will just have the part about the three components Phone, Map, and "Terminé".
In my case, I just want to allow a personn to click everywhere above the IonFooter part and That's the reason why i use a Link. Nonetheless, when i use one, there are some styling effects :
I just want to have the same component as before without new styling import by the Link style. concerning my code, I have this :
return (
<>
<Link to={`/`} className="item">
<div style={{padding: '1em' }}>
<span style={{ color: 'grey' }}>#{Command_ID} - </span>
<span style={{ color: 'purple'}}>{Delivery_Slot}</span><br/>
<strong>{firstname} {lastName}</strong>
<p></p>
{adressPerso},{PostalCode},{city}
</div>
</Link>
<div>
<IonFooter >
Thank you so much for your help, I'm just a beginner :)
Hello I try to make data view with prime react component in Dialog with dynamic photo size content. By default the photo popup with scroll bar and in the centre of screen.
How to make it with dynamic size and without scrollbar and on top of the screen.
I tried to use max/min height and weight but there is no result.
Found "Dynamic content may move the dialog boundaries outside of the viewport. Common solution is defining max-height via contentStyle so longer content displays a scrollbar." from https://www.primefaces.org/primereact/#/dialog
But how implement it.
<Dialog header="Client Details"
visible={this.state.visible}
modal={true}
onHide={() => this.setState({visible: false})}>
{this.renderClientDialogContent()}
</Dialog>
renderClientDialogContent() {
if (this.state.selectedClient) {
return (
<div className="p-grid" style={{fontSize: '16px', textAlign: 'center', padding: '20px', maxHeight:'800px', maxWidth:'700px', minWidth:'300px'}}>
<div className="p-col-36" style={{textAlign: 'center'}}>
<img src={this.state.selectedClient.bigPhotoLink}
alt={this.state.selectedClient.name} />
</div>
<div className="p-col-12">{this.state.selectedClient.name}</div>
<div className="p-col-12">{this.state.selectedClient.description}</div>
</div>
);
}
else {
return null;
}
}
How to make dialog size equal photo size.
Just pass the contentStyle object with the desired max-height, (the same way you do with the style attribute):
<Dialog
contentStyle={{ maxHeight: "300px" }}
header="Client Details"
visible={this.state.visible}
modal={true}
onHide={() => this.setState({visible: false})}
>
{this.renderClientDialogContent()}
</Dialog>