responsive keyboard

[praveens96]

i thought that we need to edit the keyboard-key/keyboard-key.component.html,.scss,.ts to be changed. But in vain, couldn't find the right place to do the changes to make it responsive.

Can you please let us know how to make the keyboard responsive in-order to use it in mobile apps?

[davidenke]

Sorry for the late response. Unfortunately you have to do it yourself, the keyboard components do all have CSS-classes or its components tag names. But you're right, we really need a responsive layout for smaller devices...

[praveens96]

okay. will try and share

[praveens96]

receiving below error on page load:

Unhandled Promise rejection: AngularJS v1.x is not loaded! ; Zone: ; Task: Promise.then ; Value: Error: AngularJS v1.x is not loaded!

when ignoring this and try to type with keyboard, then, getting below error: MdKeyboardKeyComponent._setCursorPosition in this method, this.control value is coming as null.

any help/guidance would be appreciated?

[dhanarajp]

I just written for responsive keypad for mobile, hope it will help for you @praveens96

@media only screen and (max-device-width: 599px){ mat-keyboard-container{ max-width: 100% !important; min-width: 320px !important;} .mat-keyboard-wrapper{ padding: 10px 2px !important; } .mat-raised-button{ padding: 0px 5px !important; line-height: 8px !important; } .mat-keyboard-col{ padding: 3px 2px !important; } }

if any better way can write please share.

[praveens96]

@dhanarajp thanks for sharing. i was able to get it responsive but still couldnt get to use it mobile because: up on choosing my textbox both mobile keyboard and this virtual keyboard are coming up. if i try to use a cordova plugin to hide the mobile keyboard, then the virtual keyboard also not showing, i guess the keyboard will be based on the textbox selection event.

were you able to show the virtual keyboard on mobile?

[dhanarajp]

@praveens96 make it text input field as a read only mode while you choose virutal keypad

[praveens96]

@dhanarajp text input readonly works fine to not to get the native keyboard but how do you get the string entered? we dont have a handler in Keyboard for keypressed or down event. how are you managing that?

[dhanarajp]

@praveens96 to enter the string kindly use the virtual keyboard, If this is not the solution you need, kindly explain your requirement with sample image, i will help you out.

[praveens96]

@dhanarajp i want to use virtual keyboard for entering a string in to textbox field. problem is :

1. if we make field dont make field read-only both native and virtual keyboards will come. string entered through either will set to the value of text field.
2. when field is marked as read-only, only virtual comes but the text pressed by the user is not getting assigned to the textbox value.

i am doing the below, onfocus() of a read-only textox:

e.preventDefault();
 console.log("infocus"); 
 this.openKeyboard('te');

when we press on the keys of virtual keyboard the text is not getting entered in to the textbox field in focus. at the end i want the text user is typing from the virtual keyboard.

can you help me?

[dhanarajp]

@praveens96 , already this plugin gave proper functionality, dont use any custom trigger like "onfocus()"

           <input
                #testSimpleValue
                type="number"
                matInput
                name="emmentaler"
                [matKeyboard]="'de-CH'"
>

OR

 <input
                matInput
                matKeyboard             
                name="emmentaler"
                [formControl]="testControlValue"              
>

"matKeyboard" is a directive so it will take care the keyboard behaviors

[praveens96]

@dhanarajp your approach helped me.. thanks a lot.. will share the code once it is completed.

[praveens96]

@dhanarajp , i am managing responsiveness this way:

mat-keyboard-container {
    min-width: 100% !important;
    padding: unset !important;
    position: absolute !important;
    bottom: 0% !important;
}
mat-keyboard-container mat-keyboard-key .mat-keyboard-key{
	//padding: unset !important;
	padding: 0 0.485rem !important;
}
.mat-keyboard-col{
	padding: 1px !important;
}
.mat-keyboard-wrapper{
	padding:0 !important;
}

[utkarshutt2706]

I just written for responsive keypad for mobile, hope it will help for you @praveens96

@media only screen and (max-device-width: 599px){ mat-keyboard-container{ max-width: 100% !important; min-width: 320px !important;} .mat-keyboard-wrapper{ padding: 10px 2px !important; } .mat-raised-button{ padding: 0px 5px !important; line-height: 8px !important; } .mat-keyboard-col{ padding: 3px 2px !important; } }

if any better way can write please share.

I tried to use this solution i added this CSS in app.component.css but it didn't work.. can any one help?

@praveens96 @davidenke @dhanarajp

[ashishvspl076]

@utkarshutt2706 write in global.css or style.css