Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

vertical Menu Ant design height 100%

Good afternoon. I'm new to web development and I'm not able to put the ant design menu (https://ant.design/components/menu/) at 100% of the screen height.

I tried to put <Layout style = {{height:" 100vh "}}> before the but it did not work.

Here's the code I'm using

. . . . .

import React from 'react'
import { Layout, Menu, Breadcrumb, Icon, Button } from 'antd';

const { Header, Content, Footer, Sider } = Layout;
const SubMenu = Menu.SubMenu;

export class SideMenu extends React.Component {

  constructor(props){
    super(props)
    this.state = {collapsed: false}
  }

  toggleCollapsed (){
     this.setState({
       collapsed: !this.state.collapsed
     })
  }

  render() {
    return (
      <div style={{ width: 256 }}>
        <Menu
          defaultSelectedKeys={[]}
          defaultOpenKeys={[]}
          mode="inline"
          theme="light"
          inlineCollapsed={this.state.collapsed}
        >
          <Menu.Item key="0">
            <div onClick={this.toggleCollapsed.bind(this)}>
              <Icon type={this.state.collapsed ? 'menu-unfold' : 'menufold'}/>
            </div>
          </Menu.Item>    
          ...    
          <Menu.Item key="5">
            <Icon type="rocket" />
            <span>Funções</span>
          </Menu.Item>
        </Menu>
      </div>
    );
  }
}

Thanks for your help.

like image 612
Michael Fernandes Avatar asked Jan 16 '18 19:01

Michael Fernandes


People also ask

Is ANTD mobile responsive?

Ant Design, referred to as Antd in this context, is a pretty great library. It contains all the components I could need in nice wrapper components that makes developing a UI very simple. One major omission, however, is a responsive mobile header.

Is ANTD Pro free?

ant-design-pro - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers.

How do you use the grid in ant design?

You can create a basic grid system by using a single set of Row and Col grid assembly, all of the columns (Col) must be placed in Row . You can use the gutter property of Row as grid spacing, we recommend set it to (16 + 8n) px ( n stands for natural number).


1 Answers

Try to manage separate style sheet(in my case menu.less) and put it this code

it should be work

.menu-style {

height: 100vh;
width: 200px;
position: fixed;
}

just try it.

like image 168
jayanes Avatar answered Oct 12 '22 22:10

jayanes