Search button is misaligned to the input field

• Type: Regression Bug
• Status: Closed
• Resolution: No Longer Reproducible
• Affects Version/s: Master
• Fix Version/s: None
• Component/s: Liferay Themes
• Labels:
  • css_custom_properties
• Fix Priority: 2
• Sprint: S04E08 - 3Fs

Description

Using the ClayDropDown.Search component, the search button is not aligned to the input field.

The height property of the following css is making this happen.

 
{{ path: /modules/apps/frontend-theme/frontend-theme-classic/src/css/custom_properties/_custom_properties_set.scss}}

.input-group-inset-item {
 background-color: var(--input-bg);
 border-color: var(--input-border-color);
 border-radius: 0 var(-input-border-radius) var(-input-border-radius) 0;
 border-width: var(-input-border-width) var(-input-border-width)
 var(--input-border-width) 0;
 color: var(--input-color);
 height: var(--input-height);
 line-height: var(--input-line-height);
 padding-left: var(--input-group-inset-item-padding-left);
 padding-right: var(--input-group-inset-item-padding-right); &.input-group-inset-item-before{ border-radius: var(--input-border-radius) 0 0 var(--input-border-radius); border-width: var(--input-border-width) 0 var(--input-border-width) var(--input-border-width); }}