How to place antd FloatButton.Group in the right top position?

Question

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!

Answer 1

You can keep your custom style, and update justify-content to flex-start

style={{ right: 84, top: 24, justifyContent: 'flex-start' }}

Demo: https://stackblitz.com/edit/react-hug9m3?file=demo.tsx