Textbox with autocomplete doesn't show layout in MVC 4 - css

Question

I have made a textbox with an autocomplete in ASP.NET MVC 4, Javascript and JSON.
I want to give the autocomplete a nice layout, but it won't work.
There is a css-file jquery.ui-autocomplete.css automatically in the project.
This is the place where I fill the list
<li data-role="list-divider">Gemeente</li>
<li data-role="fieldcontain">
<div class="ui-widget">
<input type="text" name="Gemeente" class="ui-autocomplete"/>
</div>
</li>
This is the script I use:
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$('.ui-autocomplete').autocomplete({
source: '#Url.Action("AutocompleteGemeenten")'
});
</script>
This is the JSON-code I use:
public ActionResult AutocompleteGemeenten(string term)
{
List<string> items = new List<string>();
items = _zoekClient.GetGemeenten();
List<string> filteredItems = new List<string>();
filteredItems = items.Where(test => test != null && test.ToLower().Contains(term.ToLower())).ToList();
return Json(filteredItems, JsonRequestBehavior.AllowGet);
}
this is the css-file
.ui-autocomplete { position: absolute; cursor: default; }
* html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */
.ui-menu {
list-style:none;
padding: 2px;
margin: 0;
display:block;
float: left;
}
.ui-menu .ui-menu {
margin-top: -3px;
}
.ui-menu .ui-menu-item {
margin:0;
padding: 0;
zoom: 1;
float: left;
clear: left;
width: 100%;
}
.ui-menu .ui-menu-item a {
text-decoration:none;
display:block;
padding:.2em .4em;
line-height:1.5;
zoom:1;
}
.ui-menu .ui-menu-item a.ui-state-hover,
.ui-menu .ui-menu-item a.ui-state-active {
font-weight: normal;
margin: -1px;
}
Can anyone help me changing the layout of the autocomplete?
thanks in advance

Answer 1

If you want to change the default styling of jQuery UI you have a few options.
1. Override the default css
CSS is evaluated in order of last declaration, which means the last defined rule wins. You add rules that override the styles defined in the jQuery UI style sheet. Add your rules in another CSS file and place a link to that file after the link to the jQuery UI CSS file
<link href="~/Content/jquery.css" rel="stylesheet" type="text/css" />
<link href="~/Content/overrides.css" rel="stylesheet" type="text/css" />
2. Add classes to your generated jQuery widget
jQuery has a method called addClass. You can define a CSS class with your style rules and then add that class to to jQuery widget
Define:
.myClass {
display:block;
float: left;
}
Add:
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$('.ui-autocomplete').addClass('myClass');
$('.ui-autocomplete').autocomplete({
source: '#Url.Action("AutocompleteGemeenten")'
});
});