How do I limit the max width of taxonomy fields?

Summary

This article provides guidance on using CSS adjustments to limit the maximum width of taxonomy fields in Label Studio. By setting the maxWidth attribute, users can control the width of taxonomy dropdowns to ensure that long texts do not overflow or cause layout issues. This is particularly useful for maintaining a clean and readable interface when dealing with extensive taxonomy options.

Troubleshooting steps

1. Identify the Taxonomy Field: Locate the taxonomy field in your labeling interface configuration. It will look something like this:

   <Taxonomy name="media" toName="title" maxUsages="1" leafsOnly="true" />
   

2. Add the maxWidth Attribute: To limit the maximum width of the taxonomy field, add the maxWidth attribute with a desired value. For example, to set the maximum width to 300 pixels:

   <Taxonomy name="media" toName="title" maxUsages="1" leafsOnly="true" maxWidth="300px" />
   

3. Adjust the Dropdown Width (if necessary): If the dropdown list is too narrow, you can also set the dropdownWidth attribute to ensure it fits the content. For example, to set the dropdown width to 500 pixels:

   <Taxonomy name="media" toName="title" maxUsages="1" leafsOnly="true" maxWidth="300px" dropdownWidth="500" />
   

4. Test the Changes: Save your changes and reload the Label Studio interface to ensure that the taxonomy field and dropdown now adhere to the specified width constraints.

5. Fallback to Old Version (if needed): If the new taxonomy settings do not meet your requirements, you can revert to the previous version by using the legacy attribute:

   <Taxonomy name="media" toName="title" legacy="true" />
   

More resources

• Label Studio Taxonomy Tag Documentation

By following these steps, you can effectively manage the width of taxonomy fields in Label Studio, ensuring a better user experience and interface layout.