Javascript Question posted in
A very good W3school tutorial can be found here.

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

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!

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search