[Bug]: not display the icons for commands in the second and later rows(mobile v1.14.16)

Question

[Bug]: not display the icons for commands in the second and later rows(mobile v1.14.16)

Akiyam-hub opened this issue 10 months ago · comments

Akiyam commented 10 months ago

Describe the bug

I updated to mobile v1.14.16

Currently, the commander's custom toolbar does not display the icons for commands in the second and later rows

Relevant errors (if available)

No response

Steps to reproduce

I have tried the following with no improvement

Restarting the plugin
Restarting the application

Expected Behavior

No response

Additional context

No response

Operating system

Android

Jonas L. Holm commented 9 months ago

Thanks!

ribber · Answer 1 · Sat Oct 14 2023 16:25:26 GMT+0800 (China Standard Time)

I have this issue too

zanodor · Answer 2 · Sat Oct 14 2023 20:43:43 GMT+0800 (China Standard Time)

Same on iOS.

hkw1831 · Answer 3 · Sun Oct 15 2023 09:55:27 GMT+0800 (China Standard Time)

Same on iOS. Probably due to the new release v1.4.16 contains the following:

iOS: Added new persistent "Hide keyboard" button to the mobile toolbar.

bri watson · Answer 4 · Sun Oct 15 2023 18:35:30 GMT+0800 (China Standard Time)

Affects android as well

hkw1831 · Answer 5 · Sun Oct 15 2023 19:38:18 GMT+0800 (China Standard Time)

Did some analysis:

Found that after obsidian is upgraded, the html tag in mobile-toolbar is one level indent: from <div class="mobile-toolbar-options-container "> -> <div class="mobile-toolbar-option"> to <div class="mobile-toolbar-options-container"> -> <div class="mobile-toolbar-options-list"> -> <div class="mobile-toolbar-option">

Left hand side: before upgrade. Right hand side: after upgrade.

Hence replacing .mobile-toolbar-options-container to .mobile-toolbar-options-list in styles/advanced-toolbar.scss should be able to display icons in multiple rows.

To remove the "Hide keyboard" button in iOS, as <div class="mobile-toolbar-floating-options"> containing the button which is a child of <div class="mobile-toolbar-options-list">. Adding .mobile-toolbar-floating-options {display:none} in some css file should work.

Bojji-git · Answer 6 · Mon Oct 16 2023 15:08:57 GMT+0800 (China Standard Time)

Same here. I'm on Android 11

Akiyam · Answer 7 · Mon Oct 16 2023 15:41:10 GMT+0800 (China Standard Time)

.mobile-toolbar-options-container to .mobile-toolbar-options-list styles/advanced-toolbar.scss should be able to display icons in multiple rows.

Oh! I tried its steps.
It works the same way on Android.

XQZmeSIR · Answer 8 · Tue Oct 17 2023 16:44:05 GMT+0800 (China Standard Time)

.mobile-toolbar-options-container to .mobile-toolbar-options-list styles/advanced-toolbar.scss should be able to display icons in multiple rows.

Oh! I tried its steps. It works the same way on Android.

Can you elaborate on the solution a little bit? Where should we make these changes?
Because II added ‘.mobile-toolbar-floating-options {display:none}’ in CSS but multiple rows still don’t work. I am on IOS.

WolfSage · Answer 9 · Wed Oct 18 2023 09:42:25 GMT+0800 (China Standard Time)

This is nuking my ability to use Obsidian on android. On that device, I downloaded a generic text editing app and tried replacing .mobile-toolbar-options-container with .mobile-toolbar-options-list in .obsidian/plugins/obsidian-commander/styles.css but that didn't fix the issue. I assumed styles/advanced-toolbar.scss is compiled to styles.css, no?

@Akiyam-hub did you fork, modify, and recompile this repo and transfer it to your phone?

hkw1831 · Answer 10 · Wed Oct 18 2023 10:08:14 GMT+0800 (China Standard Time)

This is my only changes. Hope it helps.

Replace this file to .obsidian/plugins/cmdr/styles.css

https://gist.github.com/hkw1831/2c7176cd0ff024724f9c812f706d503c

fsover2 · Answer 11 · Wed Oct 18 2023 12:11:29 GMT+0800 (China Standard Time)

This is my only changes. Hope it helps.

https://gist.github.com/hkw1831/2c7176cd0ff024724f9c812f706d503c

This worked for me on Android. Thanks!

marshes · Answer 12 · Wed Oct 18 2023 20:23:33 GMT+0800 (China Standard Time)

This is my only changes. Hope it helps.

https://gist.github.com/hkw1831/2c7176cd0ff024724f9c812f706d503c

Can confirm these three long lines also fix it on iOS. I saved the line locally as a txt file and then imported them to my vault using a Shortcut. Definitely a pain to add custom css to iOS but doable.

zanodor · Answer 13 · Thu Oct 19 2023 00:36:25 GMT+0800 (China Standard Time)

This is my only changes. Hope it helps.
https://gist.github.com/hkw1831/2c7176cd0ff024724f9c812f706d503c

Can confirm these three long lines also fix it on iOS. I saved the line locally as a txt file and then imported them to my vault using a Shortcut. Definitely a pain to add custom css to iOS but doable.

You can use the Taio app to see and enter hidden folders, after adding your vault.

Bojji-git · Answer 14 · Thu Oct 19 2023 13:18:34 GMT+0800 (China Standard Time)

\u003Cdiv

Where can I find this file so that I perform the changes?

zanodor · Answer 15 · Thu Oct 19 2023 19:11:09 GMT+0800 (China Standard Time)

\u003Cdiv

Where can I find this file so that I perform the changes?

A few messages up, you see: .obsidian/plugins/cmdr/styles.css.
Make a copy of this file, like styles.css.bak and create a new one with the lines in the gist linked above, save it as styles.css and save it (in the cmdr folder).
You can do this on a PC if you have synced to your desktop or laptop or you can do it on your mobile as well, with some text editor. I mentioned Taio for iOS.

marshes · Answer 16 · Thu Oct 19 2023 22:23:38 GMT+0800 (China Standard Time)

An alternate place that the css file can be placed for iOS (and presumably Android is /<vaultname>/.obsidian/snippets/mobileToolbarFix.css and then you can turn the file on in the bottom of the appearance settings in Obsidian within the css snippets section.

Adding the vault name directory in Taio as an Added Location is new to me and a great find! Makes it pretty easy to do. (Thanks for that one)

edit: typo

zanodor · Answer 17 · Thu Oct 19 2023 23:01:42 GMT+0800 (China Standard Time)

An alternate place that the css file can be placed for iOS (and presumably Android is /<vaultname>/.obsidian/snippets/mobileToolbarFix.css and then you can turn the file on in the bottom of the appearance settings in Obsidian within the css snippets section.

Adding the vault name directory in Taibo as an Added Location is new to me and a great find! Makes it pretty easy to do. (Thanks for that one)

You mean Taio.
Textastic can do it as well but it's not free.

Alternatively, can use a terminal like A-Shell.

Bojji-git · Answer 18 · Fri Oct 20 2023 04:55:24 GMT+0800 (China Standard Time)

\u003Cdiv

Where can I find this file so that I perform the changes?

A few messages up, you see: .obsidian/plugins/cmdr/styles.css.
Make a copy of this file, like styles.css.bak and create a new one with the lines in the gist linked above, save it as styles.css and save it (in the cmdr folder).
You can do this on a PC if you have synced to your desktop or laptop or you can do it on your mobile as well, with some text editor. I mentioned Taio for iOS.

Many thanks! Managed to do it. Copied the .css file and then renamed the extension to .md. Opened the file via Obsidian, deleted everything, then pasted the gist text onto it. Rerenamed to .css extension. Moved the file onto the cmdr folder, and the toolbar was back to work as expected.

Rob Cherny · Answer 19 · Fri Oct 20 2023 07:27:22 GMT+0800 (China Standard Time)

Is there anyone that can open a pull request with this fix? I can’t before this weekend at the earliest…

superjangooo · Answer 20 · Fri Oct 20 2023 15:38:47 GMT+0800 (China Standard Time)

Amazing work, thanks for fixing it and sharing your solution!

Steve Williams · Answer 21 · Fri Oct 20 2023 18:28:52 GMT+0800 (China Standard Time)

Thanks for this fix. Works great!

Macleod Sawyer · Answer 22 · Mon Oct 23 2023 01:40:45 GMT+0800 (China Standard Time)

I submitted the PR #111 for this, new update has been merged and the issue appears to be fixed — make sure to update your extension in Obsidian!