How to set Semantic UI Dropdown size to match buttons, etc

Question

Semantic UI has a great way to apply common sizing to a lot of things, e.g. a button (in Semantic UI React):

<Button size="tiny"  />

However the Dropdown, which in many cases looks just like a button and is placed on a row with buttons, does not appear to take the "size" parameter.

https://react.semantic-ui.com/modules/dropdown

Is there a good way to apply the same size to the dropdown as to other elements e.g. Buttons in a row? (i.e. not just fiddling with custom CSS, but something more maintainable).

Amylum

you want to create same size between button and dropdown right ? – Smut

Answer 1

I think the right way should be wrap it inside a form, and apply the size classes to the form. The form could be a form tag, but also could be div:

<form className='ui form small'>
 <Dropdown>

or

<div className='ui form mini'>
 <Dropdown>

Yonina

This does indeed seem to be the neatest solution, <Form> does not have prop 'size' acc to the SUI React docs, but I see it is in the std SUI docs. – Amylum

Answer 2

Assuming your Dropdown has the button option set, you can pass the size you want in the className prop. For example:

<Dropdown text='Add Friend' icon='plus' labeled button className='icon tiny'> 

Tazza

This was the only answer I found to work properly. However, I had to remove the labeled attribute and the icon class in order to have the dropdown's arrow icon be placed correctly. – Antitank

@Antitank Thank you for the suggested edit! I'm leaving my answer as-is because it worked for a certain version of semantic-ui, and their API might change again... – Tazza

Answer 3

I think this is if you want to create the same size between dropdown and another component like button using size attribut, you can put the dropdown inside the button :

import React from 'react'
import { Dropdown, Menu, Button } from 'semantic-ui-react'

const options = [
  { key: 1, text: 'Choice 1', value: 1 },
  { key: 2, text: 'Choice 2', value: 2 },
  { key: 3, text: 'Choice 3', value: 3 },
]

const DropdownExampleSimple = () => (
  <div>
    <Button size="tiny" >
      <Dropdown text='Dropdown' options={options} simple item />
    </Button>
    <Button size="tiny">
      This is Button
    </Button>
  </div>
)

export default DropdownExampleSimple

this is the result :

Maybe can help you, thanks

Smut

Looks like the result I want .. I'll check and get back. – Amylum

Works fine. My Dropdown had a "button" option set, replaced that with "simple item" as you have and all was OK. – Amylum

Note that this introduces unwanted padding to the Dropdown (at least these days) which will be a problem on, e.g., inverted backgrounds, etc. – Antitank

Answer 4

I had referenced this answer to find the solution. I had to give a css class of line-height: unset; (which may override a default line-height for the same class).

HTML

<Dropdown className="equal-dropdown-height" placeholder="State" options={stateOptions} search selection />

CSS

.equal-dropdown-height .text {
  line-height: unset;
}

Asch

Answer 5

A flexible way to do this is to pass in icon={null} and then set the trigger property to whatever node you want to display:

import React from 'react'
import { Dropdown, Icon } from 'semantic-ui-react'

const LargeIconDropdown = () => (
    <Dropdown
        icon={null}
        trigger={
            <Icon
                link
                name='ellipsis vertical'
                size='large'
            />
        }>
        <Dropdown.Menu>
            <Dropdown.Item
                icon='pencil'
                text='Edit'
            />
        </Dropdown.Menu>
    </Dropdown>
)

export default LargeIconDropdown

You can find an example of this in the Semantic UI React Dropdown Documentation here

Footsore