[Dropdown] Form’s styles override the search in-menu’s width

[RigobertoFelix]

Placing an ui search input inside a dropdown in a form gets a wrong size.

[awgv]

Hi, please provide a test case as per our contributing guidelines; you can fork this JSFiddle.

[RigobertoFelix]

Here is an example in jsfiddle http://jsfiddle.net/o364q86L/

[awgv]

It seems that .ui.form .field .ui.input’s width overrides .ui.dropdown .menu > .input’width.

[RigobertoFelix]

i'm in love of semantic ui, if there's anything that i can help in the future I would do it with pleasure, by the way is there any way to fix it quickly?

[awgv]

@RigobertoFelix Sure, it’s very easy; open installation_folder/src/site/modules/dropdown.overrides, put the following there, then rebuild the framework:

.ui.dropdown .menu > .input {
  width: auto !important;
  display: flex;
  margin: @menuInputMargin;
  min-width: @menuInputMinWidth;
}

[stale]

There has been no activity in this thread for 90 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 90 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!