Adding Floating Action Button (FAB) for your mobile using CSS

Share & showcase
1

TL;DR

  • Here’s a CSS snippet to add a floating action button (FAB) to your mobile UI.
  • Copy and save snippet in code block below. Refer to CSS snippets - Obsidian Help for how to do so.
  • Adjust the parameters inside body.is-mobile .view-action accordingly. Save.

FAB-snippet-hero
FAB-snippet-hero1279×684 199 KB

I first started using FAB when I discovered Obsidian You theme for Obsidian (the theme’s name already imply the app’s). As I have a setup that syncs my vault to my phone for reference, review and quick edit, FAB is a finger-stretching saver. Over time, I adopted it into my theme and significantly modified the CSS – using Obsidian’s pre-defined variables, added hover property and adjust z-index and so on.

Here’s a trimmed down version of the CSS that applies only for Editing/Reading button (my other modification introduce a second FAB that you would use together with Commander plugin). Anyway, if you want to have FAB for Editing/Reading button in your Obsidian setup, simply load the following snippet and adjust the variables declaration inside body.is-mobile .view-action to suit your preferences.

This FAB applies to mobile only and since .is-mobile covers both tablet (>600px width) and phone, the button is also there if you use tablet/iPad. If you want strictly on phone only, swap the .is-mobile to .is-phone.

P/s: I did quick test on community theme compatibility but only for select few (i.e. Minimal, AnuPpuccin, Border, ITS Theme, Prism, and Shimmering Focus)

/* === Floating Action Button FAB === */
/* FAB option allow to select which Page Header button to be used for FAB 2nd button */

/* declare variables to be used for easy customisation
   other than these variables, other variables are obsidian's pre-defined */
body.is-mobile .view-action {
	--lst-fab-view-y: 10vh;   /* set to 0 for flushed bottom position */
	--lst-fab-view-x: 2vw;   /* set to 0 for flushed right position */
	--lst-fab-button-size: 60px;   /* set button box size */
	--lst-fab-button-radius: calc(var(--lst-fab-button-size) / 3);   /* divide 3 for square circle, divide 2 for circle */
	--lst-fab-toolbar-y-adj: 80px;
}

/* make the button "floating" and define customisation */
body.is-mobile div.view-actions > .view-action[aria-label^="Current view"] {
	position: absolute;
	top: calc(88vh - var(--lst-fab-view-y));
	right: calc(0vw + var(--lst-fab-view-x));
	width: var(--lst-fab-button-size);
	aspect-ratio: 1;
    transform: translate(-40%, 5%);
	border-radius: var(--lst-fab-button-radius);
	background-color: var(--background-secondary);
	box-shadow: 0px 0px var(--size-4-2) rgba(0,0,0,0.3);
}
body.is-mobile.mod-toolbar-open div.view-actions > .view-action[aria-label^="Current view"] {
	top: calc(88vh - var(--lst-fab-view-y) - var(--lst-fab-toolbar-y-adj));
}

/* make sure FAB is higher than backlinks control */
body.is-mobile .view-header {
	z-index: 30;
}

/* change background-color when hover */
body.is-mobile div.view-actions > .view-action.clickable-icon:hover {
	background-color: var(--background-accent);
}

update 27June2023 – added variable (i.e. --lst-fab-toolbar-y-adj) to adjust vertical position when mobile toolbar appear on the screen. this is to avoid FAB become hidden behind it partially. adjust accordingly, the 80px is to compensate for two rows of mobile toolbar.

8 Likes
3

This is fantastic thank you!

Quick question regarding the FAB when the keyboard is open on mobile. I have 2 rows for the mobile toolbar and notice that the FAB is hidden behind the toolbar when the keyboard is open. I’m a bit of a noob with customising the CSS. How would I go about making sure it isn’t covered by the toolbar?

TIA

4

I’ve fiddled with the fab-view-y: but is there anyway to set a particular specific y value ONLY when the keyboard is open?

6

well, i think that’s possible but rather i would be tackling based on mobile toolbar (easier). when ur on screen keyboard appear, normally the mobile toolbar also appear (based on my testing).

i’ll tweak the css later and reshare it.

1 Like
7

updated the snippet to account for mobile toolbar appearing when u in edit mode. see the the edited original post at the top click here

8

OMG, you’re a God.
This is indeed FAB!
THANKS

9

This is awesome, thanks.
Wondering why they don’t do this officially

10

This is amazing!!

On my phone I found the button wasn’t quite positioned consistently, so I made a small change to the CSS:

  • Change the Y position to be calc(100vh - 120px)
  • Remove the body.is-mobile.mod-toolbar-open div.view-actions > .view-action[aria-label^="Current view"] section

Now my button is perfectly aligned in any view.

/* FAB option allow to select which Page Header button to be used for FAB 2nd button */
/* declare variables to be used for easy customisation
   other than these variables, other variables are obsidian's pre-defined */
   body.is-mobile .view-action {
	--lst-fab-view-y: calc(100vh - 120px);  /* change the 120px value to move it up/down */
	--lst-fab-view-x: 2vw;   /* set to 0 for flushed right position */
	--lst-fab-button-size: 50px;   /* set button box size */
	--lst-fab-button-radius: calc(var(--lst-fab-button-size) / 3);   /* divide 3 for square circle, divide 2 for circle */
	--lst-fab-toolbar-y-adj: 0px;
}

/* make the button "floating" and define customisation */
body.is-mobile div.view-actions > .view-action[aria-label^="Current view"] {
	position: absolute;
	top: var(--lst-fab-view-y);
	right: calc(0vw + var(--lst-fab-view-x));
	width: var(--lst-fab-button-size);
	aspect-ratio: 1;
    transform: translate(-40%, 5%);
	border-radius: var(--lst-fab-button-radius);
	background-color: var(--background-secondary);
	box-shadow: 0px 0px var(--size-4-2) rgba(0,0,0,0.3);
}

/* make sure FAB is higher than backlinks control */
body.is-mobile .view-header {
	z-index: 30;
}

/* change background-color when hover */
body.is-mobile div.view-actions > .view-action.clickable-icon:hover {
	background-color: var(--background-accent);
}
2 Likes