PyData Sphinx theme: DocSearch not showing on narrow screens

[kai687]

Split off from issue #33.

The Pydata Sphinx theme includes the searchbox twice (you can specify the template with html_theme_options.navbar_persistent). Once for wider screens and once for narrower screens.

The DocSearch UI can only be added once per page, so it's added to the element for wider screens only. This means the search is not available on narrower screens.

[agriyakhetarpal]

For those looking for a workaround or two: based on the PyData Sphinx Theme documentation, the div/template can be added under the navigation bar (navbar_center), the article header (i.e., before the heading of any page) in article_header_start, or in the primary or secondary sidebars.

[Charlie-XIAO]

For those looking for a workaround or two: based on the PyData Sphinx Theme documentation, the div/template can be added under the navigation bar (navbar_center), the article header (i.e., before the heading of any page) in article_header_start, or in the primary or secondary sidebars.

This is not working for me (unless I'm mistaken). navbar_center and both sidebars are also included twice for different screen sizes. article_header_start does not persist as one scroll down the page which I think is not a proper place to put the search box. Only navbar_start works for me.

[agriyakhetarpal]

Oops, thanks, @Charlie-XIAO – I did mean to mention navbar_start, not navbar_center. Yes, as for article_header_start, it would render on the top of every page, but it's not going to be a fixed header on scrolling. I agree on it not being a proper place for a search box.

[dylanh724]

I can repro this issue on sphinx-book-theme

[dylanh724]

This scss worked for me on sphinx-book-theme - feel free to dissect it to see if it'll help you guys:

/* -- General .search-button-field fixes for sphinx-book-theme workarounds -------- */
.sidebar-primary-item {
    /* Fix theme search button field for narrow screens */
    .search-button-field {
        display: flex; /* Align children horizontally */
        justify-content: space-between; /* Space between icon, text, and shortcut */
        align-items: center; /* Vertically */
        width: 100%; /* Ensure it spans the full width; TODO: necessary? */

        /* Undo the display:none and text oddities for narrow screens */
        .search-button__default-text {
            display: unset;
            flex-grow: 1; /* Allow text to take up the remaining space */
            text-align: left;
            font-size: 14px;
        }

        /* CTRL+K text is hidden on narrow screens */
        .search-button__kbd-shortcut {
            display: unset;
        }
    }
}

⚠️ I have a custom button, but it could be hidden in similar places causing similar issues