I[m trying to build, using semantic-ui-react, a menu like the example on the Semantic UI documentation, but I'm having problems on the popup width.
Here is my code:
import React, { Component } from 'react';
import { Menu, Icon, Dropdown, Popup, Grid, List } from 'semantic-ui-react';
import menulogo from '../../images/logo.svg';
class AppMenu extends Component {
render() {
return (
<div>
<Menu>
<Menu.Item>
<img alt='Logo' src={menulogo}/>
<strong color='blue'>Logo</strong>
</Menu.Item>
<Menu.Item>
<Icon name='browser' color='blue'/>
Menu
<Popup
trigger={<Icon name='dropdown'/>}
position='bottom center'
flowing
hoverable
>
<Grid
columns={3}
centered
divided
relaxed
>
<Grid.Column textAlign='center'>
<List relaxed link>
<List.Header as='h4'>Group 1</List.Header>
<List.Item as='a'>Option 1</List.Item>
<List.Item as='a' >Option 2</List.Item>
<List.Item as='a' >Option 3</List.Item>
<List.Item as='a' >Option 4</List.Item>
</List>
</Grid.Column>
<Grid.Column textAlign='center'>
<List relaxed link>
<List.Header as='h4'>Group 2</List.Header>
<List.Item as='a'>Option 1</List.Item>
<List.Item as='a' >Option 2</List.Item>
<List.Item as='a' >Option 3</List.Item>
<List.Item as='a' >Option 4</List.Item>
</List>
</Grid.Column>
</Grid>
</Popup>
</Menu.Item>
</Menu>
</div>
);
}
}
export default AppMenu;
This is the result I´m getting:
I expected the popup to fit the text nicely. Seens that the columns are too small in width to keep all text.
Help appreciated.
The problem here is that the Grid component in semantic-ui is responsive. It takes on the size of it's parent if no width is defined. This is in the styles and not specific to semantic-ui-react. If you want your grid to take up more space horizontally, you can set a style={{width: '300px'}} on your Grid component and this will give you the space you want.
Add style={{width: '300px'}} on your Grid component.
I'd recommend doing a couple additional things here.
If you are insistent on using a Popup for this menu, you'll probably want to add the position='bottom left' prop to it.
Use the entire Menu.Item as the Popup component's trigger instead.
These two changes will give you this:
You'll probably be better off using a Dropdown component on this Menu instead, but I will keep the scope of my answer based on the initial question.
A codesandbox example is included showing all three of these changes in working order: https://codesandbox.io/s/n39o5y344p
Related
I have a React-Bootstrap Card component that I'm making. I'd like the content in the <Card.Body> to flow from left to right, similar to an HStack in SwiftUI. Currently, the content renders vertically. Is there any way to change this? Below is my code.
function TestCard(props) {
return (
<Card>
<Card.Img />
<Card.Body>
<Card.Title className="fw-bold">Card Title</Card.Title>
<div className="vr" />
<Card.Text>Card Text</Card.Text>
</Card.Body>
</Card>
);
}
I built a Rich Text Editor for my react application using Draft.js.
I want to apply the default Material UI TextField styling to this component that I have developed. How can I achieve this?
<>
<Box
onClick={() => {
editorRef.current!.focus();
}}
sx={} // What should I add here to get default MUI TextField styles (outlined variant)
>
<Editor
editorKey={`content-text-field-${editorKey}`}
editorState={editorState}
onChange={onChange}
plugins={editorPlugins}
ref={editorRef}
/>
<TagSuggestions suggestionsComponent={suggestionsComponent} />
</Box>
<TextFieldRoot variant="outlined" />
</>
what is happening
I am trying to add the react bootstrap accordion component into the react bootstrap Modal component. it means, rendering Modal first and then inside that, trying to render the accordion component.
below is the code :
import React, { Component } from "react";
import Card from 'react-bootstrap/Card';
import Accordion from 'react-bootstrap/Accordion';
import "./de.css";
import Table from 'react-bootstrap/Table';
import ReactBootstrap, {
Navbar,
Nav,
NavItem,
Button,
Form,
FormControl,
NavDropdown
} from "react-bootstrap";
import Modal from 'react-bootstrap/Modal';
export default class Dev1 extends Component {
constructor() {
super();
this.toggleDetails= this.toggleDetails.bind(this);
this.toggleBats = this.toggleBats.bind(this);
this.state = {
name: "React",
bates: false,
details: false
};
}
toggleDetails(){
const currentState = this.state.details;
this.setState({ details: !currentState });
}
toggleBats(){
const currentStateBates = this.state.bates;
this.setState({ batches: !currentStateBates });
}
render() {
return <div>
<Nav.Link className="viewdetails" onClick={() => this.toggleDetails()}>View Details</Nav.Link>
<section>
<Modal
show={this.state.details}
onHide={this.toggleDetails}
dialogClassName="modal-90w"
backdrop="static"
keyboard={true}
>
<Modal.Header closeButton>
<Modal.Title>Welcome </Modal.Title>
</Modal.Header>
<Modal.Body>
<div>
<Accordion>
<Card className="accordian">
<Card.Header>
<Accordion.Toggle as={Button} variant="link" eventKey="0">
Click me!
</Accordion.Toggle>
</Card.Header>
<Accordion.Collapse eventKey="0">
<Card.Body>Hello! I'm the body</Card.Body>
</Accordion.Collapse>
</Card>
<Card>
<Card.Header>
<Accordion.Toggle as={Button} variant="link" eventKey="1">
Click me!
</Accordion.Toggle>
</Card.Header>
<Accordion.Collapse eventKey="1">
<Card.Body>Hello! I'm another body</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>
</div>
</Modal.Body>
</Modal>
</section>
</div>;
}
}
what is the issue
The behavior of the accordion component is not like sliding nut instead it is hide and show. in the react bootstrap accordion basic example , sliding is happening but in above code it is not. not able to get what is the issue. please suggest
An important part of what makes it slide is the transition implementation
.collapsing {
transition: height .35s ease;
}
It may have been overridden by one of your custom style sheets. It is hard to root out the problem in dev tools because that class I've mentioned is actually removed & added on the actual transition process (in a matter of less than 1 second) - so could either manually add that style to the DOM just to review it on dev tools or you would have to search your custom stylesheets for any rules that may have tampered with that.
You find here https://codesandbox.io/s/distracted-leakey-uqgy8?file=/src/App.js:1854-1896 a working example
I have this render function:
render() {
const {classes} = this.props
return (
<Paper className={classes.root} elevation={4}>
<Typography type="title" className={classes.title}>
All Users
</Typography>
<List dense>
{this.state.users.map((item, i) => {
const photoUrl = item._id
? `/api/users/photo/${item._id}?${new Date().getTime()}`
: '/api/users/defaultphoto'
return <Link to={"/user/" + item._id} key={i}>
<ListItem button>
<ListItemAvatar>
<Avatar src={photoUrl} className={classes.bigAvatar}/>
</ListItemAvatar>
<ListItemText primary={item.name}/>
<ListItemSecondaryAction>
<IconButton>
<ArrowForward/>
</IconButton>
</ListItemSecondaryAction>
</ListItem>
</Link>
})
}
</List>
</Paper>
)
}
}
When I Initially load the page the below blue dot appears to the left of each user:
If I then click a link to another page and then the browser back arrow to return to the Users page the user list appears without the blue dot:
I would prefer if the blue dot never appears. How do I do this?
I faced the same problem today using ListItem component from react material ui v4.6.0.
The default list style type value of disc will be displayed if "ListItemSecondaryAction" component is used as the last child of "ListItem" component.
According to the React Material UI Docs, the value of ContainerComponent prop will be set to 'li' when ListItemSecondaryAction is used as the last child.
Changing the value of ContainerComponent prop to other elementType such as 'div' fixed the issue.
<ListItem button ContainerComponent="div">
<ListItemAvatar>
<Avatar src={photoUrl} className={classes.bigAvatar} />
</ListItemAvatar>
<ListItemText primary={item.name} />
<ListItemSecondaryAction>
<IconButton>
<ArrowForward />
</IconButton>
</ListItemSecondaryAction>
</ListItem>
I assume somewhere in the nested components you have a li of some sort.
The dots are from html list bullet points and can be removed by adding the following css:
ul {
list-style-type: none !important;
}
If the component is a part of the Material-UI library, you might need to add !important
I want the card header to be the normal text together with an image, side by side.
import logo from './images/logo.svg';
render() {
return (
<div>
<Card>
<Card.Content className='left aligned'>
<div className="two column headers">
<Card.Header>Hello World!</Card.Header>
<Image src={logo} size='tiny'/>
</div>
<Card.Meta>Item</Card.Meta>
<Card.Meta>Category</Card.Meta>
</Card.Content>
<Card.Content>
<Card.Description>10 units of test.</Card.Description>
</Card.Content>
</Card>
</div>
);
The image is appearing just after the 'Hello World!' header. How can I put them side by side, left aliging the text and right aligning the image ?
You can do this with CSS, however I will recomend to use Grid there.
<Card.Header>
<Grid>
<Grid.Column width={12}>Hello World!</Grid.Column>
<Grid.Column width={4}>
<Image src={logo} size='tiny'/>
</Grid.Column>
</Grid>
</Card.Header>
By the way, if you want to have an Image component on left, you can use Header component, see examples.