CODEWITHSUNDEEP
asp.netcssasp.net-mvckendo-ui
Null Reference
Null Reference

Reputation: 11360

Setting width of kendoui styled textbox with css

I am aware that you can change the width of a text box doing this

@Html.TextBoxFor(m => m.LoginId, new { @class = "k-textbox", style="width:400px" })

But I would like a neater approach.

I tried adding this into a new css file

.k-textbox .small {
    width: 50px !important;
}
.k-textbox .medium {
    width: 120px !important;
}
.k-textbox .large {
    width: 320px !important;
}

And in my cshtml file

@Html.TextBoxFor(m => m.LoginId, new { @class = "k-textbox medium" })

But this doesn't work. The textbox's size still remains the same

What am I missing?

Upvotes: 3

Views: 12897

Answers (3)

Tony Ryan
Tony Ryan

Reputation: 53

I'm using kendo, and I've added this to my _layout page in a razor app, works fine:

<style>
        .k-numerictextbox {
            width: 100%;
        }

        .k-datetimepicker {
            width: 100%;
        }

        .k-textbox {
            width: 100%;
        }
    </style>

Upvotes: 0

Robert Achmann
Robert Achmann

Reputation: 2045

This is really late, but I think an important update to this topic...

If you are in an MVC 4/5 Web app with Bootstrap - you don't want to specify width as that defeats the 'responsive' abilities of bootstrap.

You'll want to add a class to the TextBox to set it to width of 100% and place it in a div of whatever Bootstrap width column you wish:

For example, my class of wide-full is:

.wide-full {
    width: 100%;
}

Now, say you have a City field in your Address model on a razor form...

<div class="row">
    @Html.LabelFor(model => model.City, new { @class = "control-label col-sm-2 col-md-2 col-lg-2" })
   <div class="col-sm-4 col-md-4 col-lg-4">
        @Html.TextBoxFor(model => model.City, new { @class = "text-box single-line wide-full" })
        @Html.ValidationMessageFor(model => model.City)
    </div>
</div>

Now, when the viewing device changes, your textbox reacts with your responsive design and handles the new required width.

Upvotes: 2

Darin Dimitrov
Darin Dimitrov

Reputation: 1039298

Your CSS definition is wrong.

.k-textbox .medium means that you have a DOM element with class="k-textbox" and inside this DOM element another element with class="medium" which is not your case. Just get rid of the spaces in your CSS rules:

.k-textbox.small {
    width: 50px !important;
}
.k-textbox.medium {
    width: 120px !important;
}
.k-textbox.large {
    width: 320px !important;
}

Upvotes: 9

Related Questions