CODEWITHSUNDEEP
jquerycssjquery-ui-dialogasp.net-mvc-4
Kenn
Kenn

Reputation: 2769

Why is MVC 4 basic CSS jacking up jquery-ui's dialog box?

Any css ninjas might be able to guess why when I include MVC 4's basic css file in my project it causes Jquery UI's dialog box to have issues? The title bar appears next to the content and of course everything is all jammed up - needless to say, it doesn't look good.

I am no HTML ninja but it seems like something is causing a "float: left" or something like that although I can see right in the HTML (using firebug) that "display: block;"

Uhm - here is the HTML that and JS that I am using however I don't know that it really helps. 

        $("#addCompanyDialog").dialog({
            title: "Add New Company",
            autoOpen: false
        });

        $("#addCompanyLink").click(function (evt) {
            evt.preventDefault();
            $("#addCompanyDialog").dialog("open");
        }); 

<div id="addCompanyDialog" style="display:none; background-color: yellow; ">
    <input type="text" id="companyName"/>
    <input type="submit" id="addCompany" value="Add Company"/>
</div>

if I comment out this line

@Styles.Render("~/Content/css")

The dialog box is back to normal i.e. the title bar above the textbox and button.

Thanks

Upvotes: 2

Views: 1561

Answers (1)

Kenn
Kenn

Reputation: 2769

I found it - They override some jquery-ui stuff in there. Here is the offending bit of CSS

.ui-dialog-titlebar {
    color: inherit;
    font-weight: inherit;
    border: 0 none;
    background: none;
   /* float: right;*/    
}

I kept searching for div and actually searched for "float" but missed this last night, I thought it was worth looking for because it is a pretty good CSS template to start with so maybe this will help someone else.

Sweet!

Upvotes: 4

Related Questions