R
Refine

ask-any-question

Refine 3.x with Antd4 List.extra not appearing correctly

Rrival-black10/7/2023
I am trying to update my Antd from 3.x to 4.x with Refine v3 and the page header extra is missing layout and styles. Still looks fine on show and edit pages. On list pages, the buttons are not appearing side-by-side and instead stack vertically. If I wrap the entire extra in a PageHeader component it looks right but I think then I'll have a PageHeader within a PageHeader.
Kkapa.ai10/7/2023
Hi @geoffatsource. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It seems like you're experiencing issues with the layout and styles of your page header after updating Ant Design from 3.x to 4.x in your Refine project. This could be due to some changes in the Ant Design and Refine packages. In the migration from Refine v3 to v4, the actionButtons and pageHeaderProps props were deprecated and have been removed from the <List>, <Create>, <Edit>, and <Show> components. Instead, you should use the headerButtons and headerProps props. This could be the reason why your buttons are not appearing side-by-side on list pages. Here's how you should update your components: List.tsx
- <List actionButtons={actionButtons} pageHeaderProps={pageHeaderProps}>
+ <List headerButtons={actionButtons} headerProps={pageHeaderProps}>
- <List actionButtons={actionButtons} pageHeaderProps={pageHeaderProps}>
+ <List headerButtons={actionButtons} headerProps={pageHeaderProps}>
Create.tsx
- <Create actionButtons={actionButtons} pageHeaderProps={pageHeaderProps}>
+ <Create headerButtons={actionButtons} headerProps={pageHeaderProps}>
- <Create actionButtons={actionButtons} pageHeaderProps={pageHeaderProps}>
+ <Create headerButtons={actionButtons} headerProps={pageHeaderProps}>
Show.tsx
- <Show actionButtons={actionButtons} pageHeaderProps={pageHeaderProps}>
+ <Show headerButtons={actionButtons} headerProps={pageHeaderProps}>
- <Show actionButtons={actionButtons} pageHeaderProps={pageHeaderProps}>
+ <Show headerButtons={actionButtons} headerProps={pageHeaderProps}>
Edit.tsx
- <Edit actionButtons={actionButtons} pageHeaderProps={pageHeaderProps}>
+ <Edit headerButtons={actionButtons} headerProps={pageHeaderProps}>
- <Edit actionButtons={actionButtons} pageHeaderProps={pageHeaderProps}>
+ <Edit headerButtons={actionButtons} headerProps={pageHeaderProps}>
(Source: Refine Migration Guide (https://refine.dev/docs/api-reference/antd/migration-guide/v4-to-v5/)) Also, note that the <PageHeader> component has been moved into @ant-design/pro-components in Ant Design v5. Refine is using <PageHeader> in <List>, <Create>, <Edit>, <Show> components and added as a dependency. You don't need to install @ant-design/pro-components package manually. (Source: Refine Migration Guide (https://refine.dev/docs/api-reference/antd/migration-guide/v4-to-v5/)) If you're still experiencing issues, it might be helpful to review the Ant Design's own migration guide (https://ant.design/docs/react/migration-v5) for more detailed information. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
Kkapa.ai10/7/2023
<@1014305963219615754> kapa.ai is still learning and improving, please let us know how it did by reacting below
Rrival-black10/7/2023
If I move it to headerButtons, it works

Looking for more? Join the community!

R
Refine

ask-any-question

Join Server
Recommended Posts
Multiple Auth Provider in a single app. Possible?Hi everyone! A refine newbie here. First, a huge thanks to refine team for building something prettyKeep getting this error when installing refine and refine dev, been stuff for a while I need helpHow does DataProvider manage field types?I am working on a custom data provider, but for some reason, default template I got from refine playchakra ui formHi guys! I have a question, maybe a silly one but im not very experienced with react and just startihi there i have question about edit pagehi there i have question about edit page, API get detail data and patch have difference schema ex: `Hi there I want to build kind of aHi there, I want to build kind of a business middleware that will help me handle some administrativeHow to remove plural noun when using custom label in resources ? (Inferencer)I have a resource with label "Manajemen Pengguna" but on the page, Inferencer automatically convert pass data while navigationHow to pass data from one component to other while navigation?How to navigate immediately to another route?Hi everyone, after login (localhost:5173/login) the user is redirected to localhost:5137, but I wantCascading Dropdown ExampleHey everyone! Say I want to do a cascading dropdown inside of my Refine app, where I have "Brand" anPersistent 'Loading...' Screen in Refine App—Requires Multiple Refreshes for Switching Between PagesHey everyone, we're facing a peculiar issue with our web app, which is built on Refine and integrateHow to default a theme to light mode over dark mode? (using Chakra UI Blue theme)Tried changing some values here: """" export const RefineThemes = Object.keys(refineCustomThemes).