# How to modify docked view handle width

**URL:** <https://forum.inductiveautomation.com/t/how-to-modify-docked-view-handle-width/41932>\
**Category:** Ignition\
**Tags:** ignition80, ignition81, perspective\
**Created:** [January 4, 2021, 2:52pm UTC](https://forum.inductiveautomation.com/t/how-to-modify-docked-view-handle-width/41932 "2021-01-04T14:52:43Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![iscrac](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/iscrac/32/49757_2.png) [@iscrac](https://forum.inductiveautomation.com/u/iscrac)\
**Post date:** [January 4, 2021, 2:52pm UTC](https://forum.inductiveautomation.com/t/how-to-modify-docked-view-handle-width/41932/1 "2021-01-04T14:52:43Z")

</div>

Can Anybody tell me how to change the width of DOCK icon please?  
In Mobile version it’s so small, so even my tiny fingers can’t click it from the first time…

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [January 4, 2021, 4:47pm UTC](https://forum.inductiveautomation.com/t/how-to-modify-docked-view-handle-width/41932/2 "2021-01-04T16:47:33Z")

</div>

The only way to modify the Docked View handles at this time is to utilize the theme files, which assumes you’re using version 8.0.13 or newer. You’ll need to make the following changes within your own custom theme structure, although the values you choose are ultimately up to you (I tested the values directly in a browser, but did not test these changes in a theme file):

```auto
.docked-view-left .docked-view-right {
    height: 6rem;
    width: 3rem;
}

.docked-view-top .docked-view-bottom {
    height: 3rem;
    width: 6rem;
}

.view-toggle {
    height: 4.5rem;
    margin-top: 0.75rem;
    width: 3rem;
}

```

These values effectively doubled the size of my docked view handles and their internal icons.

```auto

```

---

<div class="post-metadata">

**Author:** ![iscrac](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/iscrac/32/49757_2.png) [@iscrac](https://forum.inductiveautomation.com/u/iscrac)\
**Post date:** [January 5, 2021, 6:33am UTC](https://forum.inductiveautomation.com/t/how-to-modify-docked-view-handle-width/41932/3 "2021-01-05T06:33:23Z")

</div>

> [@cmallonee](#):
>
> The only way to modify the Docked View handles at this time is to utilize the theme files,

Thanx for Your advice! I will try it)

I always afraid of modify some system files, because if I'll install a new version of Ignition, so it will destroy everything I changed in them... and how will I remember what to change again??))  
I thought there's a more easier way to change it...  
I just hope in some future version of Ignition we will have this possibility because I think that this is important thing at all.  
Most of clients are men with big hands)) sorry but this is true))) 🤭  
just imagine... client is in Pump station and this is winter time... cold, snow... brrr... and... he is trying to click on the mobile display this tiny button)) ❄

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [January 5, 2021, 6:37am UTC](https://forum.inductiveautomation.com/t/how-to-modify-docked-view-handle-width/41932/4 "2021-01-05T06:37:29Z")

</div>

CUSTOM theme files are not overwritten; we only overwrite files we are directly responsible for maintaining.

---

<div class="post-metadata">

**Author:** ![iscrac](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/iscrac/32/49757_2.png) [@iscrac](https://forum.inductiveautomation.com/u/iscrac)\
**Post date:** [January 5, 2021, 6:47am UTC](https://forum.inductiveautomation.com/t/how-to-modify-docked-view-handle-width/41932/5 "2021-01-05T06:47:21Z")

</div>

> [@cmallonee](#):
>
> CUSTOM theme files are not overwritten;

ok)

> [@cmallonee](#):
>
> You’ll need to make the following changes within your own custom theme structure,

anyway... I can't find this... where it is?  
I thought it is somewhere here: **C:\Program Files\Inductive Automation\Ignition\data\modules\com.inductiveautomation.perspective**

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [January 5, 2021, 4:08pm UTC](https://forum.inductiveautomation.com/t/how-to-modify-docked-view-handle-width/41932/6 "2021-01-05T16:08:14Z")

</div>

There is a `read.me` file in the `themes` directory located at the destination you provided. The `read.me` file provides some basic instructions.

---

<div class="post-metadata">

**Author:** ![catherine.fowler](https://avatars.discourse-cdn.com/v4/letter/c/34f0e0/32.png) [@catherine.fowler](https://forum.inductiveautomation.com/u/catherine.fowler)\
**Post date:** [November 3, 2021, 9:08pm UTC](https://forum.inductiveautomation.com/t/how-to-modify-docked-view-handle-width/41932/7 "2021-11-03T21:08:02Z")

</div>

I ran into the same desire to widen the handle and tried to add a custom CSS file using your suggested CSS:

> /\* custom-handles.css \*/  
> .docked-view-left .docked-view-right {  
> height: 6rem;  
> width: 3rem;  
> }  
> .docked-view-top .docked-view-bottom {  
> height: 3rem;  
> width: 6rem;  
> }  
> .view-toggle {  
> height: 4.5rem;  
> margin-top: 0.75rem;  
> width: 3rem;  
> }

And called as an import after the default import in light.css:

> @import "./light/index.css";  
> /\* Override handles \*/  
> @import "./custom-handles.css";

But I found that your excerpt didn't work. I managed to get it to work specifically for my right-side handle (after a lot of pain looking through the styles in my browser dev tools) using this:

> /\* custom-handles.css \*/  
> .docked-view.docked-view-right .toggle-wrapper {  
> width: 3rem;  
> height: 6rem;  
> }  
> .docked-view.docked-view-right .toggle-wrapper .view-toggle {  
> width: 3rem;  
> height: 6rem;  
> }  
> .docked-view .toggle-wrapper .view-toggle .toggle-icon {  
> margin-top: 0.75rem;  
> width: 3rem;  
> height: 6rem;  
> }  
> .docked-view .toggle-wrapper .view-toggle .toggle-icon.icon-right {  
> height: 6rem;  
> margin-top: 0;  
> }

But I feel like there should be a cleaner way of doing this for all the handles. It seemed like the more generic classes were being overwritten/ignored even though they should have been defined last, but I'm not sure why. I'm not phenomenally well-versed in CSS, so I was wondering if someone who had a better handle on it (no pun intended) could explain why I could only get it working with the more specific class selectors.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [November 4, 2021, 8:06am UTC](https://forum.inductiveautomation.com/t/how-to-modify-docked-view-handle-width/41932/8 "2021-11-04T08:06:34Z")

</div>

try instead of everything else ^^

```auto
.ia_dockedView__handle{
  transform: scale(1.5) !important;
}

```

---

<div class="post-metadata">

**Author:** ![catherine.fowler](https://avatars.discourse-cdn.com/v4/letter/c/34f0e0/32.png) [@catherine.fowler](https://forum.inductiveautomation.com/u/catherine.fowler)\
**Post date:** [November 4, 2021, 12:13pm UTC](https://forum.inductiveautomation.com/t/how-to-modify-docked-view-handle-width/41932/9 "2021-11-04T12:13:16Z")

</div>

Unfortunately, that doesn’t quite do the trick because it cuts off the handle, probably because the toggle wrapper is still too narrow (this is scaled up 4x to better show what’s happening):  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/a/0a022dfd3652ae955059e83e50b7963e74a26db9.png)

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/e/1ede78003490937a5859eb8919b338c5cb0fd2e2.png)

For comparison, here’s the toggle wrapper/toggle using the CSS I added:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/3/b3f129f373b929b272840cafcc112ae9a8bccacd.png)

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [November 4, 2021, 12:33pm UTC](https://forum.inductiveautomation.com/t/how-to-modify-docked-view-handle-width/41932/10 "2021-11-04T12:33:57Z")

</div>

Ah i did not check the dock on the right.

heh then you will need a few morelines

```auto
.toggle-wrapper{
  transform: scale(1.5);
}
.wrapper-right{
transform-origin: right;
}
.wrapper-left{
transform-origin: left;
}
.wrapper-top{
transform-origin: top;
}
.wrapper-bottom{
transform-origin: bottom;
}

```

---

<div class="post-metadata">

**Author:** ![catherine.fowler](https://avatars.discourse-cdn.com/v4/letter/c/34f0e0/32.png) [@catherine.fowler](https://forum.inductiveautomation.com/u/catherine.fowler)\
**Post date:** [November 4, 2021, 12:37pm UTC](https://forum.inductiveautomation.com/t/how-to-modify-docked-view-handle-width/41932/11 "2021-11-04T12:37:50Z")

</div>

Still cuts the handle off ☹

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [November 4, 2021, 12:38pm UTC](https://forum.inductiveautomation.com/t/how-to-modify-docked-view-handle-width/41932/12 "2021-11-04T12:38:27Z")

</div>

That seems to be the ‘hide’ feature that only move the icon to the side the default distance…  
what if you turn autohide off?

---

<div class="post-metadata">

**Author:** ![catherine.fowler](https://avatars.discourse-cdn.com/v4/letter/c/34f0e0/32.png) [@catherine.fowler](https://forum.inductiveautomation.com/u/catherine.fowler)\
**Post date:** [November 4, 2021, 12:50pm UTC](https://forum.inductiveautomation.com/t/how-to-modify-docked-view-handle-width/41932/13 "2021-11-04T12:50:39Z")

</div>

My bad, I didn’t notice you’d changed the top line to `.toggle-wrapper` from `.ia-dockedView_handle` - clearly I should grab a coffee. I messed around until I came to the same solution and yes, that CSS does work! Thanks for the help.

Also, it’s worth noting that if you have both the transform on `.toggle-wrapper` and`.ia-dockedView_handle` their scales multiply; only `.toggle-wrapper` is needed.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [November 4, 2021, 12:52pm UTC](https://forum.inductiveautomation.com/t/how-to-modify-docked-view-handle-width/41932/14 "2021-11-04T12:52:58Z")

</div>

Ah yes, i should have said to remove the other line, glad it works 🙂  
The hide distance isnt scaled tho, but i guess that isnt to bad (if you dont scale it to big)

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [November 4, 2021, 1:05pm UTC](https://forum.inductiveautomation.com/t/how-to-modify-docked-view-handle-width/41932/15 "2021-11-04T13:05:09Z")

</div>

@catherine.fowler  
if you want the hide to work again you can  
add this to the styles

```auto
.toggle-hidden{
visibility:hidden;
}

```