Minigallery rendered in column instead of line

rflamary commented 2 years ago

I have noted in the last release that the minigalleries do not render in lines but as columns:

From the "master" version of the doc https://pythonot.github.io/master/quickstart.html

Before it was giving this:

I don't really know what to do this seems like some css stuff ?

larsoner commented 2 years ago

Yes probably. @alexisthual any ideas on how to fix this?

larsoner commented 2 years ago

(and the gallery in #990 has the same problem after fixing / removing the width CSS override that caused the single column to be small as well)

rflamary commented 2 years ago

yes indeed I saw that also in #990 but it felt like a separate bug because it appear when using manual minigalleries. But it appears indeed in the automatic mini-galleries for each classes. I let you decide if it is a duplicate.

AdeelH commented 2 years ago

@larsoner, I am still encountering this problem even in version 0.11.1. Version 0.10.1 seems to work fine, however. Screenshots below.

Tested with both furo and pydata_sphinx_theme. Same results in each case.

Version `0.11.1`

Version `0.10.1`

More details

The only custom CSS I currently have is:

article p.caption {
    font-size: inherit;
}

This is how I am using nbgallery:

.. nbgallery::
    :name: nbshpinx-gallery
    :glob:

    reading_raster_data
    reading_vector_data
    reading_labels
    sampling_training_data
    visualize_data_samples
    misc

Extensions in conf.py:

extensions = [
    # https://www.sphinx-doc.org/en/master/tutorial/automatic-doc-generation.html
    'sphinx.ext.autodoc',
    'sphinx.ext.autosummary',
    # support Google-style docstrings
    # https://www.sphinx-doc.org/en/master/usage/extensions/napoleon.html
    'sphinx.ext.napoleon',
    # mardown support
    'myst_parser',
    # allow linking to python docs; see intersphinx_mapping below
    'sphinx.ext.intersphinx',
    # better rendering of pydantic Configs
    'sphinxcontrib.autodoc_pydantic',
    # for linking to source files from docs
    'sphinx.ext.viewcode',
    # jupyter notebooks
    'nbsphinx',
    # jupyter notebooks in a gallery
    'sphinx_gallery.load_style',
]

larsoner commented 2 years ago

Can you try latest master? I thought all the necessary fixes went out in 0.11.1 but maybe they didn't.

I do know several projects are using this without problems now, so it seems strange that it doesn't work for you. Maybe use Chrome inspection to look at https://sphinx-gallery.github.io/stable/auto_examples/index.html and compare the CSS classes and their properties to your output?

AdeelH commented 2 years ago

Sorry for the delayed response. Here is what I found:

Using master (as of Oct ~14) does not fix this issue.
Comparing the HTML/CSS:
- When using 'sphinx_gallery.gen_gallery', the sphx-glr-thumbcontainer <div>s are not inside the sphx-glr-thumbnails <div>. The sphx-glr-thumbcontainers were generated in the place where I had my .. nbgallery:: directive, while the sphx-glr-thumbnails <div> has been added below that and has no children.
- When using 'sphinx_gallery.load_style', the sphx-glr-thumbnails <div> is missing entirely.
- In this case, manually adding the sphx-glr-thumbnails <div>, fixes the alignment issue:
```
.. raw:: html

  <div class="sphx-glr-thumbnails">

.. nbgallery::
  ...

.. raw:: html

  </div>
```
  - However, the captions and the tooltip behavior (as shown in https://sphinx-gallery.github.io/stable/auto_examples/index.html) is still missing.
    - The sphx-glr-thumbcontainers do not have the tooltip attribute.
    - The sphx-glr-thumbnail-title div is missing.
    - <p class="caption"> and <span class="caption-text"> are present in mine but not in the reference.

larsoner commented 2 years ago

When using 'sphinx_gallery.gen_gallery', the sphx-glr-thumbcontainer
s are not inside the sphx-glr-thumbnails

Ouch, seems like a bug

When using 'sphinx_gallery.load_style', the sphx-glr-thumbnails
is missing entirely.

Also seems like a bug

@AdeelH do you want to try a PR to fix this? It seems like you have a handle on which elements should be nested, and when it does/doesn't happen. I'm not sure what our tests are like for load_style, but it would be nice to have tests for that and gen_gallery that the right divs show up with the correct nesting structure in both places!

AdeelH commented 2 years ago

Sure, I can take a stab at it, but it will take a while for me to become familiar with the codebase.

AdeelH commented 2 years ago

This seems to be a compatibility issue between nbsphinx and sphinx-gallery v0.11 and this has already been reported over there https://github.com/spatialaudio/nbsphinx/issues/655. I don't think anything necessarily needs to change in sphinx-gallery.

sphinx-gallery / sphinx-gallery