CODEWITHSUNDEEP
htmlcsstextboxkendo-ui
achrvi
achrvi

Reputation: 27

How to change width of text-box using kendo-ui?

I want two adjacent text boxes with different widths, using kendo-ui.

My HTML:

<tr>
    <td><input type="checkbox">1D22339</td>
    <td>12243JNJ3427676</td>
    <td><input type="text" class="k-input k-textbox.medium"><input type="text" class="k-input k-textbox.small"></td>
</tr>

My CSS:

.k-textbox.small{
    width: 20px;
}
.k-textbox.medium{
    width: 50px;
}

The problem is, both textboxes appear with the same (default) size. How may I correctly style the text-box?

Upvotes: 2

Views: 11520

Answers (2)

Sathish
Sathish

Reputation: 2460

Try this:

HTML Code:

<tr>
    <td><input type="checkbox">1D22339</td>
    <td>12243JNJ3427676</td>
    <td><input type="text" class="k-input k-textboxmedium">
        <input type="text" class="k-input k-textboxsmall"></td>
</tr>

CSS Code:

.k-textboxsmall{
    width: 20px !important; 
}
.k-textboxmedium{
    width: 50px !important;
}

Upvotes: 4

Mukul Kant
Mukul Kant

Reputation: 7122

You should like it-

input[type='text'].k-textbox.small{
    width: 20px;
}
input[type='text'].k-textbox.medium{
    width: 50px;
}

or 

.k-textbox.small{
    width: 20px !important; 
}
.k-textbox.medium{
    width: 50px !important;
}

Hope it will helps you.

Upvotes: 1

Related Questions