X
Sitenin mobil sürümüne gitmek için buraya dokunun.

Destek Forumu

Firefox not respecting the font size attribute for option in select

Tarih

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

richosrff tarafından tarihinde düzenlendi

Alıntı

Ek sistem ayrıntıları

Yüklü yan uygulamalar

  • Shockwave Flash 32.0 r0

Uygulama

  • Kullanıcı istemcisi: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:66.0) Gecko/20100101 Firefox/66.0

Daha fazla bilgi

jscher2000
  • Top 10 Contributor
8498 çözüm 69426 yanıt

İşe yarayan yanıt

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.
Bunu yararlı buldunuz mu? 1
Alıntı

Sorunun sahibi

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

richosrff tarafından tarihinde düzenlendi

Bunu yararlı buldunuz mu?
Alıntı
farbanomalie 0 çözüm 8 yanıt

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.
Bunu yararlı buldunuz mu?
Alıntı
jscher2000
  • Top 10 Contributor
8498 çözüm 69426 yanıt

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?
Bunu yararlı buldunuz mu?
Alıntı
farbanomalie 0 çözüm 8 yanıt

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.
Bunu yararlı buldunuz mu?
Alıntı
jscher2000
  • Top 10 Contributor
8498 çözüm 69426 yanıt

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.
Bunu yararlı buldunuz mu?
Alıntı
farbanomalie 0 çözüm 8 yanıt

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.
Bunu yararlı buldunuz mu?
Alıntı
farbanomalie 0 çözüm 8 yanıt

İşe yarayan yanıt

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.

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.
Bunu yararlı buldunuz mu? 1
Alıntı
Soru sorun

Mesajlara yanıt verebilmek için hesabınıza giriş yapmalısınız. Henüz hesabınız yoksa lütfen yeni bir soru sorun.