Small size problem of pin code menu for large panels

[savaskorkmaz]

As you know, we can add pin to change some KNX values in visualization screen. We have an android panel which have 1200x800 resolution and we try enter pin code in numeric screen but that numeric screen is too small. You can see in attached picture. 
I would like to increase visual size of this numeric menu which I can enter the pin number.
How can i do it ?

[edgars]

Hi Savas!

use this CSS code to control the size of the PIN window.

Code:

.usermode .well.control-pincode {
transform: scale(2);
}

[Erwin van der Zwart]

Or use multi browser compatible css:

Code:

/* Visu mode */
.well.well-small.control.control-pincode {
 -webkit-transform-origin: 50% 50%; /* Chrome, Safari, Opera */
 -webkit-transform: scale(2);
 -moz-transform-origin: 50% 50%; /* Firefox */
 -moz-transform: scale(2);
 transform-origin: 50% 50%;
 transform: scale(2);
}

/* Touch mode */
.well.control-modal.control-pincode {
 -webkit-transform-origin: 50% 50%; /* Chrome, Safari, Opera */
 -webkit-transform: scale(2);
 -moz-transform-origin: 50% 50%; /* Firefox */
 -moz-transform: scale(2);
 transform-origin: 50% 50%;
 transform: scale(2);
}

[admin]

I'm pretty sure you don't need -moz-transform as it has been dropped in favor of unprefixed version in Firefox 16 on October 9, 2012
Webkit stuff is applicable to Chrome <36, Safari 5.1+, iOS < 9.2, Anroid =< 4.4.4
http://shouldiprefix.com/#transforms

[savaskorkmaz]

Hello,
Edgars, your CSS is worked in PC browser but it didn't worked in our android tablets.
One of the our tablet is Android 4.4.4
Second is Android 4.2.2
We are using only visualization mode.
Can you make a CSS which can work both Android 4.2.2 and android 4.4.4 ?

Regards,

[admin]

Try CSS from Erwin, it should take care of older Android browsers. I recommend installing Chrome instead of stock Android browser if possible.

[savaskorkmaz]

I tried both Edgars and Erwin css. It didn't worked in both android panel.
We cannot use chrome because application is not working on the browser. We created our specific application which have intercom and automation (Comes from LM4) function in a one single application. This application use naturaly embedded browser comes with android.
If you can test CSS which can work with android 4.4.4 and 4.2.2 browser , it would be great.

[admin]

This should work for all browsers:

Code:

.control-pincode {
  margin: -233px 0 0 -189px;
}
.control-pincode .btn-group .btn {
  width: 120px;
  height: 88px;
  font-size: 32px;
}
.control-pincode .input-large {
  font-size: 32px;
  width: 334px;
  height: 40px;
}

[savaskorkmaz]

Hello ,
I added this last code to custom CSS section. Should i do anything else ? For example, should i write control-pincode to additional classes section of my object ?
Because it didn't worked. Maybe I'm doing something wrong.

[Erwin van der Zwart]

Hi,

Additional classes on the object has no relation with the pincode control, so this is not the answer to solve your issue..

I tested all previous written css samples by admin and myself and all work on PC, Android and iOS...

Is it also not working on PC and iOS from your controller, or only android?

Have you tested with another (HTML5) browser on your android device, like with chrome?

Do you have a mistake in your custom css preventing the complete load of the css? 

Can you try only with just the css of the pincode scaling and see if this works?

Have you tested with cleared cache of your browser? (i don't think this is needed but can't hurt to try)

BR,

Erwin