I used the following code to place float button group to the top right position. I controlled it with style
prop and it worked:
<FloatButton.Group
trigger="click"
type="primary"
shape="square"
style={{
right: 84,
top: 24,
}}
icon={<GlobalOutlined style={{ color: colors.red }} />}
closeIcon={<CloseOutlined style={{ color: colors.red }} />}
>
<FloatButton
tooltip={<div>English</div>}
description={"πΊπΈ"}
onClick={() => {
setLanguage("english");
}}
/>
<FloatButton
tooltip={<div>French</div>}
description={"fr"}
onClick={() => {
setLanguage("french");
}}
/>
</FloatButton.Group>;
I controlled it with
style={{
right: 84,
top: 24,
}}
However, something changed in the library and this code doesn’t work anymore. I saw that they use now style={{ insetInlineEnd: 24 }}
, for example but it is only for horizontal placement, I cannot figure out how to place them to the top right as I did before.
Thanks!
2
Answers
Inside of your
style
you can try adding:insetInlineEnd: 24
insetBlockStart: 24
also you could change your position to
fixed
.Don’t forget to remove your current styling.
You can keep your custom style, and update
justify-content
toflex-start
Demo: https://stackblitz.com/edit/react-hug9m3?file=demo.tsx