Problem/Motivation

Search placeholder text is longer than the search box (see screenshot)
Search placeholder text is longer than the search box

Proposed resolution

Increase the width of search-box.

CommentFileSizeAuthor
#21 before-spanish.png20.59 KBmradcliffe
#21 after-spanish.png22.66 KBmradcliffe
#19 interdiff_15-19.txt875 bytesshaal
#19 drupal_core-umami-search-placeholder-3030936-19.patch538 bytesshaal
#16 drupal_core-umami-search-placeholder-3030936-15-IE11-narrow.jpg156.71 KBshaal
#16 drupal_core-umami-search-placeholder-3030936-15-IE11-wide.jpg390.4 KBshaal
#15 interdiff_2-15.txt1.06 KBshaal
#15 drupal_core-umami-search-placeholder-3030936-15.patch1.14 KBshaal
#14 interdiff_2-14.txt1.06 KBshaal
#13 Screen Shot 2019-03-12 at 17.16.44.png27.79 KBkjay
#11 Screenshot_2019-03-04 Inicio Umami Food Magazine.png11.95 KBsaesa
#8 ubuntu-firefox-65.0.png9.87 KBshaal
#8 ubuntu-google-chrome-72.0.3626.81.png12.32 KBshaal
#8 ubuntu-firefox-nightly-67.0a1.png9.88 KBshaal
#8 ubuntu-chromium-71.0.3578.98.png11.96 KBshaal
#6 FF_Version.png586.38 KBEli-T
#2 drupal_core-umami-search-placeholder-3030936-2.patch565 bytesshaal
#2 umami-search-placeholder-correct-width.png22.34 KBshaal
umami-search-placeholder-text.png5.14 KBshaal
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

shaal created an issue. See original summary.

shaal’s picture

shaal
he/him
Primary language English
Location Boca Raton, FL
CreditAttribution: shaal as a volunteer commented
Status: Active » Needs review
FileSize
umami-search-placeholder-correct-width.png22.34 KB
drupal_core-umami-search-placeholder-3030936-2.patch565 bytes

I created a patch that increases the search box's width from 14em to 15em.
The placeholder text is not blocked anymore.
This screenshot shows how it look after this patch is applied -
Search box in the correct width

Eli-T’s picture

Eli-T
he/him
Primary language English
Location Manchester
CreditAttribution: Eli-T commented

@shaal what browser is this on? Just tested on Chrome 71.0.3578.98 and FireFox 63.0.3 on MacOS 10.13.6 and the placeholder text fits comfortably without the patch.

bash247’s picture

bash247 CreditAttribution: bash247 commented

I'm having the same issue where the placeholder text doesn't fit in the search field. Browser - Firefox 65.0

bash247’s picture

bash247 CreditAttribution: bash247 commented 
+++ b/core/profiles/demo_umami/themes/umami/css/components/blocks/search/search.css
@@ -90,8 +90,8 @@
+  .search-block-form .form-search {

What's the reason behind being more specific?

Eli-T’s picture

Eli-T
he/him
Primary language English
Location Manchester
CreditAttribution: Eli-T commented
FileSize
FF_Version.png586.38 KB

I've just updated to the latest FF and still can't recreate

Screenshot showing Firefox at version 65 but the issue still stubbornly refusing to manifest itself

bash247’s picture

bash247 CreditAttribution: bash247 commented

Now that's a strange one.

I'm getting the same issue on Chrome too (72.0.3626.81). Screen res is - 2560x1440. OS - Ubuntu 16.04

shaal’s picture

shaal
he/him
Primary language English
Location Boca Raton, FL
CreditAttribution: shaal as a volunteer commented
FileSize
ubuntu-chromium-71.0.3578.98.png11.96 KB
ubuntu-firefox-nightly-67.0a1.png9.88 KB
ubuntu-google-chrome-72.0.3626.81.png12.32 KB
ubuntu-firefox-65.0.png9.87 KB

I'm running Ubuntu 18.10, Resolution 1920x1080,
I tested it on:

  • Chromium
  • Google Chrome
  • Firefox Nightly
  • Firefox

All of them had this issue.
(you can see the attached screenshot and the specific browser versions)

shaal’s picture

shaal
he/him
Primary language English
Location Boca Raton, FL
CreditAttribution: shaal as a volunteer commented

@eli-t I noticed this problem does not exist in 8.6.x, only in 8.7.x

@bash247 re #5: on /search page there are two separate class="form-search" so since the width is unique to each one of them, I thought it's better to specifiy.

Eli-T’s picture

Eli-T
he/him
Primary language English
Location Manchester
CreditAttribution: Eli-T commented

@shaal interesting. I only tested with 8.7.x.

saesa’s picture

saesa CreditAttribution: saesa at SDOS commented
FileSize
Screenshot_2019-03-04 Inicio Umami Food Magazine.png11.95 KB

I think the problem is of the style that does not fit the screen correctly.

search form

I'm running Ubuntu 18.04.02 LTS, Resolution 1366x768. FIrefox 65.0.1.

Version: 8.7.x-dev » 8.8.x-dev

Drupal 8.7.0-alpha1 will be released the week of March 11, 2019, which means new developments and disruptive changes should now be targeted against the 8.8.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

kjay’s picture

kjay CreditAttribution: kjay commented
Status: Needs review » Needs work
FileSize
Screen Shot 2019-03-12 at 17.16.44.png27.79 KB

Reviewed the patch on #2 and can confirm that the width of the field does increase as intended but this causes a responsive layout error with the user menu right at the breakpoint where the field first appears - see screenshot.

I am also unable to replicate the original issue, but with this patch only affecting this one field, I don't think this has any knock-on effects to be concerned about once the responsive issue is resolved.

As per @bash247's in #5, I'm not sure for the additional specificity but this patch doesn't seem to affect the search results page field which would be the likely issue of this being more specific.

Search placeholder text login issue.

shaal’s picture

shaal
he/him
Primary language English
Location Boca Raton, FL
CreditAttribution: shaal as a volunteer commented
Status: Needs work » Needs review
FileSize
interdiff_2-14.txt1.06 KB

(file upload failed)

shaal’s picture

shaal
he/him
Primary language English
Location Boca Raton, FL
CreditAttribution: shaal as a volunteer commented
FileSize
drupal_core-umami-search-placeholder-3030936-15.patch1.14 KB
interdiff_2-15.txt1.06 KB

I removed an extra flex legacy rule that was not needed anymore and caused the issue on #13

shaal’s picture

shaal
he/him
Primary language English
Location Boca Raton, FL
CreditAttribution: shaal as a volunteer commented
FileSize
drupal_core-umami-search-placeholder-3030936-15-IE11-wide.jpg390.4 KB
drupal_core-umami-search-placeholder-3030936-15-IE11-narrow.jpg156.71 KB

Preview of patch #15 on IE11:

Wide screen:
IE11 wide preview of patch #15

Narrow screen (just before search becomes a magnifying glass icon):
IE11 narrow preview of patch #15

kjay’s picture

kjay CreditAttribution: kjay commented
Status: Needs review » Reviewed & tested by the community

Looking good. I tested this in Safari and Chrome and this adds the extra horizontal width to the field, ensures the placeholder text is visible and has resolved the issue I raised in #13 where the user menu is pushed beneath the field at the breakpoint size.

Also tested logged in to ensure the additional menu items do not cause an issue. Looks good there as well.

Marking RTBC :)

mradcliffe’s picture

mradcliffe
he/him
Primary language English
CreditAttribution: mradcliffe at Kosada commented
Status: Reviewed & tested by the community » Needs work
Issue tags: +Needs reroll

The patch in comment #15 no longer applies on 8.8.x so I'm moving this back to Needs Work.

This also applies to Spanish. so we should check that the search box is long enough in Spanish. I think it is already.

shaal’s picture

shaal
he/him
Primary language English
Location Boca Raton, FL
CreditAttribution: shaal as a volunteer and at Palantir.net commented
Status: Needs work » Needs review
FileSize
drupal_core-umami-search-placeholder-3030936-19.patch538 bytes
interdiff_15-19.txt875 bytes

Rerolled patch.
Increased placeholder width to 18em in order to support Spanish.

gaddamsr’s picture

gaddamsr CreditAttribution: gaddamsr as a volunteer commented

Confirming that patch works . The placeholder in english is fully visible in the search bar

mradcliffe’s picture

mradcliffe
he/him
Primary language English
CreditAttribution: mradcliffe at Kosada commented
Issue tags: -Needs reroll
FileSize
after-spanish.png22.66 KB
before-spanish.png20.59 KB

I checked it in Spanish with @gaddamsr as well.

Removed Needs re-roll tag as we have a reroll. Thank you, @shaal!

mradcliffe’s picture

mradcliffe
he/him
Primary language English
CreditAttribution: mradcliffe at Kosada commented
Status: Needs review » Reviewed & tested by the community

Back to RTBC based on @kjay's review in #17 and reviewing @shaal's quick re-roll and @gaddamsr's review.

Edit: gaddasmsr did a re-roll as well at MidCamp 2019, but was not able to post it before shaal. So I asked him to review the re-rolled patch based on his own work.

Gábor Hojtsy’s picture

Gábor Hojtsy
he/him
Primary language Hungarian
Location Hungary
CreditAttribution: Gábor Hojtsy at Acquia commented

I don't think this can ever be fully attained, but better default looks in most browsers tested is still better than known issues we could easily fix.

Assigning credits.

Gábor Hojtsy’s picture

Gábor Hojtsy
he/him
Primary language Hungarian
Location Hungary
CreditAttribution: Gábor Hojtsy at Acquia commented
Version: 8.8.x-dev » 8.7.x-dev
Status: Reviewed & tested by the community » Fixed

Thanks all, committed!

  • Gábor Hojtsy committed 7bc4051 on 8.8.x 
    Issue #3030936 by shaal, mradcliffe, Eli-T, kjay, saesa, bash247,...

  • Gábor Hojtsy committed bba648d on 8.7.x 
    Issue #3030936 by shaal, mradcliffe, Eli-T, kjay, saesa, bash247,...

Status: Fixed » Closed (fixed)

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