I have Card with 2 Card.Sections. I'm trying to align the second one to far right however nothing works for me. I tried:
Setting sections as flex and assigning marginLeft: auto for the second one
Setting Card position: relative, then adding float: right to the second one
I faced the same issue today, here's how I solved it:
<Card horizontal tokens={cardTokens}>
<Card.Section>
<Checkbox
label="todo status"
/>
</Card.Section>
<Card.Item grow={1}>
<span />
</Card.Item>
<Card.Section styles={footerCardSectionStyles}>
<Icon iconName="Delete" />
</Card.Section>
</Card>
As you can see I used
<Card.Item grow={1}>
<span />
</Card.Item>
between the two Card.Sections this is inserting an element with the remaining width thus pushing the second Card.Section to the end.
Related
We have some legacy code that I'm working to refactor styling in.
Right now, there are 3+ files (each representing a page within a wizard) with a styling constant at the top of each file feeding into TextFields and Buttons. Each of these constants have mostly the same content.
I'd like to put the common styling in another, separate file and then apply those styles across each page in the wizard that uses them.
Initially, I thought about using themes, but the use case may not be conducive to it. In each of the three files/pages, I'm seeing pairs of TextFields with different styles applied to them:
<div>
<TextField
id="upload-name"
label="Upload Name"
value={this.state.label}
onChange={this.handleChange('label')}
margin="normal"
variant="outlined"
className="form-input"
InputLabelProps={{
shrink: true,
}}
/>
</div>
<div>
<TextField
id="upload-description"
label="Description"
value={this.state.description}
onChange={this.handleChange('description')}
multiline={true}
margin="normal"
variant="outlined"
className="form-input"
InputLabelProps={{
shrink: true,
}}
InputProps={{
classes:{
root: classes.textArea
}
}}
/>
</div>
Specifically, the lower TextField's getting two different classes in two different ways. I've been trying to figure out if there's a way of passing all classes needed from a CSS module but neither the approach above nor root: styles.textArea seem to work.
<div className="tasklist">
<p>{props.task.task}</p>
<small>{new Date(props.task.createdAt.toString()).toDateString()}</small>
<br />
<i>Assigned By :</i>
<b>{props.task.assigned_by}</b>
<br />
<i>Assigned to :</i>
<b>{props.task.assigned_to}</b>
<br />
<i>status :</i>
<b>{props.task.status}</b>
<button onClick={showUpdateFormhandler}>
<img
onError={()=>{console.log('error occured')}}
src="edittask.png"
alt="update"
style={{ width: "20px", height: "20px" }}
/>
</button>
</div>
The same div is rendering image perfectly in listing tasks but when Iam using this div from users component it isn't loading. I have added css and image is in public folder. This is my first project in react. a task assigning app.
As you stated, that your image isn't loading when you render it from user component. The most possible reason for this could be the path of source of image. The path may be changing considering that you have Users component in a different directory.
It is not easy to predict the accurate error unless I look at entire repository but I think you most probably have the source path error.Try changing the src of the image to correct source when you're rendering it from Users Component
Also , please read minimal reproducable example
The image is working just fine. Here is the code
<Image
layout="fixed"
src="/images/example.jpeg"
alt="Example image"
width="140"
height="140"
/>
But, when I run the website on web.dev, I don't get a topscore in Performance.
The main reason is Image elements do not have explicit width and height
I've studied this, and can tell from here https://web.dev/optimize-cls/?utm_source=lighthouse&utm_medium=lr#images-without-dimensions
That width and height attributes is needed, which don't appear, using next/image
How do I solve this?
I am facing the same issue - changing layout to responsive did not solve the problem.
It rather looks like the component is missing the rendering of the supporting tags - it should actually be implemented as described in the initial lighthouse link.
Use curly braces to mention the size instead of string literals.
Use layout="responsive"
<Image
layout="responsive"
src="/images/example.jpeg"
alt="Example image"
width={140}
height={140}
/>
I'm trying to make a Headerelement sit next to an Button icon but I cannot make it happen.
Without attempting any Grids listing them like this
<Header as='h4'>Header text</Header>
<Button icon className='transparentButton'>
<Icon name='add'/>
</Button>
makes it look like this - each item on different line:
If I try to make a Grid with one row and two columns there is a massive space between the two and also the header text is wrapped. At least is vertically aligned I guess...
<Grid>
<Grid.Row verticalAlign='middle'>
<Grid.Column>
<Header as='h4'>Header text</Header>
</Grid.Column>
<Grid.Column>
<Button icon className='transparentButton'>
<Icon name='add'/>
</Button>
</Grid.Column>
</Grid.Row>
</Grid>
This looks like that:
I'd really love to hear how suggestions on how to make the two items sit next to each other properly. I want to make it look like this:
Example code https://codesandbox.io/s/semantic-ui-react-example-ttnxc (not sure why the Icon is not rendering there though).
Actually I think that Header Component is displaying as block
Just try to edit it's css and make:
display: inline-block;
and it should render successfully
unfortunately your example code didn't load so i couldn't try this but it should work
I just started using react with bootstrap and implemented a navbar. I can see that bootstrap has many functionalities, however I also see that it is limited in functionality, or, it doesn't give as much 'freedom' in terms of customization. I hope I am wrong but here is my example:
<Grid>
<Row className="text-center">
<h1>Our Products</h1>
</Row>
</Grid>
This code renders the <h1> in the middle of the screen no matter your device size. It works perfectly!
<Navbar>
<Navbar.Brand className="text-center">
<a className='menuItem' href="#home">Sample Text</a>
</Navbar.Brand>
</Navbar>
This is supposed to render a navigation bar with the <Navbar.Brand> in the middle of the screen. The problem is that it has no effect!
I also tried to apply style instead of the className, or even define my own className and work with it in a .css file but it never works. Is this a limitation of React Bootstrap?
I have been able to do something like this to put the text in the middle
<Grid>
<Row className="show-grid">
<Col xs={4} md={5}></Col>
<Col xs={4} md={5}>{this.props.children}</Col>
<Col xs={4} md={5}></Col>
</Row>
</Grid>
I would still like to know how to use the className="text-center" to place the <Navbar.Brand> in the center or, any way to customize it.
I think you can change the default text alignment inside a file named "App.css" that comes with React package
I found out that this problem is pretty common and in most cases has no answer (here, tried every solution offered here but didn't work). I found out that the only way to make it work is to define a custom-className and edit it in CSS. Weird is that it doesn't work with inline styling for me!
The code becomes:
<div>
<Navbar>
<Navbar.Brand className="navbar-brand-custom">
<p>Metanice</p>
</Navbar.Brand>
</Navbar>
</div>
with an external css
.navbar-brand-custom {
width: 100%;
text-align: center;
}
I also found out that it will never work if you don't specify the width