classic-rocket icon indicating copy to clipboard operation
classic-rocket copied to clipboard

Faceted search OK button bad display on iPhone XS

Open Hlavtox opened this issue 4 years ago • 4 comments

The OK button to confirm selected filters is squished on iPhone XS and others.

Additional info classic-rocket develop Prestashop 1.7.6 Faceted search 3.2.1

Image IMG_6745

Hlavtox avatar Sep 10 '19 22:09 Hlavtox

maybe with btn-lg class ?

prestarocket avatar Sep 12 '19 19:09 prestarocket

I dont know how to solve it, no matter what padding you put there, Safari will cut it off it seems.

If you try it on other phones or on desktop in dev responsive mode, it looks OK.

Hlavtox avatar Sep 13 '19 14:09 Hlavtox

Maybe with -webkit-appearance: none; to prevent Safari from styling form elements.

micka-fdz avatar Sep 16 '19 08:09 micka-fdz

@prestarocket Found out it's general safari behaviour. It shrinks due to flex layout of the offcanvas modal.

This fixes it:

	#offcanvas_search_filter .modal-footer,
	#offcanvas_search_filter .modal-footer {
		flex-shrink: 0;
	}

To which CSS should I make a PR?

Hlavtox avatar Dec 06 '19 11:12 Hlavtox