Label and buttons attached to a dropdown in Semantic UI React

Question

How can I have a Label and a Button.Group be attached to a Dropdown in Semantic UI for React?

The attached picture shows what I have currently. If I try using the attached attribute, the label or button group become nested within the dropdown.

Edit: Following is the Semantic UI React markup I currently have:

<Label size='big'>Code</Label>
<Dropdown
  options={options}
  placeholder='Choose a Patch'
  search
  selection
  allowAdditions
  value={value}
/>
<Button.Group>
  <Button icon='save' content='Save' color='green' />
  <Button.Or />
  <Button icon='clone' content='Clone' color='yellow' />
  <Button icon='cogs' />
</Button.Group>

@NitinBisht I've updated the question with the Semantic UI React markup I'm currently using. — Bjorn Thor Jonsson
– Bjorn Thor Jonsson, Commented May 2, 2018 at 10:51

fourpastmidnight · Accepted Answer · 2021-05-25 13:36:41Z

I got this to work with semantic-ui-react v2.0.3.

Here's the markup I used:

<Container className='refreshable-dropdown'>
  <Dropdown className='left attached refreshable-dropdown' multiple select />
  <Button className='refreshable-dropdown' attached='right' icon='refresh' />
</Container>

You can see I added a CSS class called refreshable-dropdown. I added a "refresh" button next to my dropdowns. Here's the CSS classes I used:

/* This is for "fluid" dropdowns that take the whole width of
 * their container.
 */
.ui.container.refreshable-dropdown {
  display: flex;
  flex-flow: row nowrap;
  width: 100%
}

/* If you want the dropdown "inline" with other content, apply
 * the inline CSS class
 */
.ui.container.refreshable-dropdown.inline {
  display: flex-inline;
  flex-flow: row nowrap;
}

.ui.attached.dropdown.refreshable-dropdown {
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.ui.attached.button.refreshable-dropdown {
    border: 1px solid #2185d0;  /* Specific to my button color */
    border-right: none;
    box-shadow: none !important;
    vertical-align: top;
}

.ui.attached.button.refreshable-dropdown:hover {
    border-color: #1678c2;  /* Specific to my button color*/
}

Note that I left the select attribute on the Dropdown. This causes some different HTML to be generated than other markdowns, so this may not be 100% applicable to your situation. But I hope it'll at least give you some inspiration for making this work for you. Oh, and here's the resulting dropdown:

Collectives™ on Stack Overflow

Label and buttons attached to a dropdown in Semantic UI React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related