I need to apply Bootstrap styling to a Razor #Html.DropDownList.
I have applied the form-control class to the control:
#Html.DropDownList("FacilityID", null, string.Empty, new { #class = "form-control" })
This correctly displays the select list using Bootstrap stylings. The problem is that the selectable, sub-items on of the list are not styled.
In viewing the generated HTML source, the rendered options are un-styled:
<option value="1">Some Option</option>
Is there anyway to get Bootstrap to style the entire dropdown correctly in ASP.Net MVC5 Razor view?
If it helps anyone ... I ended up going with the bootstrap-select component.
The Razor syntax is:
#Html.DropDownList("FacilityID", null, string.Empty, new { #class = "selectpicker" })
I didn't like the default gradient applied by Bootstrap to the button element this component generates, so I modified this in CSS to make it look like a regular Bootstrap form-control styled element:
.bootstrap-select > .btn {
background-image: none;
}
It's really simple just add the following to the end of the Razor DropDown:
,new { #class = "form-control" } )
Related
I'm wanting to create a login page using the Telerik Kendo UI Textboxes so I will need my password input masked. Does anyone have any suggestions? I've tried:
.TextBoxFor(m => m.Password)
.HtmlAttributes(new { type = "password" })
below is my code as pretty much standard it is:
#(Html.Kendo().TextBox()
.Name("password")
.Placeholder("Password")
.Label(label => label
.Content("Password")
.Floating(true)
)
.HtmlAttributes(new { style = "width: 100%;border-radius: 7px;border-color: #ff4d41;" })
)
Getting to the stage I'd be faster just creating my own textboxes lol
as per my understanding based on your question
you need to add type="password" in kendo UI control.
Like below code
#(Html.Kendo().TextBox()
.Name("password")
.Placeholder("Password")
.Label(label => label
.Content("Password")
.Floating(true)
)
.HtmlAttributes(new {type="password", style = "width: 100%;border-radius: 7px;border-color: #ff4d41;" })
)
Output
As we know Password HTML helper available in MVC.
#Html.Password()
#Html.PasswordFor()
In the html below I'm having trouble getting the label and it's corresponding radio button to appear on the same line, what's the correct way to do this?
thanks
<div class="display-field">
#foreach (var value in Enum.GetValues(typeof(items.titles)))
{
<div class="display-field">
#Html.Label(value.ToString())
#Html.RadioButtonFor(m => m.title, value)
</div>
}
</div>
Try using LabelFor instead of Label
#Html.LabelFor
For more details, here is a tutorial for labels
http://www.tutorialsteacher.com/mvc/htmlhelper-label-labelfor
Set the label's CSS style to inline-block.
#Html.Label(value.ToString(), new { style = "display: inline-block" })
Without seeing the CSS for your page, the label element that is produced from your call to #Html.Label() is likely set to block level (display: block). Block level elements stack on top of each other and inline/inline-block level elements don't.
Please keep in mind that you should set the display value in your CSS and not by preference in the htmlAttributes value of your helper. You would do this by putting this (or something better targeted in your CSS file):
label { display: inline-block; }
When I look at an older MVC project, the following code would render a textbox with the propriate styling:
#Html.EditorFor(model => model.Title, new { htmlAttributes = new { #class = "form-control" } })
But now that JQueryUI is being used instead of Bootstrap, I had to manually add Bootstrap again and added the same line to my code, but the class won't render.
The only way to make it work it seems is using the:
#Html.TextBoxFor(model => model.License, new { #class = "form-control" })
HTML helper.
Is there a big difference between EditorFor and TextBoxFor and if it is important to use EditorFor instead of TextBoxFor, how could I add the Bootstrap class form-control to the rendered input by the EditorFor HTML helper? And what is causing this situation that the class won't be rendered on the input element with the HTML helper?
TextBoxFor: Is always render like an input textbox irrespective datatype of the property which is getting bind with the control. It creates a text input like this : <input type="text" />
EditorFor: It renders HTML markup based on the datatype of the property.
Both will be generate the same markup.
You can also see explanations in this post: https://stackoverflow.com/a/4826185/3401842
Hi I want to make my textbox's width longer.
The view that is generated, uses #Html.EditorFor which I noticed I can't modify nor I can add css style to it.
So I checked, TextAreFor and it works but it creates a scrollbar since it is a textarea
e.g.
#Html.TextAreaFor(model => model.Name, new { cols=50, #rows=1 })
How would I remove the scrollbar? so it looks like it is a textbox? or is there another way to generate a textbox with a custom width?
Thanks,
You can use TextBoxFor HTML Helper method for generating a input element with a custom class like this
#Html.TextBoxFor(m => m.Name, new { #class="yourCustomClass" })
and now you can define your custom styles in this class
.yourCustomClass
{
width:340px;
}
Use a CSS class with the following statement:
overflow:hidden
Maybe
#Html.TextBoxFor(m => m.Name, new { #style="width:150px; height:50px; overflow:hidden;" })
What is the simplest way to set the size of the generated field?
Using CSS:
<div class="foo">
<%= Html.EditorFor(x => x.Foo) %>
</div>
and in your CSS file:
.foo input {
width: 200px;
}
You could also implement a custom DataAnnotationsModelMetadataProvider which would allow you to attach any attributes you like to the generated input field such as class, maxlength, size, ...
Another option still: rather than appending the class to the wrapper around your input, you can apply HTML properties to the input itself (doesn't work for "EditorFor" though):
#Html.TextBoxFor(x => x.Foo, new { #class = "bar" })
Further discussion: http://michaelware.net/post/2010/01/31/Custom-Attributes-When-Using-HtmlTextBoxFor.aspx