Admin bar search misalignment

[sagarprajapati]

Hi,

Frontside Admin bar search height in not proper design. Need some CSS to be done for make it proper aligns. Please check screenshot for more.

Thanks

[sagarprajapati]

Hi,

I have attached patch for the patch for the above issue.

Thanks

[afercia]

This is probably more a conflict with the Theme style. For example, Twenty Seventeen sets all the input fields to display: block using a selector that's a bit too generic and selects also the admin bar search field. Changing the current style would probably break the search field when using other themes.

To reduce the chances of conflicts, maybe the admin bar styles should have a higher specificity and explicitly set CSS properties that could be overridden by themes or plugins.

To see the default WordPress style, I'd suggest to remove the theme style using the browser inspector. For example, this is Twenty Seventeen with no styles:

and Twenty Seventeen with styles:

Twenty Sixteen

Twenty Fifteen

[SergeyBiryukov]

Replying to afercia:

To reduce the chances of conflicts, maybe the admin bar styles should have a higher specificity and explicitly set CSS properties that could be overridden by themes or plugins.

The current selector​ seems specific enough :) Adding display: inline-block; to that block (instead of adjusting the height) should resolve the issue.

[afercia]

Replying to SergeyBiryukov:

The current selector​ seems specific enough :)

Oh yes :)

Adding display: inline-block; to that block (instead of adjusting the height) should resolve the issue.

Right, maybe worth checking if there are other properties that could be inherited and should be added as "defaults".

[sagarprajapati]

HI @SergeyBiryukov and @afercia

I have checked it in few popular WordPress themes. I have found that only display: inline-block; will not solve the problem. For some of the themes, we need to add display: inline-block; and float: inherit; both. then it works.

I have also attached screenshot for your review.

​http://i.imgur.com/VrsXMsz.png
​http://i.imgur.com/nEtVXdR.png
​http://i.imgur.com/yvjn5sY.png
​http://i.imgur.com/pVqLwBk.png
​http://i.imgur.com/o94zvIM.png
​http://i.imgur.com/ae3snis.png
​http://i.imgur.com/7n2IqdJ.png
​http://i.imgur.com/LRUzdgU.png
​http://i.imgur.com/CBGyiFg.png
​http://i.imgur.com/iVepDof.png

Also added patch with changes.

Thanks

[afercia]

@sagarprajapati thanks for the refreshed patch and the screenshots!
For the future, there might be the need to reset other properties too. For now, I've just added text-indent: 0; (just in case) and an inline comment to document a bit what this CSS rule is meant for.

[afercia]

In 40418:

Toolbar: Reset CSS properties that might be inherited from the active Theme.

The Toolbar search field, when the Toolbar is displayed on the frontend, might
inherit CSS properties from the active Theme stylesheet. For example, this
happened with Twenty Seventeen that sets display: block; on all the input
fields. Thus, there's the need to reset some CSS properties to avoid inheritance.

Props @sagarprajapati.
Fixes #40313.

[joyously]

Just for the record, themes are not supposed to change the admin bar, so the theme should be more careful. But it is good for the admin bar to be explicit about its formatting.