I think there is an issue with the display. The search box display is bizarre.
Display issue

CommentFileSizeAuthor
#17 Screen Shot 2021-03-01 at 4.57.09 PM.png29.75 KBbriangon
#17 Screen Shot 2021-03-01 at 4.56.26 PM.png18.25 KBbriangon
#17 Screen Shot 2021-03-01 at 4.56.40 PM.png17.06 KBbriangon
#12 admin_toolbar_after_patch.png6.26 KBChrisSnyder
#12 admin_toolbar_before_patch.png6.35 KBChrisSnyder
#10 3153732-10-search-box-height-issue.patch429 bytesAaronChristian
#10 Screen Shot 2020-09-13 at 10.30.11 AM.png14.95 KBAaronChristian
#10 Screen Shot 2020-09-13 at 10.25.27 AM.png15.17 KBAaronChristian
#4 display-toolbar.png19.79 KBUNarain
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

UNarain created an issue. See original summary.

UNarain’s picture

UNarain CreditAttribution: UNarain commented
Title: Dislay issue » Display issue
romainj’s picture

romainj CreditAttribution: romainj as a volunteer commented

Could you provide any screenshot please?

UNarain’s picture

UNarain CreditAttribution: UNarain commented
Issue summary: View changes
FileSize
display-toolbar.png19.79 KB
adriancid’s picture

adriancid
Primary language Spanish
Location Montreal, Canada
CreditAttribution: adriancid as a volunteer and at Drupiter commented

I tested the module with the themes:
Claro
Seven
Bartik

And I can't see this problem.

UNarain’s picture

UNarain CreditAttribution: UNarain commented
Status: Active » Closed (works as designed)
briangon’s picture

briangon CreditAttribution: briangon commented

This is worth revisiting, I have the same display error. With bootstrap theme on pages that aren't the admin pages, the .form-control class overrides the input box height. And the margin-top set in rem is inconsistent with the admin pages because of custom theme font sizes. Height should probably be included in the #admin-toolbar-search-input style and the sizes should be kept px for consistency.

JasonLuttrell’s picture

JasonLuttrell
Location Washington, DC area
CreditAttribution: JasonLuttrell commented

I agree with the above comment, #7. The search field appears squished to me when I switched themes, which tells me there is a theme conflict. That said, I do not know whether the suggested CSS changes would completely fix the problem either. For example, the #admin-toolbar-search-input padding attribute also uses rem.

For what it's worth, I am using adminimal on the back end and a proprietary theme based on classy on the frontend.

AaronChristian’s picture

AaronChristian CreditAttribution: AaronChristian at ImageX commented
Title: Display issue » Search box height issue with frontend themes
AaronChristian’s picture

AaronChristian CreditAttribution: AaronChristian as a volunteer and at ImageX commented
FileSize
Screen Shot 2020-09-13 at 10.25.27 AM.png15.17 KB
Screen Shot 2020-09-13 at 10.30.11 AM.png14.95 KB
3153732-10-search-box-height-issue.patch429 bytes

I would agree, I've seen this on multiple installs when using a custom FE theme.

Rather than rework the padding with rem units (which will be dependant on current themes base font size), I think a simple fix is just to add a max-height on that particular input ID.

BEFORE:

Admin toolbar before

AFTER:

Admin toolbar after

AaronChristian’s picture

AaronChristian CreditAttribution: AaronChristian as a volunteer and at ImageX commented
Status: Closed (works as designed) » Needs review
ChrisSnyder’s picture

ChrisSnyder
he/him
CreditAttribution: ChrisSnyder as a volunteer and at Unleashed Technologies commented
Status: Needs review » Reviewed & tested by the community
FileSize
admin_toolbar_before_patch.png6.35 KB
admin_toolbar_after_patch.png6.26 KB

The patch provided in comment #10 worked for me.

Before patch:

Admin toolbar before patch.

After patch

Admin toolbar after patch.

I am using a bootstrap 4 based frontend theme.

romainj’s picture

romainj CreditAttribution: romainj as a volunteer commented

Commited to latest dev version.

romainj’s picture

romainj CreditAttribution: romainj as a volunteer commented
Status: Reviewed & tested by the community » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

briangon’s picture

briangon CreditAttribution: briangon commented
FileSize
Screen Shot 2021-03-01 at 4.56.40 PM.png17.06 KB
Screen Shot 2021-03-01 at 4.56.26 PM.png18.25 KB
Screen Shot 2021-03-01 at 4.57.09 PM.png29.75 KB

I logged back in today to bump this but I'm delighted to see it was addressed again.
Switched to 2.x-dev or 3.x-dev and the fix is present, thanks.

As #8 pointed out, other values still use rem. And in my case the margin-top is slightly off still. Would be best if this were a fixed px value as the rem leaves room for inconsistencies like this to happen.

A

B

C