@RossBoone This post has a link to my calendar concept app. I’ll warn you that it’s not a pretty or a simple process. It has some noticeable bugs due to the heavy usage of CSS to manipulate things. @Manu.n may have a cleaner version and I think there is a couple of others floating around, but I don’t know if anybody else has shared a copyable version.
Edit: Actually it looks like @Manu.n’s version is copyable, so it might be work looking at his.
very cool. Thanks @Jeff_Hager . I’ll see if I can play with this.
Hi
Please is it possible to have different colours for each icon?
i.e.
Waiting: Yellow
Lost: Red
Won: Green
Do you have a fixed set of components on this screen? Do you have any conditional visibilities?
Yes and Yes
Do you want to show the 3 above components at once or are there any conditions based on the user’s input?
There will be visibility conditions foe the three. They all won’t show at once hence the same title (status)
Then you can have an If Then Else column on that screen and change the color accordingly.
Let’s say:
If status is waiting then
<pre><span><style>
[data-test="list-item"] >div >div >svg {
fill: yellow;
}
Do the same for the other two.
Then point the rich text component to that column.
Perfect!!!
Thanks a bunch
Hi @ThinhDinh,
thank you for the floating back button css.
Do you know if it is possible to position a real floating button (which has actions) on that top right position. For me the standard floating button is too large and therefore sometimes covers important elements on the screen.
Thanks.
Here’s my attempt to do it.
<pre><span><style>
[data-test="glide-app-bar"] >* {
backdrop-filter: blur(0px);
background: transparent;
-webkit-backdrop-filter: blur(0px);
}
[data-test="nav-button-menu"] svg {
display: none;
}
[data-test="nav-bar"] >div +* {
color: transparent !important;
}
.fab-target >* {
position:fixed;
width:50px;
height:50px;
top: 5%;
}
.fab-target >:nth-child(1) {
left: 5% !important;
}
.fab-target >:nth-child(2) {
right: 5% !important;
}
Thank you @ThinhDinh ,
the positioning works perfectly,
In my case I want to have the screen title and I need to scroll the content and therefore the first part, which sets the backdrop-filter, isn’t ideal, because then the content scrolls over the title.
I tried to position the floating button above the blurry header with z-index, but this didn’t work out.
Do you have any idea how to position the button on top of everything else?
this is what I tried
<pre><span><style>
[data-test="nav-button-menu"] svg {
display: none;
}
.fab-target >* {
position:fixed;
width:50px;
height:50px;
top: 5%;
}
.fab-target >:nth-child(1) {
right: 5% !important;
}
You can insert this piece of CSS right after : pre.span.style
[data-test="glide-app-bar"] {
z-index: unset;
}
[data-test="nav-bar"] {
z-index: 100;
}
Thanks @migo , unfortunately the text scrolls over the title.
The CSS suggested by @ThinhDinh from the post above works much better
[data-test="glide-app-bar"] >* {
backdrop-filter: blur(0px);
background: transparent;
-webkit-backdrop-filter: blur(0px);
}
I tried it already before, but the text also scrolls over the title as in my last image.
I agree with you, this does not solve your problem … sorry 
Maybe you should give up the idea of placing the floating button so high? Replace top: 5% with top: 10% in your example and everything will look almost the way you want 
I did try doing this using z-index as well, but never succeeded 
Probably this is the best solution:
But in your Vegan showcase, your floating is on top right corner and the title zone doesn’t hide it.
How’s that?
If you put a top title, does it remove any transparency or prevent from clicking on the button?
Thks, ThinhDinh