I think because I am using p tag.
<DialogContent>
<Grid
style={{ marginTop: "8px" }}
container
spacing={0}
></Grid>
<p>
{this.state.eulaEncText ? this.state.eulaEncText : null}
</p>
</DialogContent>
here I am not able to see the lines and tabs as in the original text.
You can achieve this using css using the white-space attribute with the value pre-wrap on the p tag as follow:
<DialogContent>
<Grid
style={{ marginTop: "8px" }}
container
spacing={0}
></Grid>
<p style={{ whiteSpace: "pre-wrap" }}>
{this.state.eulaEncText ? this.state.eulaEncText : null}
</p>
</DialogContent>
According to the documentation, the value pre-wrap does the following:
Sequences of white space are preserved. Lines are broken at newline characters, at , and as necessary to fill line boxes.
Related
I'm using the components from semantic-ui-react to display a Field and Button like below:
<Segment clearing>
<Form>
<Form.Group style={{ display: "flex" }}>
<Form.Field style={{ flexGrow: "1" }}>
<Form.Input
placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXXXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
focus
/>
</Form.Field>
<Form.Button
color="green"
floated="right"
content="Add new API key"
type='submit'
/>
</Form.Group>
</Form>
</Segment>
Nothing incredibly fancy, the result is as below:
I want to reposition the placeholder in the Form.Input to the right side like below:
How exactly can I achieve this?
I would use the CSS placeholder selector. You could, for example, give the Form.Input component an arbitrary class such as "input-aligned-end" and then style it in CSS:
.input-aligned-end::placeholder {
text-align: end;
}
Not sure but try this
labelPosition='right'
style
style={{
paddingLeft: "50%"
}}
I am trying to create a dynamic image list where I can change the number of images that are being displayed, where the images have to occupy the max space in the component without change the image ratio and also without make the component scrollable. The following images show the result that is expected:
Although what really happens now is, in the first case, with only 2 images, it overflows the parent component due to the spacing added between the flexbox elements.
For the 6 images example, it goes worst:
It overflows the parent even more because it ignores the component's max height and always tries to occupy the max width possible.
To reach the correct behaviour, I'm hard coding the flex-basis of the image list for each case because it is a flex item, and only that way does it not grow more than it should. Although, that is not desirable because I want to make the images grow as much as possible without depending on the screen size.
I do not understand why they ignore the parent's max height.
I do not understand why they do ignore the max height of the parent.
Main component:
<>
<Grid
container
direction="column"
wrap="nowrap"
rowSpacing={1}
sx={{ alignSelf: 'flex-end', margin: 0, height: '100%', justifyContent: 'flex-end' }}
>
<Grid
container
wrap="nowrap"
item
sx={{
alignSelf: 'flex-start',
flex: '1 0 auto',
justifyContent: 'space-between',
alignItems: 'center',
}}
>
<CustomImageList ref={ref} />
</Grid>
<Grid item>
<CustomPagination onClick={keyMap.move} />
</Grid>
<Grid width="100%" item>
<Stack
spacing={1}
direction="row"
sx={{
overflowX: 'auto',
justifyContent: 'space-between',
'& .MuiFormControl-root': { marginTop: '1px' },
}}
divider={<Divider orientation="vertical" flexItem />}
>
{Buttons.map((button) => (
<Stack spacing={1} flex={1} key={button.buttonId}>
<Stack direction="row" spacing={1}>
{button.text ? (
<ButtonText button={button} />
) : (
<Button />
)}
</Stack>
<Stack spacing={1} direction="row">
<ButtonBox button={button} />
</Stack>
</Stack>
))}
</Stack>
</Grid>
</Grid>
</>
The component CustomImageList is sketch like the next code:
<>
<Stack justifyContent="center">
<IconButton
ref={leftArrowRef}
size="large"
onClick={(e) => {
e.preventDefault();
handleClick({
key: 'ArrowLeft',
keyCode: 37,
});
}}
>
<ArrowBackIosNewIcon />
</IconButton>
</Stack>
<ImageList
sx={{
height: '100%',
alignContent: 'center'
}}
cols={imageColumnCount}
>
{images.map((image, index) =>
createOrdinaryListItem(image, index)
)}
</ImageList>
<Stack justifyContent="center">
<IconButton
onClick={(e) => {
e.preventDefault();
handleClick({
key: 'ArrowRight',
keyCode: 39,
});
}}
ref={rightArrowRef}
size="large"
>
<ArrowForwardIosIcon />
</IconButton>
</Stack>
</>
The ImageList component is a MUI ImageList
What would be the best approach to create the scenario shown in the first and second figures? I have already tried to create my component. It was a flexbox where I used the breakpoint from the grid to distribute the columns across the images. I had the same behaviour that I presented here.
Sorry about the verbose post and kinda "hard to understand" question, but I was not capable of creating a runnable script to show what is aforementioned
So I have my layout from Ant design and on the profile page theres one div at the top which has user's info.
Under it, there are many divs (one for each post), essentially mapping a post array into post divs.
Problem is, ive struggled with centring them to the middle of the page but after messing around with flex, i thought i did a good job in the end. It looked perfect at first when the user has no posts underneath the profile div. The moment there's posts, the profile div goes to the left alot for some goddamn reason.
The posts are perfectly centered like i want them but my problem is with the profile div. To fix it, i did a margin-left on the it. This makes it look perfect. But not so fast. Now when theres no posts, its awfully to the right cuz it was perfectly centered before the margin-left
So is there any way i can pass in a condition to say if posts.length === 0, and set the margin-left accordingly?
Losing my head.
Layout.js code:
<Content style={{ padding: '0 50px' }}>
<Breadcrumb style={{ margin: '16px 0' }}>
<Breadcrumb.Item>Home</Breadcrumb.Item>
<Breadcrumb.Item>Network</Breadcrumb.Item>
</Breadcrumb>
<div className="site-layout-content" style={{ background: "#fff ", padding: 24, minHeight: 280, display:"flex", alignItems:"center", flexDirection: "column"}}>
{children}
</div>
</Content>
UserProfile.js code :
<div>
<div className="site-card-wrapper" style={{display: "inline-block",marginBottom:20, width: 500, marginLeft:355}}>
<Row gutter={16} type="flex" style={{justifyContent: "center", }}>
<Col span={16}>
<Card title={user.username} bordered={true} style={{border: "1px solid #cccccc",}}>
<div style={{display:"flex", justifyContent: "space-between"}}>
<CardContent>Followers: {user.followers === undefined ? "0" : user.followers.length}</CardContent>
<CardContent>Following: {user.following === undefined ? "0" : user.following.length}</CardContent>
</div>
</Card>
</Col>
</Row>
</div>
{
(userPosts.length > 0) ?
<Heading>Posts</Heading> :
<Heading>No posts yet</Heading>
}
{
userPosts.map(post => {
return <SinglePost key={post.id} post={post} />
})
}
</div>
SinglePost.js code (simplified):
<div className="site-card-wrapper" style={{marginBottom:20, width: 1200,}}>
<Row gutter={16} type="flex" style={{justifyContent: "center"}}>
<Col span={16} >
<Card title={user.username} bordered={true} style={{border: "1px solid #cccccc"}}>
<div style={{fontSize: 18, marginTop: -10, whiteSpace: "pre-line"}}>
{post.content}
</div>
<Likes>{likes} Likes</Likes>
</Card>
</Col>
</Row>
</div>
<div className="site-card-wrapper"
style={
{display: "inline-block",
marginBottom:20,
width: 500,
marginLeft:posts.length === 0 ? 0 : 355
}}>
use above conditional statement to handle run time marginLeft
In my react-app I cannot see the background/border style. What am I doing wrong?
This is what is looks like:
<Flex>
<Box
bg="blue"
css={{
borderRadius: "4px"
}}
/>
</Flex>
codesandbox
There isn't the content in box.
When you add any content, you will see the border radius and background color.
If you change like below, then you will see the background.
<Flex>
<Box
bg="blue"
css={{
borderRadius: "4px"
}}
>
lorem texts
</Box>
</Flex>
and you can specify
width={1}
to make box will have full width.
I have tried all things to align vertically an icon and a text, Code:
<Danger color="secondary" style={{ flex:1,justifyContent: "center",alignItems: "center" }}>
<ErrorOutline
className={classes.warning}
/>
<text numberOfLines={1} style={{ textAlignVertical: "center" }}>
The last job was canceled
</text>
</Danger>
Things that I've tried : display, justifyContent, alignItems, flex, flexDirection, etc.
Any advice? Thanks!
Try out this inside render of react code
<div style={{display: 'flex', lineHeight: '40px'}}>
<img src="https://png.icons8.com/ios/50/000000/user-male-circle-filled.png" height="40"/>
<div>Welcome User!!!</div>
</div>
And for clear understanding you can find the entire React code for this particular example in this link: https://jsfiddle.net/r6yLmu8t/
You need to give lineHeight for the div tag in which the image/icon and text are there. And make sure that the icon/image height is equal to the lineHeight given to the div.
Hope this will achieve your need of text and icon to be on the same line and text to be at centre of icon/image
<Button light>
<View style={{flexGrow: 1, justifyContent:'center', alignItems: 'center'}}>
<Icon name='arrow-back' />
<Text>Back</Text>
</View>
</Button>