CODEWITHSUNDEEP
cssantd
Sai Krishnadas
Sai Krishnadas

Reputation: 3419

How to remove the margin in a antd drawer

enter image description here

I use a antd drawer. The margin left and right of the drawer couldn't be removed, so the steps component is pushed a few margins from left and right (red circle).

Then, The antd steps blue slider is also has a margin (green circle).

I tried putting margin:0px and padding:0px but doesn't seems to fix these issues.

Code sandbox: https://codesandbox.io/s/basic-antd-4-19-5-forked-iq13nx?file=/index.js

Upvotes: 0

Views: 2660

Answers (3)

Wyaches
Wyaches

Reputation: 11

bodyStyle now is deprecated
Use styles:

<Drawer
   styles={{
      body: {
         padding: 0
      }
    }}
/>

Upvotes: 1

Helder Batalha
Helder Batalha

Reputation: 43

You can also use the use the Drawer props "bodyStyle" to modify the style of the body:

        <Drawer          
          bodyStyle={{ padding:'0px' }}
        >
//...
        </Drawer>

Upvotes: 2

Victor
Victor

Reputation: 2371

If you want remove the red margin, you need set padding left and right to 0 and remain the 24px in vertical sides:

.ant-drawer-body {
    flex-grow: 1;
    padding: 24px 0; // <-- This 0 do the work
    overflow: auto;
    font-size: 14px;
    line-height: 1.5715;
    word-wrap: break-word;
}

For the blue underscore (your green signal in the image), you must change this style:

.ant-menu-horizontal > .ant-menu-item::after, .ant-menu-horizontal > .ant-menu-submenu::after {
    position: absolute;
    right: 0; // <-- 0 instead 20px
    bottom: 0;
    left: 0; // <-- 0 instead 20px
    border-bottom: 2px solid transparent;
    transition: border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    content: '';
}

Upvotes: 1

Related Questions