Views autocomplete input is too wide on mobile [#3192254]

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

Install Drupal
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

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

Comment	File	Size	Author
#34	tablet.jpg	9.25 KB	gaurav-mathur
#34	samsung.jpg	5.68 KB	gaurav-mathur
#34	iphone-12.jpg	5.12 KB	gaurav-mathur
#24	After Patch 3192254 up Android.png	239.13 KB	chetanbharambe
#24	After Patch 3192254 up iPhone.png	237.31 KB	chetanbharambe
#24	Before Patch 3192254 up.png	273.71 KB	chetanbharambe
#18	After Patch 3192254 one.png	248.17 KB	chetanbharambe
#18	After Patch 3192254.png	256.39 KB	chetanbharambe
#18	Before Patch 3192254 one.png	264.28 KB	chetanbharambe
#18	Before Patch 3192254.png	262.75 KB	chetanbharambe
#17	3192254-17.patch	393 bytes	kiran.kadam911
#15	Screenshot from 2021-05-06 14-23-07.png	26.56 KB	akhildev.cs
#13	after_patch_#2.png	148.17 KB	kiran.kadam911
#13	before_patch_#2.png	148.14 KB	kiran.kadam911
#11	attachment.png	238.34 KB	djsagar
#8	inter-diff-3192254-4.txt	0 bytes	nishat ahmad
#6	3192254-4a.patch	1.44 KB	nishat ahmad
#5	3192254-4.patch	1.43 KB	nishat ahmad
#3	After--patch.jpg	80.95 KB	ranjith_kumar_k_u
#3	Before--patch.jpg	96.45 KB	ranjith_kumar_k_u
#2	Screen Shot 2021-01-15 at 2.29.33 AM.png	41.55 KB	djsagar
#2	3192254-2.patch	393 bytes	djsagar
	screencapture-stm5ffd13d409700-6cnc4rpbnnd0efysjq4nbd1fiotgoiac-tugboat-qa-node-2021-01-12-13_36_47.png	71.54 KB	pameeela

Issue fork drupal-3192254

Show commands

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

Add & fetch this issue fork’s repository

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

Add & fetch this issue fork’s repository

3192254-auto-complete-overflow-issue changes, plain diff MR !848
Check out this branch for the first time

Check out existing branch, if you already have it locally
3192254-views-autocomplete-input compare
Check out this branch for the first time

Check out existing branch, if you already have it locally

About issue forks

Comments

Comment #1

12 January 2021 at 03:40

pameeela created an issue. See original summary.

Comment #2

djsagar commented 14 January 2021 at 21:03

Status:

Active

» Needs review

Status	File	Size
new	3192254-2.patch	393 bytes
new	Screen Shot 2021-01-15 at 2.29.33 AM.png	41.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!

Comment #3

ranjith_kumar_k_u commented 15 January 2021 at 05:51

Status	File	Size
new	Before--patch.jpg	96.45 KB
new	After--patch.jpg	80.95 KB

The patch works fine.

Before patch

After patch

Comment #4

15 January 2021 at 06:18

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

Comment #5

nishat ahmad commented 15 January 2021 at 06:57

Status	File	Size
new	3192254-4.patch	1.43 KB

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

Thanks

Comment #6

nishat ahmad commented 15 January 2021 at 07:08

Status	File	Size
new	3192254-4a.patch	1.44 KB

Comment #7

pameeela commented 15 January 2021 at 07:12

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

Comment #8

nishat ahmad commented 15 January 2021 at 07:28

Status	File	Size
new	inter-diff-3192254-4.txt	0 bytes

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

Comment #9

djsagar commented 29 January 2021 at 11:14

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

Thanks!

Comment #10

pameeela commented 17 January 2021 at 23:38

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.

Comment #11

djsagar commented 29 January 2021 at 11:41

Status	File	Size
new	attachment.png	238.34 KB

Hi @pameeela,

This is because of value size,

please review the attachment.

Thanks!

Comment #12

pameeela commented 28 April 2021 at 00:32

Status:

Needs review

» Needs work

Patch doesn't apply.

Comment #13

kiran.kadam911

he/him

Mumbai, India 🇮🇳

commented 28 April 2021 at 10:24

Status:

Needs work

» Reviewed & tested by the community

Status	File	Size
new	before_patch_#2.png	148.14 KB
new	after_patch_#2.png	148.17 KB

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

Before patch SS:

After patch SS:

Ready to move RTBC.

Thanks!

Comment #14

28 April 2021 at 10:24

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.

Comment #15

akhildev.cs commented 6 May 2021 at 08:54

Status	File	Size
new	Screenshot from 2021-05-06 14-23-07.png	26.56 KB

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

Comment #16

lauriii

he/him

Finnish

Finland

commented 11 May 2021 at 09:31

Status:	Reviewed & tested by the community	» Needs work
Issue tags:		+Needs reroll

Comment #17

kiran.kadam911

he/him

Mumbai, India 🇮🇳

commented 11 May 2021 at 13:37

Status:

Needs work

» Needs review

Status	File	Size
new	3192254-17.patch	393 bytes

12 files were hidden/shown/deleted

Status	File	Size
hidden	screencapture-stm5ffd13d409700-6cnc4rpbnnd0efysjq4nbd1fiotgoiac-tugboat-qa-node-2021-01-12-13_36_47.png	71.54 KB
hidden	3192254-2.patch	393 bytes
hidden	Screen Shot 2021-01-15 at 2.29.33 AM.png	41.55 KB
hidden	Before--patch.jpg	96.45 KB
hidden	After--patch.jpg	80.95 KB
hidden	3192254-4.patch	1.43 KB
hidden	3192254-4a.patch	1.44 KB
hidden	inter-diff-3192254-4.txt	0 bytes
hidden	attachment.png	238.34 KB
hidden	before_patch_#2.png	148.14 KB
hidden	after_patch_#2.png	148.17 KB
hidden	Screenshot from 2021-05-06 14-23-07.png	26.56 KB

Re-roll 9.3.x

Thanks!

Comment #18

chetanbharambe commented 14 May 2021 at 07:28

Status:

Needs review

» Reviewed & tested by the community

Status	File	Size
new	Before Patch 3192254.png	262.75 KB
new	Before Patch 3192254 one.png	264.28 KB
new	After Patch 3192254.png	256.39 KB
new	After Patch 3192254 one.png	248.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.

Comment #19

anish.a commented 23 May 2021 at 17:56

Issue tags:

-Needs reroll

Comment #20

18 June 2021 at 01:53

Status:

Reviewed & tested by the community

» Needs work

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

Comment #21

24 June 2021 at 17:55

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

Comment #22

24 June 2021 at 17:59

Indrajith KB opened merge request !848

Comment #23

indrajithkb commented 24 June 2021 at 18:03

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

Comment #24

chetanbharambe commented 25 June 2021 at 08:58

Status:

Needs review

» Reviewed & tested by the community

Status	File	Size
new	Before Patch 3192254 up.png	273.71 KB
new	After Patch 3192254 up iPhone.png	237.31 KB
new	After Patch 3192254 up Android.png	239.13 KB

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

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.

Comment #25

darvanen

he/him

English

Sydney, Australia

commented 20 August 2021 at 04:29

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.

Comment #26

20 August 2021 at 04:43

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

Comment #27

gauravvvv commented 20 August 2021 at 04:46

Status:

Needs work

» Needs review

Comment #28

20 August 2021 at 04:46

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.

Comment #29

kristen pol

she/her

English

Santa Cruz, CA, USA

commented 16 March 2022 at 22:02

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.

Comment #30

16 March 2022 at 22:02

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.