Button Style on Mobile

[Jonathan-Wallace]

TLDR I'm trying and failing to make button width on mobile not be the width of the device.

On Android, the inline button width defaults to note/device width (switching between portrait and landscape proves this), while on PC you can have multiple inline buttons per line. I tried applying a custom css class to the button, but that only affects the desktop rendered button. The mobile version is still the width of the note.

I realized the snippet wasn't syncing, so I created from my android device, and its affecting the height of the button, but its still page/device width.

Do you have a suggestion as to how I can change the width of the buttons on mobile? If you could point me to what to change in the code, I can do that myself, if you don't want to make an official change.

[OuchPotato]

Obsidian 1.4.0 API 1.0.0 mobile user

In Buttons' plugin folder open main.js.

On 1451 line you'll see createButton function, and inner createEl function:

const button = el.createEl("button", {
        cls: args.class
            ? `${args.class} ${args.color}`
            : `button-default ${args.color ? args.color : ""}`,
    });

Left argument is a <tag> of element, right argument is a DomElementInfo element, which contains cls property. Make array [] as value of this property and add second class.

Was:

cls: args.class
    ? `${args.class} ${args.color}`
    : `button-default ${args.color ? args.color : ""}`,

Became:

cls: [
    args.class
    ? `${args.class} ${args.color}`
    : `button-default ${args.color ? args.color : ""}`,
    inline ? "button-inline" : ""
]

In style.css of plugin or your css-snippet add css-declaration:

.button-inline {
  width: unset !important;
  height: unset !important;
  display: inline-block !important;
  padding: 0 10px;
}

Seems to works fine.

Remember, if you have changed the plugin's styles.css, then you must restart the application to apply the changes.

[shabegom]

Submit a PR