CSS not being applied with jQuery UI dialog

Question

I have an MVC view with a Ajax.ActionLink.

this.Ajax.ActionLink( "Create Offender", "Create", "ReportOffender",
      null, new AjaxOptions() 
      { 
                        HttpMethod = "GET", UpdateTargetId = "dialog",
                        OnBegin = "function() { $('#dialog').dialog('open'); }" 
      },
      new Dictionary<string, object>() { { "class", "optionlink" } } )

This calls an action called "Create" which returns a partial view that is then placed inside of a div/dialog. The contents of this partial view is a table, some rows/columns and textboxes each of which have a CSS class assigned to them.

The problem is when the dialog is shown, with the partial view rendered inside, the CSS classes are ignored and not rendered.

Any ideas as to why this is happening?

Thanks

Michael

P.S This is the partial view that is returned from the Create GET action (see the Ajax.ActionLink above)...

<% using( this.Ajax.BeginForm( "Create", "ReportOffender", null, new AjaxOptions() { HttpMethod = "POST", UpdateTargetId = "dialog" } ) ) { %>

    <% this.Html.RenderPartial( "~/Views/IncidentReporting/Report/Offender/DataEntryUserControl.ascx", this.Model ); %>

<% } %>

Once the user completes the form, snippet below, the Create POST method is called and the response is placed into the same dialog. This response will either be a "you've got errors" or a "saved successful" message. I use another RenderParital here because I also have a similar Edit version that uses the same form.

Below is a snippet of the HTML inside of the DataEntryUserControl.ascx and represents the form the user has to complete...

<table class="entity-form">

    <tr>
        <td class="entity-form-validation-summary" colspan="2">
            <%= this.Html.ValidationSummary() %>
        </td>
    </tr>

    <!-- FIRST NAME -->
    <tr>
        <td class="entity-form-caption"><label for="Entity.FirstName">First Name</label></td>
        <td>
        <%= this.Html.TextBox( "Entity.FirstName", this.Model.Entity.FirstName, 50, 50, this.Page.User.IsInRoles( SecurityGroups.Translators ), null ) %>
        <%= this.Html.ValidationMessage( "Entity.FirstName" ) %>
        </td>
    </tr>

    <!-- LAST NAME -->
    <tr>
        <td class="entity-form-caption"><label for="Entity.LastName">Last Name</label></td>
        <td>
        <%= this.Html.TextBox( "Entity.LastName", this.Model.Entity.LastName, 50, 50, this.Page.User.IsInRoles( SecurityGroups.Translators ), null )%>
        <%= this.Html.ValidationMessage( "Entity.LastName" )%>
        </td>
    </tr>

As you can see there is nothing special. The TextBox methods with the extra parameters are extension methods I created to add MaxLength, Size, etc, to the textbox controls. It is here were I'm having the problems with the CSS. I use the same CSS classes, and form structure, elsewhere in "normal" views and they rendered correctly.

Maybe update your question and add a snippet of the html and the css that should affect it? Its hard to tell from the description you've given. — calumbrodie
– calumbrodie, Commented Apr 7, 2010 at 8:15

spielersun · Accepted Answer · 2010-04-07 11:05:50Z

1

verify your html output/ or look table with web developer or firebug/ may be it hasnt class in first place/

if situation isnt like that; put stylesheet link into your ascx/

answered Apr 7, 2010 at 11:05

spielersun

1726 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS not being applied with jQuery UI dialog

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related