Arrange 2 DIVs one below another in Antd Collapse Panel Header along with Extras

user_578219 0
Viewed 973

I am using Antd's Collapse and I would like to add 2 text lines one below another in the Collapse's Panel header along with the extra Property to render some Icons etc like below:

     <Panel
        header={
          <div>
            <div>This is panel header 1</div>
            <div style={{ fontSize: "10px" }}>This is panel header 1</div>
          </div>
        }
        key="1"
        extra={genExtra()}
      >

I can remove the Padding etc to make get the look I need, but the Icons(setting icon on the right) I render as part of getExtra() are messed up. PFA the image below. How can I get it right?

I also tried dividing the complete hearder tab area into different Columns using Row, Col. Even then the Extra icons on the right are messed up.

Image showing the look to PanelTIA

antd reactjs css
1 Answers

In the getIcon, for the setting Icon add the following style property.

style={{position: 'absolute', right: '16px', top: '10px'}}

OR

If you want to use multiple icons then change ..ant-collapse-header class styles as below.

.ant-collapse-header{
  display: flex;
  justify-content: space-between;
}
user_13144020
Related