Shrink Search Box Size in Navigation Toolbar

General project discussion.
Use this as a last resort if your topic does not fit in any of the other boards but it still on-topic.
Forum rules
This General Discussion board is meant for topics that are still relevant to Pale Moon, web browsers, browser tech, UXP applications, and related, but don't have a more fitting board available.

Please stick to the relevance of this forum here, which focuses on everything around the Pale Moon project and its user community. "Random" subjects don't belong here, and should be posted in the Off-Topic board.
Splat
Moonbather
Moonbather
Posts: 56
Joined: 2014-07-04, 06:51
Location: USA

Shrink Search Box Size in Navigation Toolbar

Unread post by Splat » 2022-11-29, 21:37

I don't remember when this changed, or why...maybe I did it a long time ago and just realized it.... The Search box in the Navigation toolbar takes up a lot of horizontal space. Is there a way to shrink it? In contrast, my URL box is about half the size of the search box. Thanks.

Blacklab
Keeps coming back
Keeps coming back
Posts: 935
Joined: 2012-06-08, 12:14

Re: Shrink Search Box Size in Navigation Toolbar

Unread post by Blacklab » 2022-11-30, 00:30

Splat wrote:I don't remember when this changed...
I don't remember either. :)

I rather doubt Pale Moon's 'out-of-the-box' Search Box width setting has changed in a long time, if ever? Like you, I wouldn't notice as I only add the Search Box to the Navigation Bar very occasionally when making/adding new search engine plugins.

To alter the Search Box width add this tiny one line CSS script to the 'userChrome.css' file in the 'chrome' folder in your Pale Moon profile... or add using 'Write New Style' in Lootyhoof's excellent Pale Moon extension 'Stylem 2.2.9'. Then just adjust the pixel number to taste:

Code: Select all

/* --- Alter Search Box Width --- */

#search-container { width: 300px !important; }
Note: To 'hash-out' a line or multiple lines in CSS scripts you only need symbols /* before and symbols */ after... everything in between those two pairs of symbols is not actioned by the browser engine. The longer 5 symbols /* --- and --- */ used in above code block is my own long-time affectation... so I can spot titles, links and 'not-in-use' scripts more easily in larger blocks of CSS script!

User avatar
RealityRipple
Astronaut
Astronaut
Posts: 541
Joined: 2018-05-17, 02:34
Location: Los Berros Canyon, California
Contact:

Re: Shrink Search Box Size in Navigation Toolbar

Unread post by RealityRipple » 2022-11-30, 00:37

Can't you just... click and drag the space between them?

BenFenner
Lunatic
Lunatic
Posts: 431
Joined: 2015-06-01, 12:52
Location: US Southeast

Re: Shrink Search Box Size in Navigation Toolbar

Unread post by BenFenner » 2022-11-30, 00:57

A screenshot of what you're dealing with sure would be helpful.

I also feel like drag-drop while in the View → Toolbars → Customize menu condition should do the trick?

Splat
Moonbather
Moonbather
Posts: 56
Joined: 2014-07-04, 06:51
Location: USA

Re: Shrink Search Box Size in Navigation Toolbar

Unread post by Splat » 2022-11-30, 16:09

PM.jpg
I've tried decreasing its width while customizing. I've messed with it for almost an hour but no luck. Thanks.

Blacklab
Keeps coming back
Keeps coming back
Posts: 935
Joined: 2012-06-08, 12:14

Re: Shrink Search Box Size in Navigation Toolbar

Unread post by Blacklab » 2022-11-30, 17:38

Splat wrote:I've tried decreasing its width while customizing. I've messed with it for almost an hour but no luck...
That's certainly one huge ginormous Search Box in your toolbars screenshot above! :o

I had a look at Search Box sizing last night and did some trials on my own normal Pale Moon profile and on an 'out-of-the-box' new profile. Regrettably, I don't think the CSS script I posted yesterday (above) is working any longer... or at least not consistently? I'm trying to find out why... but no immediate answers.

What I have found (testing on both of my Pale Moon profiles) is that the 'click & drag' way of altering the size of the Search Box only works when the Address/URL Box and the Search Box are next to one another... as soon as they are separated by other icons or buttons the 'click & drag' sizing method stops working.

However, if you alter the size of the Search Box when it is next to the Address/URL Box... then the adjusted Search Box size seems to hold or 'stick' at its new size when you later move the Search Box or add other buttons that separate it from Address/URL Box... as in your toolbars screenshot above.

As a workaround... try using the 'Customize' option to place your Search Box immediately to the right of your Address/URL Box again... then 'click & drag' sizing should work (but not in 'Customize' mode, only when you return to 'normal' toolbars mode)... adjust the size of your Search Box... then move your Search Box back to where you want it on your toolbar layout.

This 'workaround' sizing method seems to work for me running latest PM 34.4.1 (64-bit) on Win 7... not yet tested on Win 10.

Toolbars with 'size adjusted' Seach Box.jpg
Pale Moon toolbars with a 'size adjusted' Search Box added.

Toolbars with smaller 'size adjusted' Search Box.jpg
Same toolbars with a smaller 'size adjusted' Search Box added.

Splat
Moonbather
Moonbather
Posts: 56
Joined: 2014-07-04, 06:51
Location: USA

Re: Shrink Search Box Size in Navigation Toolbar

Unread post by Splat » 2022-11-30, 18:51

Now that is very interesting and I thank you for your help and time. What you suggest isn't working for me. The search box still remains wide. URL and search boxes right next to each other, no icons between, and no luck. Also unable to resize the search box outside of customize mode.

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 33302
Joined: 2011-08-28, 17:27
Location: Tranås, SE
Contact:

Re: Shrink Search Box Size in Navigation Toolbar

Unread post by Moonchild » 2022-11-30, 18:57

It should work (works here). Take note, resize in normal operation mode, not customize mode.
"The best revenge is to not be like the person who wronged you." -- Marcus Aurelius
"Seek wisdom, not knowledge. Knowledge is of the past; wisdom is of the future." -- Native American proverb

Splat
Moonbather
Moonbather
Posts: 56
Joined: 2014-07-04, 06:51
Location: USA

Re: Shrink Search Box Size in Navigation Toolbar

Unread post by Splat » 2022-11-30, 19:21

I'll be damned. I tried that numerous times and it never worked. I just tried it again and now it works. 88th time is the charm! :) Thanks guys.

User avatar
RealityRipple
Astronaut
Astronaut
Posts: 541
Joined: 2018-05-17, 02:34
Location: Los Berros Canyon, California
Contact:

Re: Shrink Search Box Size in Navigation Toolbar

Unread post by RealityRipple » 2022-11-30, 20:34

Did some quick tests, looks like the url box and search box need to be next to each other with no additional toolbar items between them (reload/stop merged into the url box don't count) to allow resizing.

Speaking of reload/stop, @Blacklab: if you change the stop/reload order, they'll merge into a single button and be integrated into the end of the url box, should you wish that.

Blacklab
Keeps coming back
Keeps coming back
Posts: 935
Joined: 2012-06-08, 12:14

Re: Shrink Search Box Size in Navigation Toolbar

Unread post by Blacklab » 2022-11-30, 21:20

@RealityRipple: Thanks for kind info. :) I deliberately set my Stop & Reload buttons outside URL Bar donkey's years ago... probably a very old-fashioned habit these days! And I'm still fond of MC's coloured toolbar button set from PM 20 way-back-when in 2013. :thumbup:

Minor puzzle is why the one-line CSS script (above) that used to allow Search Bar width to be set exactly seems to have stopped working? :?

Could have been a PM UI update a long time ago... I rarely have the Search Box on my toolbars and wouldn't have tried altering the width I'd set previously until last evening... when the CSS script appeared to work once... so I posted it... and then no joy since? :thumbdown:

tpcsanh
Hobby Astronomer
Hobby Astronomer
Posts: 28
Joined: 2015-08-22, 13:45
Location: US

Re: Shrink Search Box Size in Navigation Toolbar

Unread post by tpcsanh » 2022-11-30, 22:07

Blacklab wrote:
2022-11-30, 21:20
Minor puzzle is why the one-line CSS script (above) that used to allow Search Bar width to be set exactly seems to have stopped working? :?
It works here. I used 25px, because unmodified it is about 300px.

Blacklab
Keeps coming back
Keeps coming back
Posts: 935
Joined: 2012-06-08, 12:14

Re: Shrink Search Box Size in Navigation Toolbar

Unread post by Blacklab » 2022-11-30, 23:19

tpcsanh wrote:It works here...
Yup... you're right... the CSS script to set exact Search Bar width (above) does work correctly on a new out-of-the-box Pale Moon profile. I have no idea why it didn't seem to work when I tested it on a new profile late last night! Finger-trouble or gremlins? :roll:

Sadly for me same CSS script still refuses to work with my normal Pale Moon profile. Tried directly adding script into my profile's 'userChrome.css' file... and then tried using Stylem extension. No go either way... and both methods used to work... so, some conflict must have 'arisen' with another CSS script I'm using, or possibly an extension, or possibly a change in Pale Moon's UI code?

Puzzle is I haven't altered any of my Pale Moon CSS in a good long while... and that script used to work? Hmm. :think:

Post Reply