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
Related
The flow is after uploading Pdf I need to render/view the uploaded pdf in next screen. So, to render the pdf I am using "React-Pdf" library. So, I have converted the uploaded pdf to base64 format and gave as a parameter/value to : ->
<Document
file={base64Code}
onLoadSuccess={(data) => setTotalPages(data.numPages)}
onSourceError={(err) => console.log(err)}
onLoadError={() => console.log("ERR")}
loading="Please wait while we load the document..."
>
<div
style={{
display: "flex",
justifyContent: "center",
overflow: "hidden",
overflowY: "scroll",
height: 550,
}}
>
<Page
pageNumber={pageNum}
width={900}
scale={0.8}
className="page"
onLoadSuccess={(data) => {
setPageDetails(data);
}}
/>
{/* Pagination */}
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
// border: "1px solid red",
marginLeft: "100px",
}}
>
<div
style={{
position: "fixed",
}}
>
<Button
onClick={() => setPageNum(pageNum - 1)}
disabled={pageNum === 1}
>
-
</Button>
<div>
Page: {pageNum}/{totalPages}
</div>
<Button
onClick={() => setPageNum(pageNum + 1)}
disabled={pageNum > totalPages - 1}
>
+
</Button>
</div>
</div>
</div>
</Document>
`
I have written only Important code here.
The final output is ->
.
In the bottom the text is being displaying that should not happen.
And uploaded pdf type is ->
.
How can i remove the extra text at the bottom?
used a <div> and mentioned overflow css but it didn't resolve. Can any one help in resolving this problem.
Thank you.
I'm trying to create a FAQ, I have the data coming from an API but I'm having problems on how to show it on screen, here is my data
0:
answer: "The wellbeing score is Empatho's way of showing an end-user what their current state of wellbeing is. "
application: "Admin Portal"
question: "What is the wellbeing score?"
section: "Wellbeing Dashboard"
[[Prototype]]: Object
1:
answer: "The wellbeing score is calculated using an individuals Heart Rate Variability (HRV), their passive data, as well as some survey questions that help Empatho get to know a person better. "
application: "Admin Portal"
question: "How is the wellbeing score calculated?"
section: "Wellbeing Dashboard"
[[Prototype]]: Object
the React.js code I want to insert the data is:
<Accordion expanded={expanded === 'panel1'}
onChange={handleChange('panel1')}
sx={{ width: '100%', padding: '30px' }}
style={{ borderRadius: 20, margin:'10px 0px' }} >
<AccordionSummary expandIcon={<ExpandMoreIcon />}
aria-controls="panel1bh-content"
id="panel1bh-header"
sx={{ borderRadius:10 }} >
<div style={{ display:'flex', flexDirection:'row', alignItems:'center' }}>
<div>
<img src={wellbeingfaq} style={{ width:'auto', height:20, marginRight:25 }}/>
</div>
<div style={{ fontSize:'1.5em', fontWeight:'bold' }}>Wellbeing Dashboard</div>
</div>
</AccordionSummary>
<AccordionDetails sx={{ padding: '20px' }}>
<div style={{ fontSize:'1.3em', fontWeight:'bold' }}>
<div>Question</div>
</div>
<div style={{ fontSize:'1.0em'}}>
<div>Answer</div>
</div>
</AccordionDetails>
</Accordion>
I want to substitute the "Question" and "Answer"
how do I do that? I'm totally lost.
You need to run over every item and return the JSX code that you need.
This can be done with the .map function like this:
<AccordionDetails>
{ this.state.listFromApi.map((item,index) => (
<div key={index}>
<div>
<div>Question</div>
<div>{item.question}</div>
</div
<div style={{ fontSize:'1.0em'}}>
<div>Answer</div>
<div>{item.answer}</div>
</div>
</div>
))}
</AccordionDetails>
To avoid getting messy code I do recommend moving it into a function instead.
<AccordionDetails>
{this.renderQuestions()}
<AccordionDetails>
Im trying to bring this - icon closer to the text but i'm not exactly sure how.
When I go into developer mode it shows me this.
I don't know what the purplish stuff means. My end goal is to try to move the icon to the upper right corner of where the "Steve First" box is but I'm not sure how to do that. This is the code where i'm building my list.
<List style={{ display: "flex", flexDirection: "row", padding: 0 }}>
<ListItem
className={classes.removePerson}
secondaryAction={
<IconButton
sx={{
zIndex: "1",
width: "15px !important",
height: "15px !important"
}}
>
<RemoveCircleIcon sx={{ fontSize: "20px" }} />
</IconButton>
}
>
<ListItemAvatar>
<Avatar src="stuff.img" />
</ListItemAvatar>
<ListItemText
className={classes.peopleListSpacing}
primary="Steve First Steve First Steve First"
/>
</ListItem>
<ListItem
className={classes.removePerson}
secondaryAction={
<IconButton
sx={{
zIndex: "1",
width: "15px !important",
height: "15px !important"
}}
>
<RemoveCircleIcon sx={{ fontSize: "20px" }} />
</IconButton>
}
>
<ListItemAvatar>
<Avatar src="stuff.img" />
</ListItemAvatar>
<ListItemText className={classes.peopleListSpacing} primary="Steve First" />
</ListItem>
</List>
The code display this.
The purple space is available space that is not being utilized.
How about just making your ListItemAvatar a flex container and centering it? You might like to right align it, then just add some right margin.
Create a new listItemAvatar prop in your classes object.
display: flex;
justify-content: center;
<ListItemAvatar className={classes.listItemAvatar}>
<Avatar src="..." />
</ListItemAvatar>
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>
I want to change the height of the modal to fit to the content. It always just goes to the height of the screen:
jsx:
<Modal style={styles.modal}
isVisible={props.categories.some(x => showModal(x))}>
<Container style={styles.modalView}>
<Header style={styles.header}>
<Left>
<Title
style={styles.title}>{getDisplayedCategoryLabel(props.categories)}
</Title>
</Left>
<Right>
<Button
small
transparent
danger
rounded
icon
onPress={() => props.setAllShowSubcategoriesToFalse()}>
<Icon name="times" size={20} color='#9E9E9E' />
</Button>
</Right>
</Header>
<Content >
<SelectMultiple
labelStyle={styles.label}
items={getDisplaySubcategories(props.categories)}
selectedItems={
props.categories.filter(category => category.selected)
}
onSelectionsChange={props.toggleSubcategory} />
</Content>
</Container>
</Modal>
styles:
const styles = {
modalView: {
flex: 1,
backgroundColor: '#FFFFFF',
padding: 20,
borderRadius: 8,
height: 100
},
modal: {
padding: 10,
height: 100
}
}
Changing the height of modal style doesn't do anything. I can't seem to change the height at all. What should I be doing to affect the height?
I'm using react-native-modal
How about something like:
<Modal transparent>
<View style={{ flex: 1, alignItems: 'center', backgroundColor: 'rgba(0,0,0,0.5)' }}>
{/* fill space at the top */}
<View style={{ flex: 1, justifyContent: 'flex-start' }} />
<View style={{ flex: 1, backgroundColor: 'white' }}>
{/* content goes here */}
</View>
{/* fill space at the bottom*/}
<View style={{ flex: 1, justifyContent: 'flex-end' }} />
</View>
</Modal>
This is just a guess but how about you give paddingTop a value of 0 and see how that works out. Remove the generic padding you have and specify it exactly using paddingLeft, paddingRight, paddingBottom according to the style you want to achieve.
Hopefully, that helps some bit