Appearance

Apart from the Switch and the ColorPicker, all Inputs provide options for setting their width and height.

To specify the width of the components, set the width CSS property.

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
    <div class="example-wrapper">
                <p>ColorGradient</p>
                <kendo-colorgradient [style.width]="'40%'"></kendo-colorgradient>
                <p>ColorPalette</p>
                <kendo-colorpalette [style.width]="'350px'"></kendo-colorpalette>
                <p>MaskedTextBox</p>
                <kendo-maskedtextbox
                  [style.width]="'70%'"
                    [(ngModel)]="maskedValue"
                    [mask]="'9-000'"
                ></kendo-maskedtextbox>
                <p>NumericTextBox</p>
                <kendo-numerictextbox
                  [style.width]="'350px'"
                    [(ngModel)] = "numericValue"
                ></kendo-numerictextbox>
                <p>Slider (value = {{sliderValue}})</p>
                <kendo-slider
                  [style.width]="'50%'"
                    [min]="min"
                    [max]="max"
                    [smallStep]="smallStep"
                    [(ngModel)] = "sliderValue"
                ></kendo-slider>

                <p>TextBox</p>
                <kendo-textbox-container
                  [style.width]="'400px'"
                  floatingLabel="First name">
                  <input kendoTextBox />
                </kendo-textbox-container>
    </div>
    `
})

export class AppComponent {
    public maskedValue: string;
    public sliderValue = 5;
    public numericValue = 5;
    public min = 0;
    public max = 10;
    public smallStep = 1;
}
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { InputsModule } from '@progress/kendo-angular-inputs';
import { AppComponent } from './app.component';

@NgModule({
    bootstrap:    [AppComponent],
    declarations: [AppComponent],
    imports:      [BrowserModule, BrowserAnimationsModule, FormsModule, InputsModule]
})
export class AppModule { }

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

In this article