Problem/Motivation

Search form block enabled in header region of Bartik Theme does not show the typed text.

The entered search text in the Search form block does not display, seems the font color is set to white due to which the typed text does not appear. This only happens when the Search form block is enabled in header section.

Proposed resolution

# Add correct color, #000000, so that the typed text is visible.

Remaining tasks

User interface changes

Before patch:

After applying patch:

API changes

None

CommentFileSizeAuthor
#15 search_before.png11.94 KBRade
#13 2281451-screenshot.png105.4 KBolav
#11 bartik_search_form_header-2281451-11.patch378 bytesnathanlawsn
#7 Welcome_to_sdcb4ed4bfd19125_s2_simplytest_me___sdcb4ed4bfd19125_s2_simplytest_me.jpg301.41 KBRick Hood
#6 bartik_search_form_header-2281451-6.patch411 bytesMukeysh
#5 bartik_search_form_header-2281451-5.patch411 bytesdervishmoose
#4 bartik_search_form_header-2281451-4.patch0 bytesdervishmoose
#2 bartik_search_form_header-2281451-2.patch616 bytesMukeysh
Welcome to drupal8.dev drupal8.dev_.png67.98 KBa_thakur
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

a_thakur’s picture

a_thakur CreditAttribution: a_thakur commented
Status: Active » Needs work
Mukeysh’s picture

Mukeysh CreditAttribution: Mukeysh commented
Status: Needs work » Needs review
FileSize
bartik_search_form_header-2281451-2.patch616 bytes

Please find the patch which fixes the issue.

dervishmoose’s picture

dervishmoose CreditAttribution: dervishmoose commented 
+++ b/core/themes/bartik/css/style.css
@@ -420,7 +420,8 @@ h1.site-name {
-.region-header .form-text {
+.region-header .form-text,
+.region-header .form-search {
   background: #fefefe;

Adding form text and form search to this class produces a more useable search box, but causes issues. Suggest a simple .region-header .form-search {
color: #000000;
}

dervishmoose’s picture

dervishmoose CreditAttribution: dervishmoose commented
FileSize
bartik_search_form_header-2281451-4.patch0 bytes

Added
.region-header .form-search {
color: #000000;
}

dervishmoose’s picture

dervishmoose CreditAttribution: dervishmoose commented
FileSize
bartik_search_form_header-2281451-5.patch411 bytes

Fixed patch

Mukeysh’s picture

Mukeysh CreditAttribution: Mukeysh commented
FileSize
bartik_search_form_header-2281451-6.patch411 bytes

The color should be #3b3b3b as in the other forms. Please find the patch which fixes this issue.

Rick Hood’s picture

Rick Hood CreditAttribution: Rick Hood commented
FileSize
Welcome_to_sdcb4ed4bfd19125_s2_simplytest_me___sdcb4ed4bfd19125_s2_simplytest_me.jpg301.41 KB

Confirming I get #3b3b3b; for text in search.

Rick Hood’s picture

Rick Hood CreditAttribution: Rick Hood commented
Status: Needs review » Reviewed & tested by the community
alexpott’s picture

alexpott
he/they
Primary language English
Location 🇪🇺🌍
CreditAttribution: alexpott commented
Status: Reviewed & tested by the community » Needs work

This also occurs if you put the search block in the footer region. And this would also occur with any other forms... eg if you move the login form into the header - well that actually uses the .region-header .form-text. Anyhow I think this issue indicates we have a bigger problem with places forms in the header and footer regions of bartik.

EDIT: fix code block

nathanlawsn’s picture

nathanlawsn CreditAttribution: nathanlawsn commented
Assigned: Unassigned » nathanlawsn
nathanlawsn’s picture

nathanlawsn CreditAttribution: nathanlawsn commented
Assigned: nathanlawsn » Unassigned
Status: Needs work » Needs review
Issue tags: +Amsterdam2014
FileSize
bartik_search_form_header-2281451-11.patch378 bytes

Submitting patch which fixes the issue.

criscom’s picture

criscom
Location Graz, Austria
CreditAttribution: criscom commented

Going to test the patch.

olav’s picture

olav CreditAttribution: olav commented
Status: Needs review » Reviewed & tested by the community
FileSize
2281451-screenshot.png105.4 KB

The patch applied cleanly for me.
It even does the right thing -
screenshot of frontend with applied patch

Rade’s picture

Rade CreditAttribution: Rade commented

I also tested this and the latest patch works fine. Agreeing with the RTBC.

Rade’s picture

Rade CreditAttribution: Rade commented
Issue summary: View changes
FileSize
search_before.png11.94 KB
yanniboi’s picture

yanniboi CreditAttribution: yanniboi commented

The patch in number 11 addresses @alexpott's concern about region specific text. The color of the text in the form element does not have a sensible default which is why the color of a region impacts it (eg. white in header). The new patch sets a default color on form elements. Since the default for form element backgrounds is white everywhere on the site, grey is a good default for the color and will not have any negative side effects elsewhere.

The color #3b3b3b that was chosen to be the default was chosen because that is the color of the text in other regions (eg. first sidebar or content).

emma.maria’s picture

emma.maria
she/her
CreditAttribution: emma.maria commented

Before the search element was moved to the header it was using #3b3b3b as the text color.
Therefore it should keep this colour in the header and the most recent patch contains this.
110% agree with RTBC, great work @nathanlawson91!

alexpott’s picture

alexpott
he/they
Primary language English
Location 🇪🇺🌍
CreditAttribution: alexpott commented
Status: Reviewed & tested by the community » Fixed

Committed 67af636 and pushed to 8.0.x. Thanks!

Thanks for addressing my concerns.

  • alexpott committed 67af636 on 8.0.x 
    Issue #2281451 by xgen2, Mukeysh, nathanlawson91 | a_thakur: Fixed...

Status: Fixed » Closed (fixed)

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