anki icon indicating copy to clipboard operation
anki copied to clipboard

Some issues with QPushButtons custom stylesheet's padding (Windows)

Open jcznk opened this issue 4 months ago • 2 comments

Testing on Anki 25.08 beta 5. Also reproducible as far back as ~ 2.1.55/2.1.56.

Stylesheet.py uses this custom styling

    def button(self, tm: ThemeManager) -> str:
        # For some reason, Windows needs a larger padding to look the same
        button_pad = 25 if is_win else 15
        return f"""
    QPushButton {{ padding-left: {button_pad}px; padding-right: {button_pad}px; }}

I believe this code may be an updated version of the one found in this PR, intended to address the same issue - namely, as a workaround to increase the width of the Help, Add, History, and Close buttons in the Add window.

This works well for the most part, but it also introduces some issues, particularly with certain add-ons. Since this is a static CSS rule, it doesn’t account for the actual space available around the buttons.

For example, the extra padding may reduce the space available for button icons or placeholders.


Advanced Copy Fields — affected button: the one with the >> symbol, second line from the top.

  1. Current custom stylesheet (the >> symbol is missing):
    Advanced Copy with current Custom Stylesheet

  1. After disabling
    QPushButton {{ padding-left: {button_pad}px; padding-right: {button_pad}px; }}:
    Advanced Copy with no QPushButton padding

  1. After disabling all QPushButton custom styles (using Fusion as the Qt style):
    Advanced Copy with QPushButton native Qt fusion styling

Searching PDF Reading and Note-Taking in Add Dialog (Fixed by Shigeඞ)

  1. Current custom stylesheet (the labels of the buttons at the bottom of the screen are clipped on both sides, making them unreadable):
    SIAC with Custom Stylesheet

  1. After disabling
    QPushButton {{ padding-left: {button_pad}px; padding-right: {button_pad}px; }}:
    SIAC with no QPushButton padding

  1. After disabling all QPushButton custom styles (using Fusion as the Qt style):
    SIAC with QPushButton native Qt fusion styling

jcznk avatar Aug 08 '25 17:08 jcznk

Thank you for your research! If removing some of the existing styling would improve appearance without causing regressions in other areas, I'm all for it.

dae avatar Aug 09 '25 06:08 dae

It’s not possible to simply remove this line:

QPushButton {{ padding-left: {button_pad}px; padding-right: {button_pad}px; }}

Otherwise, buttons like Help, Add, History, and Close in the Add window will become very small (see PR #2115).

A better fix would be to remove all custom styles related to QPushButton (I do that on my computer), but that’s a bit of a drastic approach and could risk making the UI look more inconsistent.

The underlying issue seems to be that in Qt, setting even a single style that affects padding, border, or margin (for example, QPushButton {{ margin: 1px; }}) will override the native button rendering. At that point, all those aspects must be recreated manually in the stylesheet, which is essentially CSS and less flexible than Qt’s native widget rendering.

jcznk avatar Aug 13 '25 00:08 jcznk