CODEWITHSUNDEEP
javascriptreactjswebsemantic-uimobile-website
Alvindrakes
Alvindrakes

Reputation: 637

how to make React-semantic-ui dropdown vertically like on mobile?

I have a stackable menu and dropdown on my website. Everything works fine on a mobile phone, but when I test my website on an ipad, the dropdown menu is not stackable, and some of the content is not shown (eg. About)

Here's how my websites look on each device:

On mobile phone

On mobile phone

On Ipad

on Ipad

My code

    <Menu
              fixed="top"
              stackable
              borderless
              fluid
              style={{
 marginTop: '0em', marginRight: 'auto', marginLeft: 'auto',
}}
            >

              <Menu.Item
                style={{
                  textAlign: 'right',
                  display: 'block',
                  fontSize: '1.5em',
                }}
              >
                <Icon
                  onClick={this.handleIconClick}
                > <i
                  className="animated infinite bounce  iconsmind icon-Arrow-Up"
                />
                </Icon>
              </Menu.Item>

              {menu.items.map((item) => {
                if (item.menu_item_parent === '0') {
                  const menuList = menu.items.filter(
                    i => i.menu_item_parent === item.ID.toString(),
                  );
                  if (menuList.length === 0) {
                    return (
                      <Menu.Item
                        as="a"
                        key={item.ID}
                        link
                        href={`/${item.url.split(config.wp_url)[1].slice(0, -1)}`}
                        style={{
                          textAlign: 'Left',
                          display: 'block',
                          fontSize: '1.5em',
                        }}
                      >
                        {item.title}
                      </Menu.Item>
                    );
                  }
                  return (
                    <Dropdown
                      floating
                      item
                      text={item.title}
                      key={item.ID}
                      style={{
                        textAlign: 'Left',
                        display: 'block',
                        fontSize: '1.5em',
                      }}
                    >
                      <Dropdown.Menu>
                        {menuList.map(i => (
                          <Dropdown.Item
                            key={i.ID}
                            href={`/${item.url
                              .split(config.wp_url)[1]
                              .slice(0, -1)}/${i.url
                              .split(config.wp_url)[1]
                              .slice(0, -1)}`}
                          >
                            {i.title}
                          </Dropdown.Item>
                        ))}
                      </Dropdown.Menu>
                    </Dropdown>
                  );
                }
                return null;
              })}
            </Menu>

So how can I make the dropdown drops vertically on ipad as seen on the mobile phone?

Upvotes: 3

Views: 1572

Answers (1)

amrit
amrit

Reputation: 123

As per the latest React Semantic UI Documentation. It is not supported by the react wrapper for semantic ui.

Semantic UI stacks menu at mobile, you will need to change that to fit your case

You will need to manually override for the max-width set by semantic-ui-css

Current Styling

@media only screen and (max-width: 767px)
  .ui.stackable.menu .item {
  width: 100%!important;
}

You custom style

@media only screen and (max-width: 800px) // or any width you want stackable menu on
  .ui.stackable.menu .item {
  width: 100%!important;
}

⚠️ Note: You should included your css file after importing semantic-ui-css

import 'semantic-ui-css/semantic.min.css';
import './styles/css/Index.css'; // the file that contains custom styling

Upvotes: 5

Related Questions