frail-apricot
frail-apricot10mo ago

How to position a button on the left side

How can we position a button on the left side of the form instead of the right?
8 Replies
kapa.ai
kapa.ai10mo ago
Hi @blankia. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hmm, I don't know enough to give you a confident answer yet. The extracts provided do not contain specific information on how to position a button on the left side of the form in refine. However, you can usually control the position of elements in your application using CSS or styled components. For more detailed information, you might find it helpful to review the refine documentation (https://refine.dev/docs/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai10mo ago
<@708254598820921435> kapa.ai is still learning and improving, please let us know how it did by reacting below
frail-apricot
frail-apricot10mo ago
In a form we see the save button on the right side, but I want to have this on the left side
blank-aquamarine
blank-aquamarine10mo ago
Hey @blankia you can customize create and edit components with swizzle command from cli. https://refine.dev/docs/packages/documentation/cli/#commands
blank-aquamarine
blank-aquamarine10mo ago
All components with the Swizzle Ready flag can be customized with the swizzle command.
No description
frail-apricot
frail-apricot10mo ago
Hmm there is not an easier way to do this? Like set a custom prop on that changes the position of the buttons? I remember that I have seen it before, but couldnt find it in the documentation anymore
blank-aquamarine
blank-aquamarine10mo ago
https://refine.dev/docs/api-reference/antd/components/basic-views/create/#footerbuttonprops There is also footerButtonProps. Maybe it can be done with css.
frail-apricot
frail-apricot10mo ago
I'm sure it can be done. Was hoping that there were experts who have done it already and would share their examples so I can follow the best practice For now I added this: <Create title="" footerButtonProps={{ style: { float: "left", marginLeft: "24px" }, }} </Create> Which does move it to the left