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:
----------------------<@708254598820921435> kapa.ai is still learning and improving, please let us know how it did by reacting below
fair-rose•14mo ago
In a form we see the save button on the right side, but I want to have this on the left side
fascinating-indigo•14mo ago
Hey @blankia you can customize
create
and edit
components with swizzle
command from cli
.
https://refine.dev/docs/packages/documentation/cli/#commandsfascinating-indigo•14mo ago
All components with the
Swizzle Ready
flag can be customized with the swizzle
command.![No description](https://cdn.answeroverflow.com/1136575032307486750/image.png)
fair-rose•14mo 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
fascinating-indigo•14mo ago
https://refine.dev/docs/api-reference/antd/components/basic-views/create/#footerbuttonprops
There is also
footerButtonProps
. Maybe it can be done with css.fair-rose•14mo 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