How can ı remove ant design's space between dropdown and menu?

user_16864745 0
Viewed 282

enter image description here

Hello, I want to delete the space between the menu and the button, so the button and the drop-down menu will be combined. I don't know how to do this can you help me? I can not find how can ı remove it .

antd css
2 Answers

It would be a better way for us to help you if you share the code you wrote here.

user_66902260

You can do it by wrapping the Button inside a span element. like this:

 <Dropdown placement="bottomLeft" ...>
  <span>
    <Button>bottomLeft</Button>
  </span>
</Dropdown>

it works because Dropdown will calculate it's popup position based on the top of the element which placed directly inside the <Dropdown>, and since in the above solution, span has y-overflow, so the the popup will be shown without any space between Button and popup. You can controll the space between popup and Button by styling the span element like this:

 <Dropdown placement="bottomCenter" ...>
   <span style={{ display: 'inline-block', height: 27 }}>
     <Button>bottomCenter</Button>
  </span>
 </Dropdown>

I've implemented an example Here on stackblitz you can check it out.

user_119779290
Related