jQuery Forum

<article>
@using (Ajax.BeginForm("Create","ContactUs", new AjaxOptions { HttpMethod = "POST",OnSuccess = "openDialog" }))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)

<div id="accordion">
<h3>Required Information</h3>
<div>
@Html.LabelFor(model => model.FirstName)
@Html.EditorFor(model =>model.FirstName)
@Html.ValidationMessageFor(model => model.FirstName)
... more content
</div>
<h3>My Company</h3>
<div>
@Html.LabelFor(model =>model.Title)
@Html.EditorFor(model =>model.Title)
@Html.ValidationMessageFor(model => model.Title)
... more content
</div>
<h3>My Address</h3>
<div>
@Html.Partial("_Address", newlibrary.models.AddressViewModel())
</div>
<h3>My Phone</h3>
<div>
@Html.LabelFor(model =>model.Phone)
@Html.EditorFor(model =>model.Phone)
@Html.ValidationMessageFor(model => model.Phone)
... more content
</div>
</div> @* End of Accordion *@

... more content
}      @* End of Ajax Form*@

... more content
</article>

This behaviour also appeared when using Html Helper BeginForm.

The problem appears in every browser I have available.

I am using MVC 4 Razor View Engine.

When setting heightStyle, other than not specifying heightStyle at all or:

$(function () { $("#accordion").accordion(); });

Browers Chrome, FireFox, Internet Explorer, Opera and Safari produce this view:
 

 
As never had used this widget before I am uncertain whether this is expected. When expanding the following sections the accordion-content panel overflows. Which I understand is to be expected.

$(function () { $("#accordion").accordion({heightStyle: "fill"});

Browers Chrome, FireFox, Internet Explorer, Opera and Safari produce this view:
 

 
Note there is no content rendered under "This section is required." When expanding section "Add contact..." or "Company Info..." produces this display:
 

 
note that the section has changed and now includes a horizontal scroll bar. Expanding the first section displays the initial "fill" display.

$(function () { $("#accordion").accordion({heightStyle: "content"});

Opera
 


Browers Chrome, FireFox, Internet Explorer and Safari produce this view:
 

 
Expanding a section produces the following display in Browers Chrome, FireFox, Internet Explorer and Safari


I am using a ThemeRoller custom theme (colours). The site.css does not, as far as I am aware directly reference any ui style. The mark up I am using is:
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
@Html.ValidationSummary()
<div id="accordion">
<h3>This section is required</h3>
<div>
@Html.LabelFor(expression: m => m.UserName)
@Html.TextBoxFor(m => m.UserName)
@Html.ValidationMessageFor(m => m.UserName)
@Html.LabelFor(m => m.Email)
@Html.TextBoxFor(m => m.Email)
@Html.ValidationMessageFor(m => m.Email)
@Html.LabelFor(m => m.Password)
@Html.PasswordFor(m => m.Password)
@Html.ValidationMessageFor(m => m.Password)
@Html.LabelFor(m => m.ConfirmPassword)
@Html.PasswordFor(m => m.ConfirmPassword)
@Html.ValidationMessageFor(m => m.ConfirmPassword)
</div>
<h3>Add contact information now?</h3>
<div>
@Html.Partial(partialViewName: "_Contact")
</div>
<h3>Company Information</h3>
<div>
@Html.Partial(partialViewName: "_Company")
</div>
</div>
<p style="clear: both">
<input type="submit" value="Register" />
</p>
}

I have referenced ui 1.10.3 jquery 2.0.3

 

I am using MVC 4 View Razor View Engine

 

These captures also demonstrate the lack of icons as I reported in a previous post.

Any help would be appreciated.

I have tried using: icons: true
icons: { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" } and other forms of this parameter. 

Using Firebug to inspect the active-inactive styles I can see the icon master png so I am fairly certain the image file is loading.
I have linked the style and the chosen theme appears to look correct, at least the colours are correct.

I have a reference to the two script files jquery-2.0.3.js and jquery-ui-1.10.3.js so the accordion behaves as expected that is: collapse-retracts when clicked.

A partial copy of the view mark-up is:

I have also tried removing the form element and associated AntiForgeryToken and ValidationSummary with no change in the accordion appearance. I also have tried adding <p></p> elements to wrap the HtmlHelpers with no effect.

Any ideas would be helpful. This could relate to a problem I am having with height issues in the next post.