Link to home
Start Free TrialLog in
Avatar of Edward Joell
Edward JoellFlag for United States of America

asked on

Stylesheet styling consistently displays inconsistently on Asp.Net MVC 4 views

It has been a consistently persistent issue in getting stylesheet styles to display on my MVC views.  Some display quite well like,

.CDRL-display-label {
    display: block;
    font-size: 1.1em;
    font-weight: bolder;
}

.CDRL-display-Item {
    display: block;
    font-size: 1.3em;
    font-weight:normal;
}

Open in new window

Others are completely ignored like this one.

    .web_dialog
    {
       display: none;
       position: fixed;
       width: 380px;
       height: 200px;
       top: 50%;
       left: 50%;
       margin-left: -190px;
       margin-top: -100px;
       background-color: #ffffff;
       border: 2px solid #336699;
       padding: 0px;
       z-index: 102;
       font-family: Verdana;
       font-size: 10pt;
    }

Open in new window


Last I heard display : None means show nothing  The below div using none of the styling spelled out in this class.

<div id="pnDoDICDialog" class="web_dialog">
    <div >
        <input type="radio" id="rbDodic" name="DodicOrPart" checked="checked" />DoDIC<input type="radio" name="DodicOrPart"  /> Part Number<br />
        @Html.TextBox("Reader")  
    </div>
</div>

Open in new window

I am at a loss in deriving a reason for this.
Avatar of Carl Tawn
Carl Tawn
Flag of United Kingdom of Great Britain and Northern Ireland image

If it is being ignored it is likely something to do with how you CSS and elements are structured. Your style is possibly being overridden by a more specific style.

Do you have a sample of the page somewhere publicly visible?
Avatar of Edward Joell

ASKER

Do you have a sample of the page somewhere publicly visible?
No

Your style is possibly being overridden by a more specific style.
You mean like a style for div in the stylesheet?  There is no style for div in the stylesheet. There are no inline styles on this div. see above.
Without a link to the page there is no way for us to do diagnostics and the only guess I can make is that you are doing some load time scripting that is overriding the styling and probably damaging the Document object.

Asking us to solve this with nothing but code fragments is at about the same level as asking us to thread a needle while wearing boxing gloves and a blindfold.

Cd&
@CobolDinosaur The only way the government will authorize anyone to see this page is if you get a security clearence, a visit request, and extablish a need to know to view my local machine.  Then you can actually look at the cshtml page and the css file.

This is still in a Visual Studio project.  So even if the security restrictions were not an issue, then there is no way it could be deployed to any web server where you could view it because there would be no connection to the database so nothing would work anyway.


Besides, the issue is why the cshtml views are treating the classes this way in debug.  This is not happening with htm files or aspx files in Asp.Net 4.5 web form projects with the same stylesheets and html.  I need an Asp.Net MVC 4 Razor programmer who can diagnose why these views are treating classes in this manner from the provided code, but not aspx files.

If you copy all of the styles from the class into the inline style attribute for that div then everything all works.
load time scripting that is overriding the styling
There is nothing in the $(Document).ready function that is concerned with styles.  The only thing concerning styles is the code in the standard _layout.cshtml that every project creates out of the box.
Well good luck with that.  

The Question went without comment for long enough to be classified as neglected because it lacks enough information to be answeed. The only reason I posted is because EE sends me email about neglected questions because I am a designated Expert for the topic.

If you are looking at things in project tools instead of with a browser, then you should not expect them to look like they are in a browser.  If you can't give me what I need to look for a solution, then I will move on to other things.

Cd&
Question went without comment?  It was not even posted until yesterday afternoon as I was leaving work.  Overnight is considered neglected?!  Yet I've had threads on here that did not receive the first comment until.

If you are looking at things in project tools instead of with a browser, then you should not expect them to look like they are in a browser.
Of course I expect them to look as they do in a browswer.  That is the whole and entire purpose of the debug button.  That's why you can select between Chrome, IE and firefox with the debug button.  If that were not the case it would be impossible to develop an ASP.Net MVC web application.
>will authorize anyone to see this page is if you get a security clearence,

I think what we need is a test case http://sscce.org/

What you can do is recreate what you are doing with fake data and info.  In this case, all we need to see is the rendered page as if it where being viewed live.  This is a little bit of work on your end and in making a test case, you might even find your own answer!    

Perhaps render your page, view the source and make a static html page.  Then by hand, remove any reference to the govt/military.  Make it look like a site about beer or just foo:bar, we don't care what the content is.

Any answer we give you, you should be able to back up to your own specific solution.  The key is to make a good test case for us (and you).
I am having difficulty doing as requested becasue when I strip out all of the non-essentials, Visual Studio refuses to build because of some exception  from the "pre-application start initialization method, Microsoft.Web.WebPages.OAuth.PreApplcationStartCode"  I do not use OAuth in any of my projects because I work for the government.  So after removing all of those dependent assemblies to simplify the project then I am getting this error which prevents compilation.
I understand this is not easy to do in VS.  However, wether you do this as MVC or an old fashioned simple html page, when you are working with the front end, it is the rendered code that matters.  

You know the code, we are just seeing bits.  The main reason for most front end issues are css classes or js/jquery over riding what you think you have.   Without seeing everything rendered, it is hard to diagnose.    Once you find the issue from viewing the rendered code, you can then back it out and pinpoint where you have it in your project.

The only thing I can offer you at this point is taking what you have, strip out any indication of dod, place it in a playground and see what we have to work with http://jsbin.com/robiz/1/edit
<!DOCTYPE html>
<html>
<head>
  <style>
    .web_dialog
    {
        
       display: none;
     
      position: fixed;
       width: 380px;
       height: 200px;
       top: 50%;
       left: 50%;
       
       margin-left: -190px;
       margin-top: -100px;
  
       background-color: #ffffff;
       border: 2px solid #336699;
       padding: 0px;
       z-index: 102;
       font-family: Verdana;
       font-size: 10pt;
    }
.CDRL-display-label {
    display: block;
    font-size: 1.1em;
    font-weight: bolder;
}

.CDRL-display-Item {
    display: block;
    font-size: 1.3em;
    font-weight:normal;
}

    </style>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div id="pnPickDialog" class="web_dialog">
    <div >
        <input type="radio" id="rbPick" name="PickOrPart" checked="checked" />Company
      <input type="radio" name="PickOrPart"  /> Part Number<br />
       abc123
    </div>
</div>
</body>
</html>

Open in new window

So, from the code you have , it looks like the web_dialog class is doing it's job by displaying none. If I comment out that class, http://jsbin.com/robiz/2/edit the rendered code displays.

If your actual results are different, then something else is in play and we can't see that here.

I'm not sure what your work flow is, but I will typically make myself an image of what I want, then build a static html page to make sure it works as expected.  Then break it out to the different pieces.

Or are we not understanding your actual question?  
>issue in getting stylesheet styles to display on my MVC views
Does that mean the actual css is not even showing up on your pages?  or does it mean the css is there, but the page is not obeying the styles as you expect?
If your actual results are different, then something else is in play and we can't see that here.

That's what I mean.  

When I use this class in an html page it works perfectly as designed.  But when I place it into a Visual Studio cshtml view, then it is ignored. This is not the first class that has behaved in that fashion.  That is why I think a simple html file with these class will not help derive the issue because it doesn't occur with a simple html file.

Is it possible that the css files Microsoft includes are doing something to override this class.  Should I attach them so that you can check that out?  Most of them are just the plain out of the box jquery-ui stylesheets. but they also inlude this Site.css, to which I have been adding my new classes.


Because of this my views have had to be littered with inline styles for classes that were ignored. Whereas other classes behave quite properly.  

I can attach the style sheets.

Unfortunately I have spent 3 hours of work time on this issue this morning and neglected my tasks so my boss says I will not be able to re-visit this issue for a day or so.  Meanwhile I will continue to use inline styles to rectify this problem until I can get back to it.
Site.css
screen.css
I don't have much time left today and will have to come back to it.  I think this is one of the reasons I never made the jump to .net/VS.  I like to have more control.
This is the behavior I am observing for this particular class
When the below Jquery function is run when the "overlay" is set to class the call to show does not respond.  When it is set to an inline style then the show and hide both react as designed here.

http://www.ezzylearning.com/tutorial.aspx?tid=6942119


   function ShowDialog(modal, dialog) {
        $("#overlay").show();
        $(dialog).fadeIn(300);
 
        if (modal) {
            $("#overlay").unbind("click");
        }
        else {
            $("#overlay").click(function (e) {
                HideDialog(dialog);
            });
        }
    }
 
    function HideDialog(dialog) {
        $("#overlay").hide();
        $(dialog).fadeOut(300);
    }
Actually allegedly MVC with razor is suppose to provide the developer with greater control.  In my experience I have found that I it takes 5 times as long to provide something with less capability than I was able to doe using webforms with server controls. For example, I find I can't do a proper grid that would allow the user to add and remove rows,  If I wasn't so concerned with the inferior network on which server sits that doesn't permit postbacks, or call backs in a timely fashion, I would have abandoned this long ago.
That is reinforcing something else is taking over.  

I can't come back to this until later today.  Hopefully somebody else can pick up.
@ScottFell

That is reinforcing something else is taking over.  


I had been wondering about that as well.  I've also found that some of the style classes for tables would not display properly unless they were entered inline (which of course takes precedence.)  But I didn't see anything that I could specifically identify as overriding my classes. (Will a style for all elements of a particular type take precedence over a named class?)

Do you think it is something in the stylesheets that I sent or would it be something in the JQueryUI themes?
As I said way back at the beginning of the thread "...you are doing some load time scripting that is overriding the styling and probably damaging the Document object..."

Granted is was just an educated guess, but it looks more like as we move along.  Anytime you use jquery for generation, you scramble the document object, and the changes don't show up except in the document objec itself.  even examination at a detail level does not alway produce an answer, and it comes down to going through the scripting to figure out what kind of a mess it created.

In a lot of cases even putting the styles directly inline will not solve the problem because the scripting is applying its own styling inline.

So I would try removing the scripts one at a time to determine which is causing the problem, and then you only have to dig through one.

Cd&
the only scripting that is working with controls that are having a problem with scripting is the show/hide dialog script that was gotten from the internet where the show was not successfully being implemented on the div with the class but was with the inline scripting.  The tables and table cells where the styling in the class doesn't show up and the divs where the floats don't work are not even addressed in scripts.  None of my JQuery even speaks to styles and the only thing it does with elements is read "Html.DisplayFor''s  and read/write "Html.EditorFor"s.

Unless you are considering Razor itself with its Html. helpers a script,  In which case then the fault would be ASP.Net MVC 4 Razor, because you can't build a cshtml page without Razor.and in fact the areas that give the most problems are those that are involved with the Razor @foreach() loops on the Model's enumerables.
Edward, at this point, the best thing to do is give us a link to your test page to look at.  If your current page has data that you don't want to be seen by the public, then you should create a test page using the same exact scripting except fake data.

One very common issue I see here by Dev's that use VS include things like duplicate ID's.  They seem to hard code this instead of creating it dynamically.   When you have a loop for instance, if you hard code a loop that has the html <a id="something" href="<%=link%>"><%=link%></a>, then all of these a tags will have the same id.  When you are using jquery or javascript to target the a#something, it will fail because of the duplicate id's.  

When you are developing MVC, you have to visualize how the piece  you are working on fits in with the entire page.  I see a lot of very common front end coding errors by VS devs working on MVC projects and my guess is in part by relying on controls.

Anyway, by supplying us a live link, we should be able to quickly resolve your issue.  If that is not possible, your other option is to rebuild the rendered code EXACTLY as your rendered code in your  project except for the output data should be fake.  Get it working in something like jsbin.com the best you can so it can be duplicated. This will take some work on your part and that is why it may be easier to just give us a live link to your project's test page.
ASKER CERTIFIED SOLUTION
Avatar of Edward Joell
Edward Joell
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
No one could provide a solution without requiring a considerable expenditure by my customer, which they were not willing to spend.   So it was time to cut my losses.  

I believe too I have expended a higher cost on Experts Exchange than I the benefits I have received from the experts here.