Weird behavior of Input control.

[Mark MB]

Create a grid and place an input control inside the grid in one of the rows. Everything looks good. Now drag the grid inside a Checkbox control, you notice the layout of the Input control gets messed up. The text of the input is outside of the input control and the input window area turns to a thin line! Please see the image showing two grid boxes each containing an input and a label. One is inside a grid and one outside, You will notice the pink like which is supposedly the input control's client area.

I ultimately want to have a checkbox item that also allows me to enter number using input control with Number style. Any advice is appreciated. Tnx.

[Serhii Kulibaba]

Hello Mark,

We reported your issue as a bug.

Please use workaround:

add custom css:
pre.startScreen_mobiletextinput_name .ui-input-text{
height:30px;
}

.startScreen_mobiletextinput_name input{
top:0;
}/pre

here startScreen - name of the screen with that input component
mobiletextinput_name - name of that input component

[Mark MB]

Thanks Sergiy for the quick reply! I added the CSS, now I can see the input field but the input text and the up/down arrows appear outside, under the window. Any other suggestions? Thanks in advanced.

[Mark MB]

Thank you so much Sergiy for your quick reply! I am very impressed with your support. That worked!

[Mark MB]

I am now having another issue. Now the input control looks good but when I change the input number it acts as if I am selecting the whole checkbox. Is there a way I can change the input using the spin button (up/down arrow) without having the checkbox toggled? Thanks again.

[Mark MB]

Hmm... looks like it got fixed. It does not check the whole checkbox when I click on the spin buttons.

[Evgene Karachevtsev]

Hello Mark,

Thank you for the update, please contact us if you'll face this issue again.

[Mark MB]

Actually I take it back, not sure what happened but clicking on the spin buttons toggles the entire check box. Any ideas? Tnx.

[Serhii Kulibaba]

Mark, you inserted an input component into a checkbox, so every click on that checkbox. As workaround you can use one of several sollutions:

1. Create grid components with all necessary components: checkbox, labels, input (http://prntscr.com/8s82ux)
   instead of grid inside of checkbox
2. Process all boobling events from the checkbox with JS