Searchbar not showing input text

[francescocretti]

Hi.

The top searchbar does not show input text, even if it works (it shows correct results).
Is not a theming issue (I thought the text may have the name color of the background), it looks like the text is not rendered at all.

Here's a screenshot.

BTW - I find this theme to be the best one out there! Thanks for doing this!

[dmnsgn]

Thanks!

Do you have an online example or can you share more details (typedoc-material-theme, OS and browser versions)?
I am not able to reproduce it one the example: https://dmnsgn.github.io/typedoc-material-theme/

[francescocretti]

Hi @dmnsgn, thanks for the reply.

Here are my configurations:

typedoc.base.json

{
  "plugin": [
    "typedoc-plugin-merge-modules",
    "typedoc-material-theme"
  ],
  "themeColor": "#f2efeb",
  "favicon": "./assets/favicon.png",
  "mergeModulesRenameDefaults": true,
  "mergeModulesMergeMode": "module",
  "exclude": [
    "**/*.d.ts",
    "**/*.test.ts",
    "**/*.test.tsx",
    "**/__tests__/*",
    "**/.rollup.cache/*",
    "**/dist/*",
    "**/node_modules/*"
  ]
}

typedoc.json

{
  "extends": [
    "./typedoc.base.json"
  ],
  "tsconfig": "tsconfig.json",
  "name": "GeoXp Docs",
  "out": "public",
  "entryPoints": [
    "packages/*"
  ],
  "entryPointStrategy": "packages",
  "exclude": [
    "packages/eslint-config",
  ]
}

I'm working with Typescript (v5.4.5) on a Lerna Monorepo (lerna v8.1.8).

Mac OS 13.2.1 (Ventura) with Firefox 133 or Chrome 131 (same result).

Here's a published work in progress version of the docs I'm building -> https://geoxp.netlify.app/

Let me know if I can help debugging this ;)

[francescocretti]

Hi @dmnsgn . Did you have the chance to take a look at this?
Can I do something to help debugging?

[dmnsgn]

Looks like your material-style.css...

#tsd-search .field input {
  // ...
  top: calc(-100% - var(--top-app-bar-padding-vertical) - var(--safe-area-inset-top));
}

...is overwriting the correct styles that you have in a layer:

#tsd-search.has-focus .field input {
  top: 0;
  // ...
}

So you'd need to change your css selector with a :not or add your own styles with .has-focus.

[francescocretti]

@dmnsgn thanks!
That style is automatically generated by typedoc though.
I'll find a way to inject custom CSS rules

[francescocretti]

If anyone had the same issue, I was able to fix it injecting a custom CSS file and forcing top: 0 with !important keyword.

Dunno why this conflict happens in the first place though, since I did not touch any style.

Anyways:

typedoc.base.json:

{
  "plugin": [
    "typedoc-material-theme"
  ],
  "themeColor": "#f2efeb",
  "customCss": "./typedoc.style.css"
}

typedoc.style.css:

#tsd-search.has-focus .field input {
  top: 0 !important;
}

[dmnsgn]

@dmnsgn thanks! That style is automatically generated by typedoc though. I'll find a way to inject custom CSS rules

Looks like a change in their v0.27 indeed.

[dmnsgn]

@francescocretti typedoc-material-theme@1.3.0 should fix this and remove the need for you to inject a custom CSS file.