Problem/Motivation

Autocomplete field inputs lack appropriate styles for smaller screens in Bartik, so they break the layout:

This issue does not occur in Seven or Olivero so I think it's specific to Bartik.

Follow up from #3135137: Views exposed filters with autocomplete are much wider than text filters

Steps to reproduce

  1. Install Drupal
  2. Create a view with an autocomplete exposed filter
  3. Display the view in Bartik via a page or a block
  4. View it on a smaller screen
  5. See that the autocomplete field is too wide

Proposed resolution

Add some CSS to handle this field on smaller screens, as with Seven: https://git.drupalcode.org/project/drupal/-/blob/9.2.x/core/themes/seven...

Remaining tasks

  • Patch / merge request with CSS update
  • Review

User interface changes

N/A

API changes

N/A

Data model changes

N/A

Release notes snippet

N/A

CommentFileSizeAuthor
#34 tablet.jpg9.25 KBgaurav-mathur
#34 samsung.jpg5.68 KBgaurav-mathur
#34 iphone-12.jpg5.12 KBgaurav-mathur
#24 After Patch 3192254 up Android.png239.13 KBchetanbharambe
#24 After Patch 3192254 up iPhone.png237.31 KBchetanbharambe
#24 Before Patch 3192254 up.png273.71 KBchetanbharambe
#18 After Patch 3192254 one.png248.17 KBchetanbharambe
#18 After Patch 3192254.png256.39 KBchetanbharambe
#18 Before Patch 3192254 one.png264.28 KBchetanbharambe
#18 Before Patch 3192254.png262.75 KBchetanbharambe
#17 3192254-17.patch393 byteskiran.kadam911
#15 Screenshot from 2021-05-06 14-23-07.png26.56 KBakhildev.cs
#13 after_patch_#2.png148.17 KBkiran.kadam911
#13 before_patch_#2.png148.14 KBkiran.kadam911
#11 attachment.png238.34 KBdjsagar
#8 inter-diff-3192254-4.txt0 bytesnishat ahmad
#6 3192254-4a.patch1.44 KBnishat ahmad
#5 3192254-4.patch1.43 KBnishat ahmad
#3 After--patch.jpg80.95 KBranjith_kumar_k_u
#3 Before--patch.jpg96.45 KBranjith_kumar_k_u
#2 Screen Shot 2021-01-15 at 2.29.33 AM.png41.55 KBdjsagar
#2 3192254-2.patch393 bytesdjsagar
screencapture-stm5ffd13d409700-6cnc4rpbnnd0efysjq4nbd1fiotgoiac-tugboat-qa-node-2021-01-12-13_36_47.png71.54 KBpameeela

Issue fork drupal-3192254

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

pameeela created an issue. See original summary.

djsagar’s picture

djsagar commented
Status: Active » Needs review
StatusFileSize
new 3192254-2.patch393 bytes
new Screen Shot 2021-01-15 at 2.29.33 AM.png41.55 KB

Hi @pameeela,

I created small patch for this, adding 100% width by using the media-query.

Please review and please provide your feedback for above issue i hope this will work for you.

Thanks!

ranjith_kumar_k_u’s picture

ranjith_kumar_k_u commented
StatusFileSize
new Before--patch.jpg96.45 KB
new After--patch.jpg80.95 KB

The patch works fine.

Before patch
before patch

After patch
after patch

Nishat Ahmad made their first commit to this issue’s fork.

nishat ahmad’s picture

nishat ahmad commented
StatusFileSize
new 3192254-4.patch1.43 KB

Check it this patch, If there is any let me know.

Thanks

nishat ahmad’s picture

nishat ahmad commented
StatusFileSize
new 3192254-4a.patch1.44 KB
pameeela’s picture

pameeela commented

@Nishat Ahmad there is already a patch. Is there some problem with the one already provided in #2?

nishat ahmad’s picture

nishat ahmad commented
StatusFileSize
new inter-diff-3192254-4.txt0 bytes

Hi,
@pameeela I have wrote the code on in different file and No any issue with #2.

djsagar’s picture

djsagar commented

Hi @Nishat Ahmad Please check your inter-diff in #8 is empty.

Thanks!

pameeela’s picture

pameeela commented

This issue doesn't require a new patch, there already is one. The patches in #4 and #5 include a lot of changes that are not related to this issue.

Please don't upload any new patches to this issue unless there is a specified problem with the patch in #2 that is being addressed? And if so please advise what the problem is and why it requires a new patch.

djsagar’s picture

djsagar commented
StatusFileSize
new attachment.png238.34 KB

Hi @pameeela,

This is because of value size,

please review the attachment.

Thanks!

pameeela’s picture

pameeela commented
Status: Needs review » Needs work

Patch doesn't apply.

kiran.kadam911’s picture

kiran.kadam911
he/him
Location Mumbai, India 🇮🇳
commented
Status: Needs work » Reviewed & tested by the community
StatusFileSize
new before_patch_#2.png148.14 KB
new after_patch_#2.png148.17 KB

Tested Patch #2 applied successfully. It's working fine now.

Before patch SS:

After patch SS:

Ready to move RTBC.

Thanks!

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.

akhildev.cs’s picture

akhildev.cs commented
StatusFileSize
new Screenshot from 2021-05-06 14-23-07.png26.56 KB

hi
I try the #2 patch on "9.3.x-dev" .but it not fine in small screen mobiles, see attachment.

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Status: Reviewed & tested by the community » Needs work
Issue tags: +Needs reroll
kiran.kadam911’s picture

kiran.kadam911
he/him
Location Mumbai, India 🇮🇳
commented
Status: Needs work » Needs review
StatusFileSize
new 3192254-17.patch393 bytes

Re-roll 9.3.x

Thanks!

chetanbharambe’s picture

chetanbharambe commented
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new Before Patch 3192254.png262.75 KB
new Before Patch 3192254 one.png264.28 KB
new After Patch 3192254.png256.39 KB
new After Patch 3192254 one.png248.17 KB

Verified and tested patch #17
Patch applied successfully and looks good to me.

Testing Steps:
# Goto: admin/structure/views
# Create a view with an autocomplete exposed filter
# Display the view in Bartik via a page or a block
# View it on a smaller screen
# See that the autocomplete field is too wide

Expected Results:
# Views autocomplete input should be in proper width on mobile devices

Actual Results:
# Views autocomplete input is too wide on mobile

Can be a move to RTBC.

anish.a’s picture

anish.a commented
Issue tags: -Needs reroll

Status: Reviewed & tested by the community » Needs work

The last submitted patch, 17: 3192254-17.patch, failed testing. View results

Indrajith KB made their first commit to this issue’s fork.

Indrajith KB opened merge request !848

indrajithkb’s picture

indrajithkb commented
Status: Needs work » Needs review

HI @kiran.kadam911 thanks for the patch, still patch gets failed so am adding the MR again. Please review the #22 MR.

Moving to needs review

chetanbharambe’s picture

chetanbharambe commented
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new Before Patch 3192254 up.png273.71 KB
new After Patch 3192254 up iPhone.png237.31 KB
new After Patch 3192254 up Android.png239.13 KB

Thanks, @Indrajith KB for #22.
Verified and tested merge request #22.
Merge request applied successfully and looks good to me.

Testing Steps:
# Goto: admin/structure/views
# Create a view with an autocomplete exposed filter
# Display the view in Bartik via a page or a block
# View it on a smaller screen
# See that the autocomplete field is too wide

Expected Results:
# Views autocomplete input should be in proper width on mobile devices.

Actual Results:
# Views autocomplete input is too wide on mobile.

Working as Expected.
Can be a move to RTBC.

darvanen’s picture

darvanen
he/him
Primary language English
Location Sydney, Australia
commented
Status: Reviewed & tested by the community » Needs work

Don't forget to test CSS changes on other screen sizes as well as the width where an issue occurs.

Gauravmahlawat made their first commit to this issue’s fork.

gauravvvv’s picture

gauravvvv commented
Status: Needs work » Needs review

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.

kristen pol’s picture

kristen pol
she/her
Primary language English
Location Santa Cruz, CA, USA
commented
Issue tags: +Needs manual testing

Thanks for the update. Confirmed changes address feedback in #25 by changing width to max-width.

Checked and the MR/patch applies cleanly to Drupal 9.3, 9.4, and 10. Needs manual testing on 9.4.

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.

smustgrave’s picture

smustgrave commented
Project: Drupal core » Bartik
Version: 10.1.x-dev » 1.0.2
Component: Bartik theme » Look and Feel

This appears to be a bartik issue only. Since D10 removed bartik moving this to the contrib project

gaurav-mathur’s picture

gaurav-mathur commented
Assigned: Unassigned » gaurav-mathur
gaurav-mathur’s picture

gaurav-mathur commented
Assigned: gaurav-mathur » Unassigned
StatusFileSize
new iphone-12.jpg5.12 KB
new samsung.jpg5.68 KB
new tablet.jpg9.25 KB

Hi Patch#2 applied successfully. i tested patch on diffrent screen size and It working fine.

liam morland’s picture

liam morland
Primary language English
Location Ontario, CA 🇨🇦
commented
Version: 1.0.2 » 1.0.x-dev
Status: Needs review » Needs work

Please put the patch into an issue fork of Bartik and merge request.