CODEWITHSUNDEEP
javascriptcssreactjssemantic-ui
Sheildboy
Sheildboy

Reputation: 87

How to increase the height of individual options in Semantic UI?

Is it possible to change the height of the individual option in Semantic UI React? or Is there any way to override the CSS class. I can apply inline style on the drop-down component

 import React from 'react'
    import { Dropdown } from 'semantic-ui-react'
    import './currency-convertor.styles.css'
    
    const friendOptions = [
      {
        key: 'Jenny Hess',
        text: 'Jenny Hess',
        value: 'Jenny Hess',
        image: { avatar: true, src: '/images/avatar/small/jenny.jpg' },
      },
      {
        key: 'Elliot Fu',
        text: 'Elliot Fu',
        value: 'Elliot Fu',
     }
    ]
    
    const DropdownExampleSelection = () => (
      <Dropdown
       style={{width:'300px', height:'80px',fontSize:'20px'}}
       placeholder='Select Country'
        fluid
        search
        selection
        options={friendOptions}
      />
    )
    
    export default DropdownExampleSelection

Upvotes: 2

Views: 816

Answers (1)

Jason Parra
Jason Parra

Reputation: 97

There are two ways to change or overwrite semantic-ui styles in react, one is use the !important param in your css module or modify the react index.css with the semantic-ui class name.

In your case to achieve this, you need to use dropdown with <Dropdown.Menu> and <Dropdown.Item>, for specifying the exact item to modify:

<Dropdown text='Select Country'> 
 <Dropdown.Menu> 
  <Dropdown.Item text='Jenny Hess' /> 
  <Dropdown.Item text='Elliot Fu' style={{width:'300px', height:'80px',fontSize:'20px'}} />
 </Dropdown.Menu>
</Dropdown>

Then you need to map each friendOptions with his own style if it is needed.

import React from 'react'
import { Dropdown } from 'semantic-ui-react'
import './currency-convertor.styles.css'

const friendOptions = [
  {
    key: 'Jenny Hess',
    text: 'Jenny Hess',
    value: 'Jenny Hess',
    image: { avatar: true, src: '/images/avatar/small/jenny.jpg' },
    style: { width:'300px', height:'80px',fontSize:'20px'}
  },
  {
    key: 'Elliot Fu',
    text: 'Elliot Fu',
    value: 'Elliot Fu',
 }
]

const DropdownExampleSelection = () => (
  <Dropdown text='Select Country'>
   <Dropdown.Menu>
    {friendOptions.map(item=><Dropdown.Item text={item.text} style={item.style || {}} /> )}        
   </Dropdown.Menu>
 </Dropdown>
)

export default DropdownExampleSelection

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

This should work, sorry for my English.

Upvotes: 2

Related Questions