Fluent UI 2 columns inside text element of dropdown option

Question

Is there any way to have two columns inside an dropdown option using fluent ui ?

The Problem is that i would like to style this so single-digit numbers align well to 2-digit or 3-digit numbers:

Thats why i thoughjt it would be better to have two columns and align the content with the numbers with "flex-end" and the second one with the text just normaly Any Ideas?

My Code for maping the options:

    let mainGroupOptions = Object.keys(dropDownOptions)
        .map(key => {
            return { key, text: dropDownOptions[key].value + " - " + dropDownOptions[key].label, value: dropDownOptions[key].value };
        });

Dropdown HTML code:

                        <Dropdown
                            label="Hauptgruppe*"
                            options={mainGroupOptions}
                            selectedKey={mainGroupSelected}
                            errorMessage={errors.mainGroup ? "Hauptgruppe erforderlich" : ''}
                            onChange={(e, option) => { setMainGroupSelected(option.key); deleteErrors(errors, errors.mainGroup) }}>
                        </Dropdown>

Have you tried using the option component? It should give you greater control of option formatting. — Donald Koscheka
– Donald Koscheka, Commented Apr 25, 2023 at 23:11

Donald Koscheka · Accepted Answer · 2023-04-26 00:04:08Z

I'm not exactly sure of what the format needs to look like but hopefully this gets you going in the right direction. You should be able to reduce this to a case of adjusting the styles to get what you need.

import {useState} from 'react';
import {
    Dropdown,
    makeStyles,
    Option,
  } from "@fluentui/react-components";

  const useStyles=makeStyles({
    option:{
        width:"1200px",
    },
    left:{
        float:"left",
        textAlign:"right",
        width:"20%",
    },
    right:{
        float:"right",
        textAlign:"left",
        width:"70%",
        marginLeft:"10px"
    },
  });

  let mainGroupOptions = [
    {
      key: '0',
      value:"Allgemeines"
    },
    {
      key: '00',
      value:"IHK-Gesetz und Organisation der Industrie-un..."
    },
    {
      key: '0000',
      value:"Allgemeines"
    },
  ];

export default function FormatOptions(){
    const c=useStyles();
    const {mainGroupSelected, setMainGroupSelected} = useState(0);
    return (
        <Dropdown
            label="Hauptgruppe*"
            selectedKey={mainGroupSelected}
            onChange={(e, option) => { setMainGroupSelected(option.key); deleteErrors(errors, errors.mainGroup) }}
        >
            {mainGroupOptions.map((option)=>(
                <Option key={option.key} >
                    <div className={c.option}>
                        <div className={c.left}>{option.key}</div>
                        <div className={c.right}>{option.value}</div>
                    </div>
                </Option>
            ))}
        </Dropdown>
    );
  }

Collectives™ on Stack Overflow

Fluent UI 2 columns inside text element of dropdown option

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related