Email or Password input textbox type breaks layout

[James]

I was using text type in input elements that were styled k-textbox class, but I wanted to use email and password type, but for some reason this breaks the form layout. See this example based on the grid external form. Click Add to bring up the add form.

https://stackblitz.com/edit/kendogrid-externalform-boz

[James]

See screenshot

[Dimiter Topalov]

Hi James,

The styling of the external form targets the inputs with type="text" and makes them 100% wide for the purposes of the demo only:

@Component({
    selector: 'kendo-grid-edit-form',
    styles: [
      'input[type=text] { width: 100%; }'
    ],

You can easily adjust the styling to target other types of inputs too, or remove the attribute selector altogether, and add the .k-textbox class to the additional inputs of type email and password, e.g.:

https://stackblitz.com/edit/kendogrid-externalform-boz-71qerl?file=app/app.component.ts

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik