Dropdown option containing two columns of Fluent UI text elements

Question

Dropdown option containing two columns of Fluent UI text elements

Is there a way to customize a dropdown option in Fluent UI with two columns?

The issue I'm facing is that I need single-digit numbers to align properly with 2-digit or 3-digit numbers:

I believe having two columns and using "flex-end" for number alignment in the first column, while keeping text aligned normally in the second, could be a potential solution. Any thoughts on this approach?

This is the code snippet I use to map the dropdown options:

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

Below is the HTML code for the Dropdown component:

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

typescript dropdown styling fluent-ui

Answer 1

Answer №1

Not entirely certain about the specific format requirements, but hopefully this will provide some guidance in the right direction. The key here is to customize the styles in order to achieve the desired outcome.

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:"General"
    },
    {
      key: '00',
      value:"Chamber of Commerce Law and Industry Organization ..."
    },
    {
      key: '0000',
      value:"General"
    },
  ];

export default function FormatSelect(){
    const c=useStyles();
    const {mainGroupSelected, setMainGroupSelected} = useState(0);
    return (
        <Dropdown
            label="Main Group*"
            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>
    );
  }

Answer 2

Not entirely certain about the specific format requirements, but hopefully this will provide some guidance in the right direction. The key here is to customize the styles in order to achieve the desired outcome.

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:"General"
    },
    {
      key: '00',
      value:"Chamber of Commerce Law and Industry Organization ..."
    },
    {
      key: '0000',
      value:"General"
    },
  ];

export default function FormatSelect(){
    const c=useStyles();
    const {mainGroupSelected, setMainGroupSelected} = useState(0);
    return (
        <Dropdown
            label="Main Group*"
            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>
    );
  }

Dropdown option containing two columns of Fluent UI text elements

Answer №1

Similar questions

What is the best approach to restructuring route endpoints into an ORM framework?

Unlock the Power of Typography in React with Material UI Styled Components

GitLab's CI/CD pipeline is unable to detect ts-node even though it has already been

Error: Unable to locate the reference for "foo" while utilizing TypeScript in combination with Webpack

A function in Typescript is created to handle diverse input types in a generic manner

Having difficulty transferring types to and from a custom module?

Choose the property category

Setting up Jest to run in WebStorm for a Vue project with TypeScript can be done through

Converting hierarchical JSON to nested dropdowns in Laravel

Changing the function to operate asynchronously

Ways to decrease the size of this item while maintaining its child components?

Having difficulty retrieving the file from Google Drive through googleapis

The element type 'ReactElement<any>' does not match a JSX element constructor function. 'undefined' cannot be assigned to type 'Element | null'

The front end is displaying an empty object, although it is showing up when logged in the console using ngFor

Is there a way to transfer data to a different component in React without relying on a hierarchical parent-child relationship?

The webpack "externals" option is reporting an error due to an unexpected character "@" being used

Nativescript encountered an error due to an undefined variable called FIRAuth

Obtaining the names of class decorators in TypeScript source code

Is it possible to continuously re-render a React Functional Component with Axios and useState/useEffect?

Determining the return type depending on an optional generic parameter