X
Tippen Sie hierhin, um die Version dieser Website für Mobilgeräte aufzurufen.

Hilfeforum

Firefox not respecting the font size attribute for option in select

Veröffentlicht

Firefox is the ONLY browser that doesn't respect font-size settings in Select Options.

Looking on the Internet this is an issue that has been around for years.

Why doesn't Mozilla fix this issue?

It makes the user experience very poor compared with other browsers. Even Edge supports it !!!

Does anyone have a work around for this, except "use a different browser :)

Steve

Firefox is the ONLY browser that doesn't respect font-size settings in Select Options. Looking on the Internet this is an issue that has been around for years. Why doesn't Mozilla fix this issue? It makes the user experience very poor compared with other browsers. Even Edge supports it !!! Does anyone have a work around for this, except "use a different browser :) Steve

Geändert am von Steve Riches

Zitieren

Mehr Details zum System

Installierte Plugins

  • Shockwave Flash 32.0 r0

Anwendung

  • User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:66.0) Gecko/20100101 Firefox/66.0

Weitere Informationen

jscher2000
  • Top 10 Contributor
8634 Lösungen 70618 Antworten
Veröffentlicht

Hilfreiche Antwort

Hi Steve, is this a problem with a font-size specified in the page by its style rules, or in Firefox settings, or by an add-on?

Generally speaking, the options of Select controls starting rendering differently after Firefox became a multi-process application (around Firefox 48-52) and styling flexibility has been restored gradually over time. However, it may never be as flexible as it was before unless the developers back away from the principle that form controls should follow the style of the operating system instead of giving web authors freedom to go wild with them.

Hi Steve, is this a problem with a font-size specified in the page by its style rules, or in Firefox settings, or by an add-on? Generally speaking, the options of Select controls starting rendering differently after Firefox became a multi-process application (around Firefox 48-52) and styling flexibility has been restored gradually over time. However, it may never be as flexible as it was before unless the developers back away from the principle that form controls should follow the style of the operating system instead of giving web authors freedom to go wild with them.
Hat Ihnen das weitergeholfen? 1
Zitieren

Fragesteller

It is simply a case of Firefox not applying style rules for <options>

Every other browser applies the style rules in CSS except Firefox, even Edge displays correctly.

See the images attached.

regards Steve

It is simply a case of Firefox not applying style rules for <options> Every other browser applies the style rules in CSS except Firefox, even Edge displays correctly. See the images attached. regards Steve

Geändert am von Steve Riches

Hat Ihnen das weitergeholfen?
Zitieren
farbanomalie 0 Lösungen 8 Antworten
Veröffentlicht

Any news on this? I have struggled with this problem after every FF update for quite some time. Toggling browser.tabs.remote.autostart in the config helped so far, but after the update to 68.0 has no effect anymore. It is driving me nuts since it destroys the layout of a very important tool for me.

Any news on this? I have struggled with this problem after every FF update for quite some time. Toggling browser.tabs.remote.autostart in the config helped so far, but after the update to 68.0 has no effect anymore. It is driving me nuts since it destroys the layout of a very important tool for me.
Hat Ihnen das weitergeholfen?
Zitieren
jscher2000
  • Top 10 Contributor
8634 Lösungen 70618 Antworten
Veröffentlicht

Hi farbanomalie, Firefox 68 no longer has the "single process" option you have been using as a workaround in Firefox 48-67.

As of Firefox 67, pages can set the font face, size, weight, style, and color, and background color, for the options. However, pages cannot tighten the vertical spacing of the list.

It is driving me nuts since it destroys the layout of a very important tool for me.

How would you describe the problem caused by wider spacing of the options? For example, are the lists too long to fit on the screen, or they block things you need to reference while using the list, or your productivity is reduced by having to move the mouse further from the active part of the page, or something else?

Hi farbanomalie, Firefox 68 no longer has the "single process" option you have been using as a workaround in Firefox 48-67. As of Firefox 67, pages can set the font face, size, weight, style, and color, and background color, for the options. However, pages cannot tighten the vertical spacing of the list. <blockquote>It is driving me nuts since it destroys the layout of a very important tool for me.</blockquote> How would you describe the problem caused by wider spacing of the options? For example, are the lists too long to fit on the screen, or they block things you need to reference while using the list, or your productivity is reduced by having to move the mouse further from the active part of the page, or something else?
Hat Ihnen das weitergeholfen?
Zitieren
farbanomalie 0 Lösungen 8 Antworten
Veröffentlicht

Font-face etc. still isn’t applied in my FF to options. I have not set vertical spacing, but a font-face, size and text-align, padding and line-height. Some is set directly for options, some of it is set for select, but should be inherited. Nothing of this is applied to options, only the CSS for the overall select is used. (Also, right-clicking doesn’t give me a context menu, so I have to layway the inspection from the parent select.)

My main problem is that text-align: right isn’t applied to options which would give me a proper overview over the options when the select is opened, since the options represent things in a tree-like structure: a thing > sub-category a > category A another thing > sub-category a > category A ...

Guess I’ll try to re-install FF and import all my stuff since I am also having other issues like all my installed add-ons randomly disappearing.

Font-face etc. still isn’t applied in my FF to options. I have not set vertical spacing, but a font-face, size and text-align, padding and line-height. Some is set directly for options, some of it is set for select, but should be inherited. Nothing of this is applied to options, only the CSS for the overall select is used. (Also, right-clicking doesn’t give me a context menu, so I have to layway the inspection from the parent select.) My main problem is that text-align: right isn’t applied to options which would give me a proper overview over the options when the select is opened, since the options represent things in a tree-like structure: a thing > sub-category a > category A another thing > sub-category a > category A ... Guess I’ll try to re-install FF and import all my stuff since I am also having other issues like all my installed add-ons randomly disappearing.
Hat Ihnen das weitergeholfen?
Zitieren
jscher2000
  • Top 10 Contributor
8634 Lösungen 70618 Antworten
Veröffentlicht

Hi farbanomalie, in multiprocess mode, Firefox uses a standard height for <option>s. Any rules related to height, line-height, padding-top, padding-bottom, appear to be ignored. I've never thought of using text-align for options, but based on your testing, that is ignored, too.

Font-face etc. still isn’t applied in my FF to options.

What if you use !important for your font-family and font-size rules for the options?

Guess I’ll try to re-install FF and import all my stuff since I am also having other issues like all my installed add-ons randomly disappearing.

Hopefully it will help with the other issues, but please post about them again if they continue.

Hi farbanomalie, in multiprocess mode, Firefox uses a standard height for <option>s. Any rules related to height, line-height, padding-top, padding-bottom, appear to be ignored. I've never thought of using text-align for options, but based on your testing, that is ignored, too. <blockquote>Font-face etc. still isn’t applied in my FF to options.</blockquote> What if you use !important for your font-family and font-size rules for the options? <blockquote>Guess I’ll try to re-install FF and import all my stuff since I am also having other issues like all my installed add-ons randomly disappearing.</blockquote> Hopefully it will help with the other issues, but please post about them again if they continue.
Hat Ihnen das weitergeholfen?
Zitieren
farbanomalie 0 Lösungen 8 Antworten
Veröffentlicht

Re-installed FF 68.0, but nothing changed regarding the CSS issues, right after a fresh install without any custom FF settings made or add-ons installed.

I fiddled with the CSS rules and had a deeper look on the situation in the web developer inspector. It shows all rules applied and the settings computed properly––theoretically––so they aren’t overwritten or something like this. They just aren’t executed in the display of FF as they should be according to the inspector.

I’m on my wits’ end with this and searching the internet about this also only gives me results about the old issue and if there are any current answers at all, they say it was resolved with 66 or earlier. Frustrating.

Re-installed FF 68.0, but nothing changed regarding the CSS issues, right after a fresh install without any custom FF settings made or add-ons installed. I fiddled with the CSS rules and had a deeper look on the situation in the web developer inspector. It shows all rules applied and the settings computed properly''––theoretically––''so they aren’t overwritten or something like this. They just aren’t executed in the display of FF as they should be according to the inspector. I’m on my wits’ end with this and searching the internet about this also only gives me results about the old issue and if there are any current answers at all, they say it was resolved with 66 or earlier. Frustrating.
Hat Ihnen das weitergeholfen?
Zitieren
farbanomalie 0 Lösungen 8 Antworten
Veröffentlicht

Hilfreiche Antwort

Interestingly, adding style "direction: rtl" to the select makes the text align to the right in the options which cures the biggest pain for me. It moves the dropdown arrow to the left, but I can live with that as a workaround until hopefully this issue will be fixed at some point.

I also fiddled with some javascript bits that replace the actual select with a js custom built dropdown that can be styled, but I didn’t find a script that also has all the basic functionality of a real select dropdown that automatically builds a vertical scrollbar when needed with tons of options and that selects the next fitting option while typing on a focused select.

Edit: direction: rtl makes a weird mess of options starting with numbers while all other options stay the same way, they read left to right as before, only the text is aligned to the right. An option like "2019 » [some text] » [some more text]" turns into "[some text] » [some more text] « 2019" ... chaotic behaviour.

Interestingly, adding style "direction: rtl" to the select makes the text align to the right in the options which cures the biggest pain for me. It moves the dropdown arrow to the left, but I can live with that as a workaround until hopefully this issue will be fixed at some point. I also fiddled with some javascript bits that replace the actual select with a js custom built dropdown that can be styled, but I didn’t find a script that also has all the basic functionality of a real select dropdown that automatically builds a vertical scrollbar when needed with tons of options and that selects the next fitting option while typing on a focused select. Edit: direction: rtl makes a weird mess of options starting with numbers while all other options stay the same way, they read left to right as before, only the text is aligned to the right. An option like "2019 » [some text] » [some more text]" turns into "[some text] » [some more text] « 2019" ... chaotic behaviour.

Geändert am von farbanomalie

Hat Ihnen das weitergeholfen? 1
Zitieren
Stellen Sie eine Frage

Sie müssen sich mit Ihrem Benutzerkonto anmelden, um auf Beiträge zu antworten. Bitte stellen Sie eine neue Frage, wenn Sie noch kein Benutzerkonto haben.