# CSS fixed position for right panel?

**URL:** <https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054>\
**Category:** Ask for Help\
**Created:** [May 21, 2021, 9:20am UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054 "2021-05-21T09:20:05Z")\
**Posts on this page:** 20\
**Page:** 3

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [May 21, 2021, 11:16am UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/41 "2021-05-21T11:16:56Z")

</div>

how it looks like on mobile?

---

<div class="post-metadata">

**Author:** ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)\
**Post date:** [May 21, 2021, 11:21am UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/42 "2021-05-21T11:21:33Z")

</div>

well we have to make some adjustments

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/9/c9455bb976efb63b84811f9c1a4f91ba9dbbc802.png)

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [May 21, 2021, 11:22am UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/43 "2021-05-21T11:22:29Z")

</div>

without changing anything? mobile and tablet? same settings?

---

<div class="post-metadata">

**Author:** ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)\
**Post date:** [May 21, 2021, 11:23am UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/44 "2021-05-21T11:23:18Z")

</div>

CSS for test

```
<img class="back_image" src="https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/qj1KRrXid5ysFqfjAVs2/pub/wGiwcfoBlNChe9kMB8VZ.gif">
<img class ="back" src="https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/uPcxis2H9otF68X9jr7A/pub/L3CeN6WYOLe3f11zOXnH.png">

<pre><span><style>

.back{
position:fixed;
width:100%;
max-width:705px;
/height:calc(13.5% - 30px);
height:80px;
margin-left:37px;
-ms-transform: translate(-8%, -105%);
transform: translate(-8%, -105%);
z-index:0;
/object-fit: contain;
display:flex;

}

.back_image{
position:fixed;
/width:100%;
max-width:705px;
/height:calc(13.5% - 30px);
height:79px;
margin-left:37px;
-ms-transform: translate(-8%, -105%);
transform: translate(-8%, -106.7%);
z-index:1;
/object-fit: contain;
display:flex;
    }

    .jiuuwu svg {
    display: none;
    }
    [data-test="glide-app-bar"]
    {display: none}
```

---

<div class="post-metadata">

**Author:** ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)\
**Post date:** [May 21, 2021, 11:24am UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/45 "2021-05-21T11:24:42Z")

</div>

the easiest would be to have the gif without the bottom line.  
It’s easier to adjust

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [May 21, 2021, 11:26am UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/46 "2021-05-21T11:26:26Z")

</div>

![Screen Shot 2021-05-21 at 7.25.10 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/2/b2188dd5bf29f8d04a40133a6315f302e0a605fc.png)

still not good

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [May 21, 2021, 11:35am UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/47 "2021-05-21T11:35:42Z")

</div>

![select-book-banner2](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/c/8cc5e4e2292fc254e99a1ac08e83962843c6442c.gif)

---

<div class="post-metadata">

**Author:** ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)\
**Post date:** [May 21, 2021, 11:38am UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/48 "2021-05-21T11:38:07Z")

</div>

ok cool, I look for

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [May 21, 2021, 11:43am UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/49 "2021-05-21T11:43:05Z")

</div>

forget about bar, just to make image full on both views…

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [May 21, 2021, 11:55am UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/50 "2021-05-21T11:55:14Z")

</div>

got it… just gonna work on right stretch.

 ![Screen Shot 2021-05-21 at 8.17.47 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/5/d5d6e7f2dd9c9a07ec35515f9a3589df99db7770.png)  
 ![Screen Shot 2021-05-21 at 8.18.14 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/9/a9335aee165cc744ebe6d01e249d53ce1e5b3573.png)

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [May 21, 2021, 11:58am UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/51 "2021-05-21T11:58:38Z")

</div>

I hope someone will come up with relating size to active window solution…  
thank you for helping me!  
I owe you a drink! 😉  
for now, your code is good with same background color as App window… I check mobile, tablet and desktop… looks good, i can deal with it.

---

<div class="post-metadata">

**Author:** ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)\
**Post date:** [May 21, 2021, 12:10pm UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/52 "2021-05-21T12:10:50Z")

</div>

I didn’t give up 🙂

It’s just long because I’m having trouble refreshing my application on the desktop, it fakes me at least 10 to 15 refreshes to see the rendering. which is not the same as the publisher.

---

<div class="post-metadata">

**Author:** ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)\
**Post date:** [May 21, 2021, 12:13pm UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/53 "2021-05-21T12:13:55Z")

</div>

repeat the tests later (I have a meeting for my job)  
But if a CSS pro goes through this with a solution, he is welcome.

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [May 21, 2021, 12:21pm UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/54 "2021-05-21T12:21:09Z")

</div>

thank you again…!  
ill wait with redoing whole App for a day… maybe someone will come up with better idea…  
Target active window and disable scrolling for this element… i just can’t find the right one.

---

<div class="post-metadata">

**Author:** ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)\
**Post date:** [May 21, 2021, 2:18pm UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/55 "2021-05-21T14:18:46Z")

</div>

To test, at home it’s not bad.  
Afterwards I have no more ideas.

```
<pre><span><style>

[data-test="nav-bar"] {
/* Line */
border-color:red !important;
border-bottom: outset #f33;
/* Img */
background: center / contain no-repeat url("https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/c/8cc5e4e2292fc254e99a1ac08e83962843c6442c.gif");
background-size: 350px;
/* Color Background */
background-color: white !important;
}

/* Menu */
[data-test="nav-button-menu"] {
display:none;
}

/* Tab Title */
.edGQJH {
display:none;
}

.jiuuwu svg {
display: none;
}
 

</style></span></pre>

```

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/c/3c6f40e0e890cf657808fcb7fba82281d93da7c6.png)

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/d/2dcdb6399cd836262d94de62dc9626db58f2b12e.png)

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [May 21, 2021, 8:29pm UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/56 "2021-05-21T20:29:16Z")

</div>

This is another improvement… thank you!  
I’m little disappointed that nobody else jumped in to this problem…  
The best solution would be precise size of the active window… that look good on mobile and tablet…

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [May 21, 2021, 8:43pm UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/57 "2021-05-21T20:43:40Z")

</div>

Also … how to place another image on top of the left panel, and not being visible on mobile (because it belongs to previous screen)?

Targeting left and right panel… @Robert_Petitto was trying that before for inline list using .left .right targetting, but i can’t make it work for fixed images.  
Maybe @Lucas_Pires could help? 😉

---

<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:** [May 21, 2021, 8:49pm UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/58 "2021-05-21T20:49:44Z")

</div>

> [@Uzo](#):
>
> Also … how to place another image on top of the left panel, and not being visible on mobile (because it belongs to previous screen)?

Can you share the entire code with img url so I can test here?

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [May 21, 2021, 8:51pm UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/59 "2021-05-21T20:51:47Z")

</div>

I just tagged you in our conversation, there are codes that we were working on.

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [May 21, 2021, 8:55pm UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/60 "2021-05-21T20:55:21Z")

</div>

Roll back this conversation… you’ll find codes, I’m not at my computer now to try… using cellphone…

[Previous page](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054.md?page=2)

[Next page](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054.md?page=4)