Add Floating Buttons to Non-Detail views

Currently it’s not possible to add any components to List views, which makes sense for the most part.

However I think it would be nice to allow for floating buttons which don’t t interfere with the layout.

I am aware they still function like on-page components so a new ‘list view floating button component’ would likely need to be built. Just a suggestion as there have been a few times I’ve wanted to perform actions from list view pages.

Try using Link to Screen, which will give you more customization.

2 Likes

I do tend to do this, but it is unavoidable when users click ‘See All’ on an inline list that is displaying partial data

Yeah, this could be useful.
Personally, I rarely use a List Layout because of this constraint. Even if all I intend to display on the screen is an Inline List, I’ll start with a Details Layout and then add a List component - just in case…

However, there is at least one scenario where you don’t have that option, which is with a List Relation component. When you use that and click through, you land on a List Layout which can’t be changed. So it would be handy in that case to have the option to add a floating button.

1 Like

Try this per @ThinhDinh

/*-- Hide See All -- */
<pre><span><style> [data-test="see-all"] { 
display: none; 
}

AND

/*-- Stand Alone See All --*/
<div class="see-all-custom">→ See all</div>
<pre><span><style>
.see-all-custom {
font-weight: 600;
font-size: 0.875rem;
line-height: 1.0625rem;
color: rgb(0, 0, 0);
position: relative;
float: right;
cursor: pointer;
}

OR 

/*-- Title + See All --*/
<div class="same-line-test">
<div class="title">TItle</div>
<class="see-all">See all</class></div>
<pre><span><style>
.same-line-test {
display: flex;
-webkit-box-pack: justify;
justify-content: space-between;
color: #101010;
cursor: pointer;
}
.same-line-test .title {
position: relative;
float: left;
font-weight: 700;
font-size: 1.1rem;
line-height: 1.1875rem;
color: #101010;
font-family: Poppins, BlinkMacSystemFont, Roboto, sans-serif;
}

Use Action → Link to Screen.

The first code will just provide a “See All” link whereas the second code will mimic the “Original Title” + “See All” on normal Inline-Lists. Just depends on what you need.

4 Likes

Oh Joe you’re a star. This is ideal

Thank you @ThinhDinh

2 Likes

Yea I didn’t want my users to see the “Favorites” when they clicked “See All”, while also using the same styling as the prior screen. This appears to be the most ideal solution.

However, I still dislike when people use the Search Bar and it removes all the CSS lol.

Is this universally applied to any or all tabs?

This may be the answer as to why my CSS stopped loading the other day. :face_with_monocle:

Not sure, I just noticed when someone inserts text in the search bar, the results come back with no CSS applied. Once you delete the text in the search, the CSS is reapplied.

Basically, when you search, it goes to “List View + Inline List”, thus removing all other components, including Rich Text Boxes.

2 Likes

Interesting observation! I’ll keep this in mind. Thanks!

That makes sense, thanks for the heads up

Hi . I need a floating button on List. It seems that it’s right place to ask.
Can you provide more details : where i put “code” ? ,etc
Thanks in advance

In order to add a floating button it would have to be in a details view.

In a details view have you tried adding a button component and changing it’s style to floating?

If you are familiar with css and want something fixed higher up on the screen you could try this.

Hi! Thanks for this. How do you know the name of the data-test or classes in glide ?

If you inspect the page source within the browser, then you can usually figure out which classes belong to which components.

1 Like