Padding/Margin of dictionary elements #173

Closed
facelessuser opened this Issue Feb 18, 2017 · 7 comments

Comments

Projects
None yet
2 participants
@facelessuser
Contributor

facelessuser commented Feb 18, 2017

Description

It seems dictionary elements don't have any padding or margin at their bottom when in normal vieweing mode, but when in mobile view, we get good padding.

Normal wide viewing mode:

screenshot 2017-02-18 09 07 12

Mobile viewing (narrow mode).

screenshot 2017-02-18 09 09 15

Expected behavior

In normal viewing mode, dictionaries will have good looking margin and/or padding at bottom.

Actual behavior

During normal viewing mode dictionaries have no padding and/or margin at the bottom.

Steps to reproduce the bug

  1. Create two dictionaries after each other in documents
  2. Render documents
  3. View in normal, wide viewing and mobile, narrow viewing and compare.

Package versions

  • Python: Any
  • MkDocs: 0.16.1
  • Material: 1.0.5

Project configuration

Relevant portion:

markdown_extensions:
  - markdown.extensions.toc:
      slugify: !!python/name:pymdownx.slugs.uslugify
      permalink: 
  - markdown.extensions.admonition:
  - markdown.extensions.smarty:
      smart_quotes: false
  - pymdownx.betterem:
  - markdown.extensions.attr_list:
  - markdown.extensions.def_list:
  - markdown.extensions.tables:
  - markdown.extensions.abbr:
  - pymdownx.extrarawhtml:
  - pymdownx.superfences:
      css_class: codehilite
  - pymdownx.highlight:
      extend_pygments_lang:
        - name: php-inline
          lang: php
          options:
            startinline: true
  - pymdownx.inlinehilite:
      css_class: codehilite
  - pymdownx.magiclink:
      repo_url_shortener: true
      base_repo_url: https://github.com/facelessuser/pymdown-extensions
  - pymdownx.tilde:
  - pymdownx.caret:
  - pymdownx.smartsymbols:
  - pymdownx.emoji:
      emoji_generator: !!python/name:pymdownx.emoji.to_svg
  - pymdownx.escapeall:
      hardbreak: True
      nbsp: True
  - pymdownx.tasklist:
      custom_checkbox: true
  - pymdownx.progressbar:
  - pymdownx.arithmatex:
  - pymdownx.mark:
  - pymdownx.plainhtml:
      strip_attributes: ''
  - pymdownx.snippets:
      base_path: docs/snippets

System information

  • OS: Don't think it matters, but tested on MacOS
  • Browser: Not sure if this is relevant, but Chrome: 56.0.2924.87 (64-bit)
@squidfunk

This comment has been minimized.

Show comment
Hide comment
@squidfunk

squidfunk Feb 19, 2017

Owner

Thanks for reporting. Can you provide some sample Markdown which causes the issue?

Owner

squidfunk commented Feb 19, 2017

Thanks for reporting. Can you provide some sample Markdown which causes the issue?

@facelessuser

This comment has been minimized.

Show comment
Hide comment
@facelessuser

facelessuser Feb 19, 2017

Contributor

Yeah. The key is to have markdown.extensions.def_list enabled.

Here's a simple example. We will do two dictionaries, each with a list (there is a space after the colons).

Dictionary 1
: 
    - list

Dictionary 2
: 
    - list

When you inspect the HTML in your browser, the ul tag will have no margin at the bottom (assuming still rendered in full, wide mode). But if you inspect in mobile mode, you will have a margin of about 16. This seems to affect many elements like code blocks (as shown in the opening post) etc.

Contributor

facelessuser commented Feb 19, 2017

Yeah. The key is to have markdown.extensions.def_list enabled.

Here's a simple example. We will do two dictionaries, each with a list (there is a space after the colons).

Dictionary 1
: 
    - list

Dictionary 2
: 
    - list

When you inspect the HTML in your browser, the ul tag will have no margin at the bottom (assuming still rendered in full, wide mode). But if you inspect in mobile mode, you will have a margin of about 16. This seems to affect many elements like code blocks (as shown in the opening post) etc.

@facelessuser

This comment has been minimized.

Show comment
Hide comment
@facelessuser

facelessuser Feb 19, 2017

Contributor

Wide mode:

screenshot 2017-02-18 20 33 29


Mobile:

screenshot 2017-02-18 20 33 15

Contributor

facelessuser commented Feb 19, 2017

Wide mode:

screenshot 2017-02-18 20 33 29


Mobile:

screenshot 2017-02-18 20 33 15

@squidfunk

This comment has been minimized.

Show comment
Hide comment
@squidfunk

squidfunk Feb 19, 2017

Owner

First of all, thanks for the very detailed explanation! It's a pleasure to work with such a detailed bug report. The issue was fixed in commit 3e50c33.

The margin bug came from the reset of the bottom margin of the last element within md-content__inner which was not correctly scoped, as it applied to every :last-child below md-content__inner. This reset is necessary due to margin-collapse of the parent element, so that everything aligns with the sidebars. I re-scoped it with the child selector >.

I furthermore added some styles for definition lists - left them out originally as I wanted to wait if someone even uses them. I aligned the lists with the normal lists and added a section on the specimen page:

bildschirmfoto 2017-02-19 um 16 17 14

As I just released 1.0.4 three days ago and 1.0.5 yesterday fixing some nasty bugs, I will wait for some more stuff to accumulate before releasing it because I consider this a rather minor issue, hope that's okay for you.

Owner

squidfunk commented Feb 19, 2017

First of all, thanks for the very detailed explanation! It's a pleasure to work with such a detailed bug report. The issue was fixed in commit 3e50c33.

The margin bug came from the reset of the bottom margin of the last element within md-content__inner which was not correctly scoped, as it applied to every :last-child below md-content__inner. This reset is necessary due to margin-collapse of the parent element, so that everything aligns with the sidebars. I re-scoped it with the child selector >.

I furthermore added some styles for definition lists - left them out originally as I wanted to wait if someone even uses them. I aligned the lists with the normal lists and added a section on the specimen page:

bildschirmfoto 2017-02-19 um 16 17 14

As I just released 1.0.4 three days ago and 1.0.5 yesterday fixing some nasty bugs, I will wait for some more stuff to accumulate before releasing it because I consider this a rather minor issue, hope that's okay for you.

@squidfunk

This comment has been minimized.

Show comment
Hide comment
@squidfunk

squidfunk Feb 19, 2017

Owner

I will re-open this issue and leave it open until it is released.

Owner

squidfunk commented Feb 19, 2017

I will re-open this issue and leave it open until it is released.

@squidfunk squidfunk reopened this Feb 19, 2017

@facelessuser

This comment has been minimized.

Show comment
Hide comment
@facelessuser

facelessuser Feb 19, 2017

Contributor

Nice, no worries, I'll probably just pick up the changes in my extra CSS until this gets released. Thanks for getting a fix so quickly!

Contributor

facelessuser commented Feb 19, 2017

Nice, no worries, I'll probably just pick up the changes in my extra CSS until this gets released. Thanks for getting a fix so quickly!

@squidfunk squidfunk added this to the 1.1.0 milestone Feb 26, 2017

@squidfunk

This comment has been minimized.

Show comment
Hide comment
@squidfunk

squidfunk Feb 26, 2017

Owner

Fix released in 1.1.0

Owner

squidfunk commented Feb 26, 2017

Fix released in 1.1.0

@squidfunk squidfunk closed this Feb 26, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment