algolia / algolia/docsearch

Make it easier to show search results *above* the input

Open
#257 6 comments 0 reactions 0 assignees View on GitHub
DocSearch v3 enhancement feature
Dominant language
TypeScript
Stars
4.4k
Forks
439
Avg merge
14h 32m
Merged PRs (30d)
19

Description

Right now, in all conditions (as far as I can tell) the search results appear below the input. This is clearly awkward if your input is at the bottom of the page.

This is made more awkward by the CSS used for this being included inline in the dropdown element, making it hard to easily customize. I've worked around this ourselves with the following:

```css
// Forcibly override the dropdown position
.ds-dropdown-menu {
top: initial !important;
bottom: 100%;
}

// Remove the arrow/caret entirely, since it's awkward to fix
.ds-dropdown-menu:before {
display: none;
}
```

It'd be nice to make this easier (in a perfect world, it'd happen automatically, the same as the left/right switch does), but it'd be good to at least document your recommended approach to this somewhere.

Contributor guide

Open the contributing guide

Research direction

Start by locating the dropdown implementation that emits inline CSS for .ds-dropdown-menu and review how its placement is chosen. Define done as supporting results above a bottom-positioned input, or documenting the recommended customization approach, with the existing left/right switching behavior as a reference.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, typescript
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.