WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 3 years ago

Last modified 3 years ago

#40313 closed defect (bug) (fixed)

Admin bar search misalignment

Reported by: sagarprajapati Owned by: afercia
Milestone: 4.8 Priority: normal
Severity: normal Version:
Component: Toolbar Keywords: has-patch has-screenshots commit
Focuses: ui Cc:
PR Number:

Description

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

Attachments (4)

Admin Search bar.png (191.5 KB) - added by sagarprajapati 3 years ago.
40313.patch (541 bytes) - added by sagarprajapati 3 years ago.
40313.2.patch (525 bytes) - added by sagarprajapati 3 years ago.
40313.diff (849 bytes) - added by afercia 3 years ago.

Download all attachments as: .zip

Change History (14)

#1 @sagarprajapati
3 years ago

  • Keywords has-patch added

Hi,

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

Thanks

#2 @SergeyBiryukov
3 years ago

  • Component changed from General to Toolbar
  • Milestone changed from Awaiting Review to 4.8

#3 follow-up: @afercia
3 years ago

  • Keywords has-screenshots added

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:

https://cldup.com/I7SDkC3jYL.png

and Twenty Seventeen with styles:

https://cldup.com/ZXa_2Iz0FE.png

Twenty Sixteen

https://cldup.com/FaJdcBbN0M.png

Twenty Fifteen

https://cldup.com/Ma9McSOhp0.png

#4 in reply to: ↑ 3 ; follow-up: @SergeyBiryukov
3 years ago

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.

#5 in reply to: ↑ 4 @afercia
3 years ago

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".

#6 @sagarprajapati
3 years ago

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
3 years ago

#7 @afercia
3 years ago

  • Keywords commit added

@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.

#8 @afercia
3 years ago

  • Owner set to afercia
  • Resolution set to fixed
  • Status changed from new to closed

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.

#9 @afercia
3 years ago

  • Summary changed from Admin bar search height in not proper to Admin bar search misalignment

#10 @joyously
3 years ago

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.

Note: See TracTickets for help on using tickets.