Semantic UI with semantic-ui-react grid width inside popup

Question

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. Seems that the columns are too small in width to keep all text.

brianespinosa · Accepted Answer · 2018-03-02 16:20:00Z

1

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

answered Mar 2, 2018 at 16:20

brianespinosa

2,39114 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shad Over a year ago

Could you help me out with this? stackoverflow.com/questions/55215310/…

Collectives™ on Stack Overflow

Semantic UI with semantic-ui-react grid width inside popup

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related