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•12mo 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•12mo ago

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

optimistic-gold•12mo ago

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

fair-rose•12mo ago

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

fair-rose•12mo ago

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

optimistic-gold•12mo 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

fair-rose•12mo ago

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

optimistic-gold•12mo 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