question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[IconMenu] Add ability to style underlying List inside of Menu.

See original GitHub issue

Currently there is no way to style the underlying list when using IconMenu. This change would enable passing a listStyle object similar to how Menu already allows for and just pass the listStyles down to the Menu object.

const listStyles = { paddingTop: 0, paddingBottom: 0 };

<IconMenu listStyle={listStyles} menuStyle={...}>
  <MenuItem .../>
</IconMenu>

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:13 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
mrprofessorcommented, Feb 12, 2019

Using MenuListProps should work.

<Menu  MenuListProps={{ style: { padding: 0 } }} >
  <MenuItem> First </MenuItem>
  <MenuItem> Second </MenuItem>
  <MenuItem> Third </MenuItem>
</Menu>```
2reactions
hbeckericommented, Nov 23, 2016

I had a lot of trouble trying to remove the padding: 8px 0 as css classes couldn’t reach the div and the menuStyle, lineSyle props didn’t work either. However wrapping my listing content in a disabled menuItem and setting some negative margins works pretty good.

<IconMenu >
  <MenuItem className="icon-menu-wrapper" disabled={true}>
     <div>listing content</div>
     <div>more listing content</div>
     ...
  </MenuItem>
</IconMenu>
.icon-menu-wraper {
    margin: -8px 0 -8px 0; /* the real magic */
    padding: 0 !important; /* removes left and right padding */
    cursor: initial !important;
}
Read more comments on GitHub >

github_iconTop Results From Across the Web

[IconMenu] Add ability to style underlying List inside of Menu.
Currently there is no way to style the underlying list when using IconMenu. This change would enable passing a listStyle object similar to ......
Read more >
Icon menu list widget - Product Documentation | ServiceNow
A simple list with a glyph icon next to each link. You can use this base system ... Parent menu Item, Nest menu...
Read more >
Menus - Android Developers
Tip: Android 3.0 adds the ability for you to define the on-click behavior for a menu item in XML, using the android:onClick attribute....
Read more >
React Menu component - Material UI - MUI
Menus display a list of choices on temporary surfaces. A menu displays a list of choices on a temporary surface. It appears when...
Read more >
How to Add Image Icons With Navigation Menus in WordPress
Ever wanted to add images to your navigation menu items in WordPress? Learn how to add image icones with navigation menus in WordPress....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found