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).

you want to create same size between button and dropdown right ? — Rizal Sidik, Sep 06 '17 at 07:57

score 3 · Answer 1 · answered Sep 06 '17 at 08:01

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

answered Sep 06 '17 at 08:01

Rizal Sidik

939
5
15

Looks like the result I want .. I'll check and get back. – Dan Sep 06 '17 at 11:33
Works fine. My Dropdown had a "button" option set, replaced that with "simple item" as you have and all was OK. – Dan Sep 06 '17 at 19:52
Note that this introduces unwanted padding to the `Dropdown` (at least these days) which will be a problem on, e.g., `inverted` backgrounds, etc. – basse May 13 '20 at 09:24

score 3 · Answer 2 · answered Jan 16 '19 at 15:16

3

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'>

answered Jan 16 '19 at 15:16

Andrew B.

1,146
1
12
18

1

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. – basse May 13 '20 at 09:35
@basse 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... – Andrew B. May 13 '20 at 18:34

score 2 · Accepted Answer · answered Jun 26 '20 at 21:22

2

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>

answered Jun 26 '20 at 21:22

eveevans

4,148
2
26
37

This does indeed seem to be the neatest solution,
does not have prop 'size' acc to the SUI React docs, but I see it is in the std SUI docs.
– Dan Dec 13 '20 at 10:24

score 1 · Answer 4 · answered May 18 '20 at 18:47

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;
}

score 0 · Answer 5 · answered May 21 '19 at 18:01

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

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

5 Answers5