Problem/Motivation


The search field is rounded both as another opportunity to introduce friendliness into the UI, but also follows a tendency for search fields to be rounded in some browsers and operating systems.

Grouping the single text field and the submit button together simplifies the component and implies a one-to-one relationship between the two. There is also an opportunity to create a bootstap-style input group component.

The dropdown menu is intentionally designed as a distinct component (see the section Dropdowns and Popovers) for modularity of the design and code reusability. Visually and in terms of implementation, merging or joining the search field with the drop down is both awkward and not strictly necessary for usability.

API changes

Some mark up changes

CommentFileSizeAuthor
#18 win7_chrome_small_screen.png41.25 KBNikolay Shapovalov
#17 win7_ie.png17.95 KBNikolay Shapovalov
#17 win7_chrome.png19.69 KBNikolay Shapovalov
#13 2160545-search-component-13.patch3.71 KBemma.maria
1986418-node-add-fielderror.png51.84 KBtompagabor
#10 2160545-search-component-10.patch3.65 KBtompagabor
#10 search-form-shadow-nocut.png13.96 KBtompagabor
#9 Screen Shot 2014-02-28 at 11.50.34.jpg133.02 KBLewisNyman
#9 2160545-search-component-9.patch3.64 KBLewisNyman
#3 Screen Shot 2013-12-20 at 15.34.44.jpg208 KBLewisNyman
#3 Screen Shot 2013-12-20 at 15.34.31.jpg232.37 KBLewisNyman
#3 Screen Shot 2013-12-20 at 15.34.25.jpg242.12 KBLewisNyman
#3 Screen Shot 2013-12-20 at 15.33.27.jpg228.24 KBLewisNyman
4.search-field.png27.14 KBLewisNyman
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

LewisNyman’s picture

LewisNyman
he/him
CreditAttribution: LewisNyman commented
Issue summary: View changes
LewisNyman’s picture

LewisNyman
he/him
CreditAttribution: LewisNyman commented
Issue tags: +styleguide, +CSS, +markup, +Theme Component Library
LewisNyman’s picture

LewisNyman
he/him
CreditAttribution: LewisNyman commented
FileSize
Screen Shot 2013-12-20 at 15.33.27.jpg228.24 KB
Screen Shot 2013-12-20 at 15.34.25.jpg242.12 KB
Screen Shot 2013-12-20 at 15.34.31.jpg232.37 KB
Screen Shot 2013-12-20 at 15.34.44.jpg208 KB

Here are a few examples of pages that use single input search/filter forms:



LewisNyman’s picture

LewisNyman
he/him
CreditAttribution: LewisNyman commented
Related issues: +#1986418: Update textfield & textarea style
dawehner’s picture

dawehner
Primary language German
CreditAttribution: dawehner commented

Interesting to have a common approach for all those forms.

Can you please remove the last example? This is just wrong, given that this is no search functionality.

LewisNyman’s picture

LewisNyman
he/him
CreditAttribution: LewisNyman commented

Sure thing.

LewisNyman’s picture

LewisNyman
he/him
CreditAttribution: LewisNyman commented
Issue tags: +DrupalCampLDN
LewisNyman’s picture

LewisNyman
he/him
CreditAttribution: LewisNyman commented
Title: Create search component » Create search/filter component
LewisNyman’s picture

LewisNyman
he/him
CreditAttribution: LewisNyman commented
FileSize
2160545-search-component-9.patch3.64 KB
Screen Shot 2014-02-28 at 11.50.34.jpg133.02 KB

Here's a proposal patch implemented on the module page. You have to apply it alongside #1986418: Update textfield & textarea style

The submit button doesn't do anything yet and we'll have to override it with JS.

tompagabor’s picture

tompagabor CreditAttribution: tompagabor commented
FileSize
search-form-shadow-nocut.png13.96 KB
2160545-search-component-10.patch3.65 KB

Add a newy patch, because overflow: hidden, and overflow: auto cut box-shadow, on the left side.
Used position relative/absolute, instead of floating.

search form with visible box-shadow

LewisNyman’s picture

LewisNyman
he/him
CreditAttribution: LewisNyman commented
Status: Active » Needs review
emma.maria’s picture

emma.maria
she/her
CreditAttribution: emma.maria commented
FileSize
2160545-search-component-13.patch3.71 KB

Patch re-rolled :)

LewisNyman’s picture

LewisNyman
he/him
CreditAttribution: LewisNyman commented

This is looking good, is it a good idea to have a set width like that? What if people need it to be shorter or wider than 200px?

Nikolay Shapovalov’s picture

Nikolay Shapovalov
Primary language Russian
CreditAttribution: Nikolay Shapovalov commented
Assigned: Unassigned » Nikolay Shapovalov
Nikolay Shapovalov’s picture

Nikolay Shapovalov
Primary language Russian
CreditAttribution: Nikolay Shapovalov commented
Issue tags: +drupalcampfi
Nikolay Shapovalov’s picture

Nikolay Shapovalov
Primary language Russian
CreditAttribution: Nikolay Shapovalov commented
Status: Needs review » Needs work
FileSize
win7_chrome.png19.69 KB
win7_ie.png17.95 KB

I have tested the patch #13 on windows 7.
There are several bugs:

  • left corner isn't rounded
  • submit button is on the next line

IE 11:
IE 11
Google Chrome:
Google Chrome

Nikolay Shapovalov’s picture

Nikolay Shapovalov
Primary language Russian
CreditAttribution: Nikolay Shapovalov commented
FileSize
win7_chrome_small_screen.png41.25 KB

About pacth #13
There is semicolon required at the end after position:absolute.

+++ b/core/themes/seven/css/components/input-group.css
@@ -0,0 +1,25 @@
+.input-group .form-submit {
+  position: absolute

Also there is an issue with submit button width on mobile device.
Google Chrome:
Google Chrome

Nikolay Shapovalov’s picture

Nikolay Shapovalov
Primary language Russian
CreditAttribution: Nikolay Shapovalov commented
Assigned: Nikolay Shapovalov » Unassigned
sqndr’s picture

sqndr CreditAttribution: sqndr commented
Assigned: Unassigned » sqndr

Picking up this issue. I ended up with some css that looked like this:

.input-group {
  position: relative;
}
.input-group .form-item {
  width: 100%;
}
.input-group input.form-search {
     width: 75%;
     padding: .3em .4em .355em .5em;
     border-right: 0; /* LTR */
     border-top-right-radius: 0; /* LTR */
     border-bottom-right-radius: 0; /* LTR */
 }
.form-wrapper.input-group .form-submit {
    width: 25%;
    position: absolute;
    margin: 0;
    top: 0;
    right: 0;
    border-top-left-radius: 0; /* LTR */
    border-bottom-left-radius: 0; /* LTR */
}

@media screen and (max-width: 600px) {
  .input-group input.form-search {
    padding: .3em .4em .3em .5em;
  }
}

Looked good in chrome ... but then I opened Firefox, and there were some layout issues again. Seems like this still needs some work. Maybe we can look into Bootstrap and see how the form group is styled there?

Chrome:
http://cl.ly/image/12083J023x3k
http://cl.ly/image/431k410n0h0S
http://cl.ly/image/183b082e0216

sqndr’s picture

sqndr CreditAttribution: sqndr commented
Assigned: sqndr » Unassigned
Bojhan’s picture

Bojhan CreditAttribution: Bojhan commented
Issue tags: +frontend
LewisNyman’s picture

LewisNyman
he/him
CreditAttribution: LewisNyman commented
Issue tags: -markup, -DrupalCampLDN, -drupalcampfi

I think we can take a new approach with this and specify the component similar to Bootstrap:

.input-group
.input-group .form-item
.input-group__add-on

Then we don't have to assume a specific element is the special case.

emma.maria’s picture

emma.maria
she/her
CreditAttribution: emma.maria at TES Global commented
Version: 8.0.x-dev » 8.2.x-dev

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.0-beta1 was released on August 3, 2016, which means new developments and disruptive changes should now be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.3.x-dev » 8.4.x-dev

Drupal 8.3.0-alpha1 will be released the week of January 30, 2017, which means new developments and disruptive changes should now be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.4.x-dev » 8.5.x-dev

Drupal 8.4.0-alpha1 will be released the week of July 31, 2017, which means new developments and disruptive changes should now be targeted against the 8.5.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.5.x-dev » 8.6.x-dev

Drupal 8.5.0-alpha1 will be released the week of January 17, 2018, which means new developments and disruptive changes should now be targeted against the 8.6.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

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

Drupal 8.6.0-alpha1 will be released the week of July 16, 2018, which means new developments and disruptive changes should now be targeted against the 8.7.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

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.

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

Drupal 8.8.0-alpha1 will be released the week of October 14th, 2019, which means new developments and disruptive changes should now be targeted against the 8.9.x-dev branch. (Any changes to 8.9.x will also be committed to 9.0.x in preparation for Drupal 9’s release, but some changes like significant feature additions will be deferred to 9.1.x.). For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.9.x-dev » 9.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

markconroy’s picture

markconroy CreditAttribution: markconroy at Annertech commented
Component: Seven theme » theme system

Let's move this to the theme system queue. Looks like it's relevant to Drupal rather than just Seven theme.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.