[Bug]: not display the icons for commands in the second and later rows(mobile v1.14.16)
Akiyam-hub opened this issue · 23 comments
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
I have this issue too
Same on iOS.
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.
Affects android as well
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.
Same here. I'm on Android 11
.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.
.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.
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?
This is my only changes. Hope it helps.
Replace this file to .obsidian/plugins/cmdr/styles.css
https://gist.github.com/hkw1831/2c7176cd0ff024724f9c812f706d503c
This is my only changes. Hope it helps.
https://gist.github.com/hkw1831/2c7176cd0ff024724f9c812f706d503c
This worked for me on Android. Thanks!
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.
This is my only changes. Hope it helps.
https://gist.github.com/hkw1831/2c7176cd0ff024724f9c812f706d503cCan 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.
\u003Cdiv
Where can I find this file so that I perform the changes?
\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.
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
An alternate place that the css file can be placed for iOS (and presumably Android is
/<vaultname>/.obsidian/snippets/mobileToolbarFix.cssand 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.
\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, likestyles.css.bakand create a new one with the lines in the gist linked above, save it asstyles.cssand 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.
Is there anyone that can open a pull request with this fix? I can’t before this weekend at the earliest…
Amazing work, thanks for fixing it and sharing your solution!
Thanks for this fix. Works great!
Thanks!