X
Tap here to go to the mobile version of the site.

Support Forum

CSS: change width of searcher popup

Posted

In FF 69 RTL the searcher popup is 1px shorter (on the left) than the searcher itself.

Can this be fixed with CSS?


Thank you.

In FF 69 RTL the searcher popup is 1px shorter (on the left) than the searcher itself. Can this be fixed with CSS? Thank you.
Attached screenshots
Quote

Additional System Details

Installed Plug-ins

  • Shockwave Flash 32.0 r0

Application

  • User Agent: Mozilla/5.0 (Windows NT 6.1; rv:69.0) Gecko/20100101 Firefox/69.0

More Information

jscher2000
  • Top 10 Contributor
8698 solutions 71098 answers

Hi Yaron, if I look at it with the window maximized, which is the usual situation for me, it seems fine:

The outer box around the magnifying glass, text box, and arrow, which is under

toolbar#nav-bar > hbox#nav-bar-customization-target > toolbaritem#search-container > searchbar#searchbar

has a reported width of 249.6 pixels while the drop-down under

popupset#mainPopupSet > panel#PopupSearchAutoComplete

has a reported width of 249.4 pixels. With subpixel aliasing, any difference is too slight for me to discern.

However, if I switch the window to resizable, there is a visible discrepancy: 151.2px vs. 150px.

(That's on the Layout tab of the Inspector in the Browser Toolbox.)

I don't know how these peculiar widths are determined, but if you are going to override one, you probably should set both to keep them in sync when the window width changes.

Hi Yaron, if I look at it with the window maximized, which is the usual situation for me, it seems fine: The outer box around the magnifying glass, text box, and arrow, which is under toolbar#nav-bar > hbox#nav-bar-customization-target > toolbaritem#search-container > searchbar#searchbar has a reported width of 249.6 pixels while the drop-down under popupset#mainPopupSet > panel#PopupSearchAutoComplete has a reported width of 249.4 pixels. With subpixel aliasing, any difference is too slight for me to discern. However, if I switch the window to resizable, there is a visible discrepancy: 151.2px vs. 150px. (That's on the Layout tab of the Inspector in the Browser Toolbox.) I don't know how these peculiar widths are determined, but if you are going to override one, you probably should set both to keep them in sync when the window width changes.
Was this helpful to you?
Quote
cor-el
  • Top 10 Contributor
  • Moderator
17481 solutions 157978 answers

You can consider to move the search bar to the overflow area to see whether that gives more width.

That gives me a search bar of about 400px width, even width a small window width.

You can consider to move the search bar to the overflow area to see whether that gives more width. That gives me a search bar of about 400px width, even width a small window width.
Was this helpful to you?
Quote

Question owner

Hello jscher2000 and cor-el,

Thank you for replying. I appreciate it.

Using an image-editor, the actual difference is 1px.

With

  1. PopupSearchAutoComplete { min-width: 305px !important; }

I get the same width for the searchbar and its popup in a maximized window.

Obviously this isn't the best solution. Any other idea?

---

@cor-el,

The problem is in FF 69 *RTL*. The searcher popup is 1px shorter (on the left) than the searcher itself.

Hello jscher2000 and cor-el, Thank you for replying. I appreciate it. Using an image-editor, the actual difference is 1px. With #PopupSearchAutoComplete { min-width: 305px !important; } I get the same width for the searchbar and its popup in a maximized window. Obviously this isn't the best solution. Any other idea? --- @cor-el, The problem is in FF 69 *RTL*. The searcher popup is 1px shorter (on the left) than the searcher itself.
Was this helpful to you?
Quote
jscher2000
  • Top 10 Contributor
8698 solutions 71098 answers

Helpful Reply

Yaron said

With
#PopupSearchAutoComplete { min-width: 305px !important; }
I get the same width for the searchbar and its popup in a maximized window. Obviously this isn't the best solution.

But maybe it's the best available at this time?

The drop-down lives in a completely separate part of the document from the toolbar, so unlike normal HTML layouts where you could use something like

width:100%

to match the width of a parent element, you have no choice but to handle the width using absolute measurements.

''Yaron [[#answer-1249593|said]]'' <blockquote> With<Br> #PopupSearchAutoComplete { min-width: 305px !important; } <br>I get the same width for the searchbar and its popup in a maximized window. Obviously this isn't the best solution. </blockquote> But maybe it's the best available at this time? The drop-down lives in a completely separate part of the document from the toolbar, so unlike normal HTML layouts where you could use something like width:100% to match the width of a parent element, you have no choice but to handle the width using absolute measurements.
Was this helpful to you? 1
Quote

Question owner

Well, you're the expert. :)

Thanks for the detailed explanation.

Well, you're the expert. :) Thanks for the detailed explanation.
Was this helpful to you?
Quote
Ask a question

You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.