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…
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):
.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.
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)) 
CUSTOM theme files are not overwritten; we only overwrite files we are directly responsible for maintaining.
1 Like
ok)
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
There is a read.me file in the themes directory located at the destination you provided. The read.me file provides some basic instructions.
1 Like
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.
try instead of everything else ^^
.ia_dockedView__handle{
transform: scale(1.5) !important;
}
1 Like
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):
For comparison, here’s the toggle wrapper/toggle using the CSS I added:
Ah i did not check the dock on the right.
heh then you will need a few morelines
.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;
}
3 Likes
Still cuts the handle off 
That seems to be the ‘hide’ feature that only move the icon to the side the default distance…
what if you turn autohide off?
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.
1 Like
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)
1 Like
@catherine.fowler
if you want the hide to work again you can
add this to the styles
.toggle-hidden{
visibility:hidden;
}
2 Likes