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

Help appreciated.

Answer 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.

1. Add style={{width: '300px'}} on your Grid component.

I'd recommend doing a couple additional things here.

2. If you are insistent on using a Popup for this menu, you'll probably want to add the position='bottom left' prop to it.

3. 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