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

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•2y ago

<@708254598820921435> kapa.ai is still learning and improving, please let us know how it did by reacting below

harsh-harlequinOP•2y ago

In a form we see the save button on the right side, but I want to have this on the left side

absent-sapphire•2y ago

Hey @blankia you can customize create and edit components with swizzle command from cli. https://refine.dev/docs/packages/documentation/cli/#commands

absent-sapphire•2y ago

All components with the Swizzle Ready flag can be customized with the swizzle command.

harsh-harlequinOP•2y 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

absent-sapphire•2y ago

https://refine.dev/docs/api-reference/antd/components/basic-views/create/#footerbuttonprops There is also footerButtonProps. Maybe it can be done with css.

harsh-harlequinOP•2y 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

How to position a button on the left side

Did you find this page helpful?