Search Button Misaligned

City-of-Bloomington / drupal-theme-cob

COB Theme for the drupal website

https://bloomington.in.gov

GNU Affero General Public License v3.0

2 stars 1 forks source link

Search Button Misaligned #177

Closed rbdietz closed 4 years ago

rbdietz commented 5 years ago

Search button is misaligned in Chrome for Mac. Image 6-14-19 at 2 51 PM

adabutch commented 5 years ago

I've noticed this happening periodically too.

Related item(s) worth mentioning:

https://github.com/City-of-Bloomington/drupal-theme-cob/issues/149
The placeholder & input text value do not pass color contrast.
Focus outline (browser default) is hard to visually distinguish on top of blue/green.

inghamn commented 4 years ago

When the archive module is the first to render a page after a cache rebuild, the ID's on the search form input are given different names. Instead of "edit-actions" and "edit-submit", the archive module causes the render to use "edit-actions--2" and "edit-submit--2"

Because we use the "edit-actions" and "edit-submit" IDs as CSS selectors, these properties never get applied to the elements, and the display wonks (technical term) out.

inghamn commented 4 years ago

When some other page is the first render after cache clear, the archive route actually renders invalid HTML. The search form up at the top of the screen and the data navigation form for the archive listing both have elements with the same ID attribute (which is not valid and will cause CSS problems)

I don't know if we can prevent Drupal from rendering invalid HTML. Instead, I think we're going to have to try to avoid using the problematic IDs in CSS selectors.

This bug was reported in Drupal 7 and 8: Drupal 7 https://www.drupal.org/project/drupal/issues/2594955 Drupal 8 https://www.drupal.org/project/drupal/issues/2497909

adabutch commented 4 years ago

Proposed fix in PR #189