No Code Attached Yet Information Required
avatar DSist
DSist
11 Jan 2022

Steps to reproduce the issue

Open native Joomla Search page. Click on the search field for word suggestion list to be shown. Click on any suggestion word to put it into the search field. Click on the search field for word suggestion list to be shown again. Hover the pointer over any suggestion word and the word is temporarily put into the search field with its own default font size not from the template css. It causes the text to jerk changing its font size while you move the pointer between the search field and suggestion list.

Expected result

All the word suggestion font parameters should be derived from the search field font (from the template css).

System information (as much as possible)

Joomla 4.0.5

joomla_search_box1
joomla_search_box2

avatar DSist DSist - open - 11 Jan 2022
avatar joomla-cms-bot joomla-cms-bot - change - 11 Jan 2022
Labels Added: No Code Attached Yet
avatar joomla-cms-bot joomla-cms-bot - labeled - 11 Jan 2022
avatar DSist DSist - change - 11 Jan 2022
The description was changed
avatar DSist DSist - edited - 11 Jan 2022
avatar DSist DSist - change - 11 Jan 2022
The description was changed
avatar DSist DSist - edited - 11 Jan 2022
avatar DSist DSist - change - 11 Jan 2022
The description was changed
avatar DSist DSist - edited - 11 Jan 2022
avatar drmenzelit
drmenzelit - comment - 17 Jan 2022

Sorry, but I can't follow your explanation... I don't see any difference in the font size from the search field and the suggestions list. The list is using the general font size from body. The input field (.form-control) has an extra definition for font-size: 1rem (the same as body). Only if you change the definition for the input field the font size will be different.

avatar Quy Quy - labeled - 19 Jan 2022
avatar DSist
DSist - comment - 19 Jan 2022

It is not about the suggestion list font, it is about temporary substitution font while you hovering over the suggestion list. I have no idea where this temporary substitution takes font parameters from as DevTools is of no help here, and it is not only about font size, it is about the font family too. I have described above how to reproduce the issue.

avatar Hackwar
Hackwar - comment - 2 Feb 2022

I can't replicate the behavior you are describing.

avatar DSist
DSist - comment - 4 Feb 2022

I can't replicate the behavior you are describing.

I have just checked it again with Cassiopea default template. Try to enlarge font for the search field to see the difference clearly via DevTools (font-size: 20px) or via css:

.com-finder .input-group .form-control { font-size: 20px; }

The issue arises when you have something already typed in the search field, open suggestion list after and hover over the suggestion strings. Every time you hover over a suggestion word it is temporarily put into the search field with its own font parameters, replacing search field font parameters of the site template.

avatar brianteeman
brianteeman - comment - 3 Mar 2022

Every time you hover over a suggestion word it is temporarily put into the search field

I cant replicate this - even after setting wildly different styles for the input and the suggestion

avatar Quy Quy - change - 23 Mar 2022
Status New Closed
Closed_Date 0000-00-00 00:00:00 2022-03-23 00:25:05
Closed_By Quy
Labels Added: Information Required
avatar Quy Quy - close - 23 Mar 2022
avatar Quy
Quy - comment - 23 Mar 2022

Closing as non reproducible.

Add a Comment

Login with GitHub to post a comment