# 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:** 1

<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, 9:20am UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/1 "2021-05-21T09:20:05Z")

</div>

Hi, anyone have a solution how to use fixed position for the right panel ?  
I’m trying to put picture in fixed position on top… in mobile view everything is ok, but in a tablet/desktop it stretches for the whole screen. I need it to be only in right panel at the top, fixed.

---

<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, 9:25am UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/2 "2021-05-21T09:25:06Z")

</div>

Hi  
It’s a hassle finally I have a hard time with that.  
There are a few things (by dint of testing)

What is an image component? or a direct html?

---

<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, 9:26am UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/3 "2021-05-21T09:26:19Z")

</div>

If possible to see your CSS for the mobile version (to have a base)

---

<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, 9:29am UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/4 "2021-05-21T09:29:44Z")

</div>

```
<div style="position: fixed; top:0px; left: 0%; z-index:1;" target="_blank">
<img class="back_image" src="IMAGE">
    <pre><span><style>
    .back_image{
    width: max(100%);
    }
    .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, 9:40am UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/5 "2021-05-21T09:40:46Z")

</div>

Just a quick test.  
I don’t know if this is the purpose of your research

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

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/0/309b90d3a04bc73305af1d071d2a09ec97f2434f.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, 9:41am UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/6 "2021-05-21T09:41:56Z")

</div>

let me try…

---

<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, 9:42am UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/7 "2021-05-21T09:42:55Z")

</div>

I deleted the first line \<div … target …\>

---

<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, 9:47am UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/8 "2021-05-21T09:47:51Z")

</div>

i need that on top, where bar is, i have to take out top and bottom bar

---

<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, 9:51am UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/9 "2021-05-21T09:51:09Z")

</div>

transform

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/7/c7da763a5a424dd6ad12c4f9b7e1add26a3141e1.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, 9:52am UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/10 "2021-05-21T09:52:15Z")

</div>

that looks good… can you paste the code?

---

<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, 9:53am UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/11 "2021-05-21T09:53:56Z")

</div>

voilà

```
<img class="back_image" src="https://images.unsplash.com/photo-1519046904884-53103b34b206?ixid=MnwxMDEzNjV8MHwxfHNlYXJjaHwyfHxiZWFjaHxlbnwwfHx8fDE2MjA4MjMwODI&ixlib=rb-1.2.1">
    <pre><span><style>
    .back_image{
position:fixed;
width:10%;
left:calc(80% + 10px);
-ms-transform: translate(0%, -150%);
transform: translate(0%, -150%);
    }
    .jiuuwu svg {
    display: none;
    }
    [data-test="glide-app-bar"]
    {display: none}
```

---

<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, 9:58am UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/12 "2021-05-21T09:58:11Z")

</div>

is not working good, tablet and mobile have deferent result, i wanna cover whole top where bar should be

---

<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, 10:00am UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/13 "2021-05-21T10:00:55Z")

</div>

ah ok so i’m looking

---

<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, 10:02am UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/14 "2021-05-21T10:02:48Z")

</div>

this is what im trying to fix, and tablet view is not good

 ![Screen Shot 2021-05-21 at 5.59.48 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/7/e7686221ffbf6c71a085afe31e674eda79201a20.png)

 ![Screen Shot 2021-05-21 at 6.00.11 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/4/f4e47e579a6fbeb169e16012e8b48f73f98c19ac.jpeg)

---

<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, 10:07am UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/15 "2021-05-21T10:07:20Z")

</div>

ok this version ?

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

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/6/e6189c3575cde376bf4489d495538e60eff1bcca.jpeg)

```
<img class="back_image" src="https://images.unsplash.com/photo-1519046904884-53103b34b206?ixid=MnwxMDEzNjV8MHwxfHNlYXJjaHwyfHxiZWFjaHxlbnwwfHx8fDE2MjA4MjMwODI&ixlib=rb-1.2.1">
    <pre><span><style>
    .back_image{
position:fixed;
width:100%;
height:calc(20% + 10px);
margin-left:-15px;
-ms-transform: translate(0%, -10%);
transform: translate(0%, -100%);
    }
    .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, 10:08am UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/16 "2021-05-21T10:08:48Z")

</div>

or

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/7/773ca581652f35fef2f1d4c46a3a20e6d4642198.jpeg)

```
<img class="back_image" src="https://images.unsplash.com/photo-1519046904884-53103b34b206?ixid=MnwxMDEzNjV8MHwxfHNlYXJjaHwyfHxiZWFjaHxlbnwwfHx8fDE2MjA4MjMwODI&ixlib=rb-1.2.1">
    <pre><span><style>
    .back_image{
position:fixed;
width:200%;
height:calc(20% + 10px);
margin-left:-15px;
-ms-transform: translate(-20%, -100%);
transform: translate(-20%, -100%);
    }
    .jiuuwu svg {
    display: none;
    }
    [data-test="glide-app-bar"]
    {display: none}
```

---

<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, 10:13am UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/17 "2021-05-21T10:13:51Z")

</div>

for some rezone, right side is going too much

 ![Screen Shot 2021-05-21 at 6.15.38 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/c/0c76aa507c566e1ebb199df9a5873b251d30b69b.jpeg)

---

<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, 10:17am UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/18 "2021-05-21T10:17:22Z")

</div>

is there a way to set right margin where right panel ends?

---

<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, 10:20am UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/19 "2021-05-21T10:20:17Z")

</div>

I have never done a test in this direction.  
I play with max-width to limit to the tablet view (which is fixed under glide)

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/4/a452324312a349406199c5e4a2a356f9cb760e95.jpeg)

```
<img class="back_image" src="https://images.unsplash.com/photo-1519046904884-53103b34b206?ixid=MnwxMDEzNjV8MHwxfHNlYXJjaHwyfHxiZWFjaHxlbnwwfHx8fDE2MjA4MjMwODI&ixlib=rb-1.2.1">
    <pre><span><style>
    .back_image{
position:fixed;
width:200%;
max-width:705px;
height:calc(20% + 10px);
margin-left:37px;
-ms-transform: translate(-8%, -100%);
transform: translate(-8%, -100%);
    }
    .jiuuwu svg {
    display: none;
    }
    [data-test="glide-app-bar"]
    {display: none}
```

---

<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, 10:25am UTC](https://community.glideapps.com/t/css-fixed-position-for-right-panel/27054/20 "2021-05-21T10:25:58Z")

</div>

almost perfect! i need it to be in front, so scrolling text will not go over it

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