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

Support Forum

Howto Remove .outer-wrapper height: 100% from new search page css in 60esr?

Posted

Moving from 52.9esr to 60.4esr the new tab for search page is radically different. After disabling all the cruft leaving the search and top-sites (as 52.9) the search bar and top sites are now centered in the page instead of providing a nicely formatted search at the top with top-sites below. Digging with the inspector, the problem is the css on:

where you have

   .outer-wrapper {
       display: flex;
       flex-grow: 1;
       height: 100%;   <-- this is the problem
       padding: 30px 32px 32ps;

}

Removing the `height: 100%;` restores the desired layout. How do I make this permanent in userChrome.css? What do I put there?

Moving from 52.9esr to 60.4esr the new tab for search page is radically different. After disabling all the cruft leaving the search and top-sites (as 52.9) the search bar and top sites are now centered in the page instead of providing a nicely formatted search at the top with top-sites below. Digging with the inspector, the problem is the css on: <div class="outer-wrapper wide-layout-enabled" data-reactroot=""> where you have .outer-wrapper { display: flex; flex-grow: 1; height: 100%; <-- this is the problem padding: 30px 32px 32ps; } Removing the `height: 100%;` restores the desired layout. How do I make this permanent in userChrome.css? What do I put there?
Attached screenshots

Chosen solution

This should not be in userChrome.css, but in userContent.css.

The file should look sth like this:

	@namespace url(http://www.w3.org/1999/xhtml);
	
	@-moz-document url("about:newtab") {
	.outer-wrapper {
		height: unset !important;
		}
	}
Read this answer in context 1

Additional System Details

Installed Plug-ins

  • Shockwave Flash 32.0 r0

Application

  • User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:60.0) Gecko/20100101 Firefox/60.0

More Information

Question owner

For some reason the question did not capture the following:

Digging with the inspector, the problem is the css on:

<div class="outer-wrapper wide-layout-enabled" data-reactroot="">

where you have...

(I had to use the character substitutions for "<" & ">" to make it display in the question)

For some reason the question did not capture the following: Digging with the inspector, the problem is the css on: &lt;div class="outer-wrapper wide-layout-enabled" data-reactroot=""&gt; where you have... (I had to use the character substitutions for "&lt;" &amp; "&gt;" to make it display in the question)
TyDraniu
  • Top 25 Contributor
293 solutions 1639 answers

Chosen Solution

This should not be in userChrome.css, but in userContent.css.

The file should look sth like this:

	@namespace url(http://www.w3.org/1999/xhtml);
	
	@-moz-document url("about:newtab") {
	.outer-wrapper {
		height: unset !important;
		}
	}
This should not be in userChrome.css, but in '''userContent.css'''. The file should look sth like this: <pre> @namespace url(http://www.w3.org/1999/xhtml); @-moz-document url("about:newtab") { .outer-wrapper { height: unset !important; } } </pre>

Question owner

TyDraniu said

This should not be in userChrome.css, but in userContent.css. The file should look sth like this:
	@namespace url(http://www.w3.org/1999/xhtml);
	
	@-moz-document url("about:newtab") {
	.outer-wrapper {
		height: unset !important;
		}
	}

Thank you for your answer.

I must have screwed something up when I copy/pasted into userContent.css. This does work! Thank you !

''TyDraniu [[#answer-1190649|said]]'' <blockquote> This should not be in userChrome.css, but in '''userContent.css'''. The file should look sth like this: <pre> @namespace url(http://www.w3.org/1999/xhtml); @-moz-document url("about:newtab") { .outer-wrapper { height: unset !important; } } </pre> </blockquote> Thank you for your answer. I must have screwed something up when I copy/pasted into userContent.css. This does work! Thank you !

Modified by drankinatty