# Is there a way to make an \[Inline list - cards\] floats on screen?. Help me

**URL:** https://community.glideapps.com/t/is-there-a-way-to-make-an-inline-list-cards-floats-on-screen-help-me/32254
**Category:** Ask for Help
**Created:** [September 24, 2021, 2:41am UTC](https://community.glideapps.com/t/is-there-a-way-to-make-an-inline-list-cards-floats-on-screen-help-me/32254 "2021-09-24T02:41:19Z")
**Posts on this page:** 13
**Page:** 1

<div class="post-metadata">

### Author: ![phong\_tran](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/phong_tran/32/32160_2.png) [@phong\_tran](https://community.glideapps.com/u/phong_tran)
#### Post date: [September 24, 2021, 2:41am UTC](https://community.glideapps.com/t/is-there-a-way-to-make-an-inline-list-cards-floats-on-screen-help-me/32254/1 "2021-09-24T02:41:19Z")

</div>

is there a way to make this red part float to the screen?

 ![a7fc8243f9f40faa56e5](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/4/3467ad61c771861272016972066964864986ffe1.jpeg)

---

<div class="post-metadata">

### Author: ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)
#### Post date: [September 24, 2021, 4:42am UTC](https://community.glideapps.com/t/is-there-a-way-to-make-an-inline-list-cards-floats-on-screen-help-me/32254/2 "2021-09-24T04:42:45Z")

</div>

Had you posted again?

---

<div class="post-metadata">

### Author: ![phong\_tran](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/phong_tran/32/32160_2.png) [@phong\_tran](https://community.glideapps.com/u/phong_tran)
#### Post date: [September 24, 2021, 5:01am UTC](https://community.glideapps.com/t/is-there-a-way-to-make-an-inline-list-cards-floats-on-screen-help-me/32254/3 "2021-09-24T05:01:58Z")

</div>

yes i need help

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [September 24, 2021, 7:49am UTC](https://community.glideapps.com/t/is-there-a-way-to-make-an-inline-list-cards-floats-on-screen-help-me/32254/4 "2021-09-24T07:49:55Z")

</div>

Please use one thread only and not spamming the forum with new posts if you haven’t received help.

---

<div class="post-metadata">

### Author: ![Roldy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/roldy/32/36068_2.png) [@Roldy](https://community.glideapps.com/u/Roldy)
#### Post date: [September 24, 2021, 9:30am UTC](https://community.glideapps.com/t/is-there-a-way-to-make-an-inline-list-cards-floats-on-screen-help-me/32254/5 "2021-09-24T09:30:43Z")

</div>

Surely there is a way to make an inline float on the screen.  
But what I see surrounded in red is an horizontal inline list component? If it is, I think you must have already stylized it to appear as I see; if it is:

- which CSS is applied to make it appear like this?
- do you have other horizontal inline lists on the same screen?  
Let me know

---

<div class="post-metadata">

### Author: ![phong\_tran](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/phong_tran/32/32160_2.png) [@phong\_tran](https://community.glideapps.com/u/phong_tran)
#### Post date: [September 24, 2021, 10:09am UTC](https://community.glideapps.com/t/is-there-a-way-to-make-an-inline-list-cards-floats-on-screen-help-me/32254/6 "2021-09-24T10:09:43Z")

</div>

I use 2 [inline list cards] and 1 CSS to put it on the same line. I’m trying to make it float on the screen as a menu bar

---

<div class="post-metadata">

### Author: ![Roldy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/roldy/32/36068_2.png) [@Roldy](https://community.glideapps.com/u/Roldy)
#### Post date: [September 24, 2021, 12:57pm UTC](https://community.glideapps.com/t/is-there-a-way-to-make-an-inline-list-cards-floats-on-screen-help-me/32254/7 "2021-09-24T12:57:46Z")

</div>

In this case, as by @ThinhDinh and @Lucas_Pires know-how, you can select the component by its order in the detail screen.

> **[Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.](https://www.notion.so/glidecommunity/33d5984960d04785b38eeae6c5121001?v=5662bb67cd994c53ae87737ab952ddb2&p=502cfbc7cc3b44f4b769e692eca6793d)**
>
> A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team

So, supposing the first element is the RT component containing the CSS, your two inline horizontal list components will be the 2nd and the 3rd element.  
In the above scenario this example of code will work:

```auto
<pre><span><style>
div[id*='screenScrollView'] > div > :nth-of-type(2) {
background-color: yellow;
left: 10px;
width: 300px;
top 10%;
height: 50px;
z-index: 10;
position: fixed;
}

div[id*='screenScrollView'] > div > :nth-of-type(3) {
background-color: red;
top 10%;
left: 310px;
width: 54px;
height: 50px;
z-index: 10;
position: fixed;
}

```

I intentionally left yellow and red backgrounds just to have a visual size rapresentation of the two components; size and position can be adjusted to your specific need, of course.

It is probably not the perfect solution, and perhaps even better can be done, because by rotating the screen the two components will not be centered horizontally. In the meantime, however, this can be a good base to work on.

Bye

---

<div class="post-metadata">

### Author: ![Roldy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/roldy/32/36068_2.png) [@Roldy](https://community.glideapps.com/u/Roldy)
#### Post date: [September 24, 2021, 12:59pm UTC](https://community.glideapps.com/t/is-there-a-way-to-make-an-inline-list-cards-floats-on-screen-help-me/32254/8 "2021-09-24T12:59:49Z")

</div>

wait i forget to float … 🤪

---

<div class="post-metadata">

### Author: ![Roldy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/roldy/32/36068_2.png) [@Roldy](https://community.glideapps.com/u/Roldy)
#### Post date: [September 24, 2021, 1:06pm UTC](https://community.glideapps.com/t/is-there-a-way-to-make-an-inline-list-cards-floats-on-screen-help-me/32254/9 "2021-09-24T13:06:42Z")

</div>

Now it’s ok

---

<div class="post-metadata">

### Author: ![phong\_tran](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/phong_tran/32/32160_2.png) [@phong\_tran](https://community.glideapps.com/u/phong_tran)
#### Post date: [September 24, 2021, 1:28pm UTC](https://community.glideapps.com/t/is-there-a-way-to-make-an-inline-list-cards-floats-on-screen-help-me/32254/10 "2021-09-24T13:28:08Z")

</div>

> [@Roldy](#):
>
> ```auto
> <pre><span><style>
> div[id*='screenScrollView'] > div > :nth-of-type(2) {
> background-color: yellow;
> left: 10px;
> width: 300px;
> top 10%;
> height: 50px;
> z-index: 10;
> position: fixed;
> }
> 
> div[id*='screenScrollView'] > div > :nth-of-type(3) {
> background-color: red;
> top 10%;
> left: 310px;
> width: 54px;
> height: 50px;
> z-index: 10;
> position: fixed;
> }
> 
> ```

Thank you for your help.

---

<div class="post-metadata">

### Author: ![phong\_tran](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/phong_tran/32/32160_2.png) [@phong\_tran](https://community.glideapps.com/u/phong_tran)
#### Post date: [September 24, 2021, 1:36pm UTC](https://community.glideapps.com/t/is-there-a-way-to-make-an-inline-list-cards-floats-on-screen-help-me/32254/11 "2021-09-24T13:36:23Z")

</div>

Looks like it’s crashing due to a combination of css

```
/\* Text Entry (2nd component) \*/ div[id\*='screenScrollView'] \> div \> :nth-child(1) { margin-left:-0px; width:86%; height:75px; } /\* Number Entry (3eme component) \*/ div[id\*='screenScrollView'] \> div \> :nth-child(2) { margin-top:-55px; margin-left:85%; transform: translateX(-25%); width:20%; height:50px; }
```

---

<div class="post-metadata">

### Author: ![phong\_tran](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/phong_tran/32/32160_2.png) [@phong\_tran](https://community.glideapps.com/u/phong_tran)
#### Post date: [September 24, 2021, 1:40pm UTC](https://community.glideapps.com/t/is-there-a-way-to-make-an-inline-list-cards-floats-on-screen-help-me/32254/12 "2021-09-24T13:40:28Z")

</div>

![a9424fcae47712294b66](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/7/17b4112adb14caa50c27ab446e42c0a0a248eb7a.jpeg)

---

<div class="post-metadata">

### Author: ![Roldy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/roldy/32/36068_2.png) [@Roldy](https://community.glideapps.com/u/Roldy)
#### Post date: [September 24, 2021, 3:23pm UTC](https://community.glideapps.com/t/is-there-a-way-to-make-an-inline-list-cards-floats-on-screen-help-me/32254/13 "2021-09-24T15:23:27Z")

</div>

Of course, this is why I asked you to see your css first …  
I need to see your CSS conflicting otherwise I can’t help you better than that.