[CLOSED] stylesheet issue - Razor

  1. #1

    [CLOSED] stylesheet issue - Razor

    Hi,

    I have couple of view pages both are refering same css page only. After rendered in browser both are having different font styles.

    FYI

    #1
    _Layout.cshtml
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title</title>
        <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
        <link href=@Url.Content("~/Content/themes/base/jquery.ui.theme.css") rel="stylesheet"
        type="text/css" />
        <link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />
        <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery-ui.min.js")" type="text/javascript"></script>
    </head>
    <body>
        @RenderBody()
    </body>
    </html>
    NonExtIndex.cshtml
    @{
        ViewBag.Title = "NonExtIndex";
        Layout = "~/Views/Shared/_Layout.cshtml";
    }
    @using (Html.BeginForm())
    {
        <div class="tab_content_group_title">
            <h2>
                Job Information</h2>
        </div>
        <div class="tab_content_group">
            <div class="tabcontent">
                <table border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td id="top">
                            <table border="0" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td>
                                        <div class="editor-label">
                                            Job #
                                        </div>
                                        <div class="editor-field">
                                            996
                                        </div>
                                    </td>
                                    <td style="width: 20px">
                                    </td>
                                    <td>
                                        <div class="editor-label">
                                            Due Date
                                        </div>
                                        <div class="editor-field">
                                            01/01/2012
                                        </div>
                                    </td>
                                    <td style="width: 20px">
                                    </td>
                                    <td>
                                        <div class="editor-label">
                                            RB Ref#
                                        </div>
                                        <div class="editor-field">
                                            02556
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="editor-label">
                                            Job Date
                                        </div>
                                        <div class="editor-field">
                                            01/01/2012
                                        </div>
                                    </td>
                                    <td style="width: 10px">
                                    </td>
                                    <td colspan="3">
                                        <div class="editor-label">
                                            Case Name
                                        </div>
                                        <div class="editor-field">
                                            Merrill Case
                                        </div>
                                    </td>
                                    <td>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="tab_content_group_title">
            <h2>
                Intake Processing</h2>
        </div>
        <div class="tab_content_group">
            <div class="tabcontent">
                <table width="100%" border="0" cellspacing="0" style="padding-top: -4px" id="prodWorkFlow">
                    <tr>
                        <td>
                            <table>
                                <tr>
                                    <td>
                                        <table class="service-row">
                                            <tr class="control-row">
                                                <td colspan="4">
                                                    <table border="0" cellpadding="0" cellspacing="0">
                                                        <tr>
                                                            <td>
                                                                <span><b>Transcript</b></span>
                                                            </td>
                                                            <td style="width: 5px">
                                                            </td>
                                                            <td>
                                                                <span class="editor-label"><b>(Not Started)</b> </span>
                                                            </td>
                                                            <td style="width: 15px">
                                                            </td>
                                                            <td>
                                                                <div>
                                                                </div>
                                                            </td>
                                                            <td style="width: 5px">
                                                            </td>
                                                            <td>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="4">
                                                    <div style="font-size: 10px">
                                                        <span>07/11/2012 4:33:18 AM Admin MerrillCorp pushed to In Progress </span>
                                                        <br />
                                                        <span>07/11/2012 4:38:15 AM Admin MerrillCorp pushed to Hold</span>
                                                        <br />
                                                        <span>07/11/2012 4:52:16 AM Admin MerrillCorp pushed to Customer Service </span>
                                                        <br />
                                                        <span>07/11/2012 5:14:12 AM Admin MerrillCorp pushed to In Progress </span>
                                                        <br />
                                                        <span>07/11/2012 5:15:28 AM Admin MerrillCorp pushed to Customer Service </span>
                                                        <br />
                                                        <span>07/11/2012 5:17:50 AM Admin MerrillCorp pushed to Skipped </span>
                                                        <br />
                                                        <span>07/11/2012 5:18:25 AM Admin MerrillCorp pushed to Customer Service </span>
                                                        <br />
                                                        <span>07/11/2012 5:19:14 AM Admin MerrillCorp pushed to In Progress </span>
                                                        <br />
                                                        <span>07/11/2012 5:22:19 AM Admin MerrillCorp pushed to Hold </span>
                                                        <br />
                                                        <span>07/11/2012 5:24:00 AM Admin MerrillCorp pushed to In Progress </span>
                                                        <br />
                                                        <span>07/11/2012 5:28:32 AM Admin MerrillCorp started Verify Attachments </span>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="4">
                                                    <table border="0" cellpadding="0" cellspacing="0">
                                                        <tr>
                                                            <td>
                                                                <textarea haswatermark="true" watermarktext="Enter notes here" maxlength="1000" data-val="true"
                                                                    data-val-length="The field Notes must be a string with a maximum length of 1000."
                                                                    data-val-length-max="1000" style="width: 300px" name="Notes" id="Notes"></textarea>
                                                                <br />
                                                            </td>
                                                            <td style="width: 10px">
                                                            </td>
                                                            <td>
                                                                <div>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </td>
                                            </tr>
                                        </table>
                                        <br />
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    }
    #2
    _MixedLayout.cshtml
    @using Ext.Net.MVC
    <!DOCTYPE html>
    <html>
    <head>
        @Html.X().ResourcePlaceHolder(Ext.Net.ResourceMode.ScriptFiles)
        <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
        <link href=@Url.Content("~/Content/themes/base/jquery.ui.theme.css") rel="stylesheet"
        type="text/css" />
        <link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />
        <script src="@Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery-ui.min.js")" type="text/javascript"></script>
    </head>
    <body>
        @Html.X().ResourceManager()
        @RenderBody()
    </body>
    </html>
    Index.cshtml
    @using Ext.Net.MVC
    @{
        ViewBag.Title = "Index";
        Layout = "~/Views/Shared/_MixedLayout.cshtml";
    }
    @using (Html.BeginForm())
    {
        <div class="tab_content_group_title">
            <h2>
                Job Information</h2>
        </div>
        <div class="tab_content_group">
            <div class="tabcontent">
                <table border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td id="top">
                            <table border="0" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td>
                                        <div class="editor-label">
                                            Job #
                                        </div>
                                        <div class="editor-field">
                                            996
                                        </div>
                                    </td>
                                    <td style="width: 20px">
                                    </td>
                                    <td>
                                        <div class="editor-label">
                                            Due Date
                                        </div>
                                        <div class="editor-field">
                                            01/01/2012
                                        </div>
                                    </td>
                                    <td style="width: 20px">
                                    </td>
                                    <td>
                                        <div class="editor-label">
                                            RB Ref#
                                        </div>
                                        <div class="editor-field">
                                            02556
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="editor-label">
                                            Job Date
                                        </div>
                                        <div class="editor-field">
                                            01/01/2012
                                        </div>
                                    </td>
                                    <td style="width: 10px">
                                    </td>
                                    <td colspan="3">
                                        <div class="editor-label">
                                            Case Name
                                        </div>
                                        <div class="editor-field">
                                            Merrill Case
                                        </div>
                                    </td>
                                    <td>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="tab_content_group_title">
            <h2>
                Intake Processing</h2>
        </div>
        <div class="tab_content_group">
            <div class="tabcontent">
                <table width="100%" border="0" cellspacing="0" style="padding-top: -4px" id="prodWorkFlow">
                    <tr>
                        <td>
                            <table>
                                <tr>
                                    <td>
                                        <table class="service-row">
                                            <tr class="control-row">
                                                <td colspan="4">
                                                    <table border="0" cellpadding="0" cellspacing="0">
                                                        <tr>
                                                            <td>
                                                                @Html.X().Label().Text("").Icon(Ext.Net.Icon.Tick)
                                                                <span><b>Transcript</b></span>
                                                            </td>
                                                            <td style="width: 5px">
                                                            </td>
                                                            <td>
                                                                <span class="editor-label"><b>(Not Started)</b> </span>
                                                            </td>
                                                            <td style="width: 15px">
                                                            </td>
                                                            <td>
                                                                <div>
                                                                </div>
                                                            </td>
                                                            <td style="width: 5px">
                                                            </td>
                                                            <td>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="4">
                                                    <div style="font-size: 10px">
                                                        <span>07/11/2012 4:33:18 AM Admin MerrillCorp pushed to In Progress </span>
                                                        <br />
                                                        <span>07/11/2012 4:38:15 AM Admin MerrillCorp pushed to Hold</span>
                                                        <br />
                                                        <span>07/11/2012 4:52:16 AM Admin MerrillCorp pushed to Customer Service </span>
                                                        <br />
                                                        <span>07/11/2012 5:14:12 AM Admin MerrillCorp pushed to In Progress </span>
                                                        <br />
                                                        <span>07/11/2012 5:15:28 AM Admin MerrillCorp pushed to Customer Service </span>
                                                        <br />
                                                        <span>07/11/2012 5:17:50 AM Admin MerrillCorp pushed to Skipped </span>
                                                        <br />
                                                        <span>07/11/2012 5:18:25 AM Admin MerrillCorp pushed to Customer Service </span>
                                                        <br />
                                                        <span>07/11/2012 5:19:14 AM Admin MerrillCorp pushed to In Progress </span>
                                                        <br />
                                                        <span>07/11/2012 5:22:19 AM Admin MerrillCorp pushed to Hold </span>
                                                        <br />
                                                        <span>07/11/2012 5:24:00 AM Admin MerrillCorp pushed to In Progress </span>
                                                        <br />
                                                        <span>07/11/2012 5:28:32 AM Admin MerrillCorp started Verify Attachments </span>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="4">
                                                    <table border="0" cellpadding="0" cellspacing="0">
                                                        <tr>
                                                            <td>
                                                                <textarea haswatermark="true" watermarktext="Enter notes here" maxlength="1000" data-val="true"
                                                                    data-val-length="The field Notes must be a string with a maximum length of 1000."
                                                                    data-val-length-max="1000" style="width: 300px" name="Notes" id="Notes"></textarea>
                                                                <br />
                                                            </td>
                                                            <td style="width: 10px">
                                                            </td>
                                                            <td>
                                                                <div>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </td>
                                            </tr>
                                        </table>
                                        <br />
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    }
    Site.css
    .tab_content_group_title
    {
        color: White;
        background-color: Black;
        font-weight: bold;
        font-size: 13px;
        margin-top: 5px;
        padding: 5px 5px 5px 5px;
    }
    
    .tab_content_group
    {
        background-color: #FFFFFF;
        padding: 0px 5px 5px 5px;
        margin-top: 0px;
        border: 1px solid #a5a2a5;
    }
    
    .body h2
    {
        font-size: 14px;
        font-weight: bold;
    }
    Thanks in advance.
    Last edited by Daniil; Jul 12, 2012 at 2:32 PM. Reason: [CLOSED]
  2. #2
    In your first sample, it appears you do not include Ext.NET. That's going to produce different results across pages that do and do not include the ExtJS .css files.

    As a side note, you're not really leveraging any of the layout functionality of Ext.NET/ExtJS, so you're creating a lot of bloat on your page. I'd recommend rethinking how you create your layouts. You should be able to remove all <table>, <tr> and <td> tags.
    Geoffrey McGill
    Founder
  3. #3
    Quote Originally Posted by geoffrey.mcgill View Post
    In your first sample, it appears you do not include Ext.NET. That's going to produce different results across pages that do and do not include the ExtJS .css files.

    As a side note, you're not really leveraging any of the layout functionality of Ext.NET/ExtJS, so you're creating a lot of bloat on your page. I'd recommend rethinking how you create your layouts. You should be able to remove all <table>, <tr> and <td> tags.
    Thanks for your update.

    I have multiple pages in that some of the pages i don't want ext.net so for that i am using seperate layout page. if i want to use any ext.net controls in my page means for that i use seperate layout page. but css is common to all pages. unfortunately these two type of pages having different behaviour while applying styles. i think when i am using ext.net it will override my styles.

    please do the needful.
  4. #4
    Hi,

    Here is the related post regarding Ext.NET v1:
    http://forums.ext.net/showthread.php...ll=1#post57861

    There is the same situation in Ext.NET v2. But the PreventBodyReset property has been removed, the substitution is the StyleHtmlContent property.
    http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-cfg-styleHtmlContent

    Or you can just prevents all Ext.NET CSS to be rendered setting up
    RenderStyles="None"
    for the ResourceManager, if you don't need it.

    Be careful, because the Ext.NET widgets are inextricably linked to its CSS and can just stops working or looks ugly. So, if you need the initial view of the widgets, it's not an option.
    Last edited by Daniil; Jul 12, 2012 at 12:45 PM.
  5. #5
    Quote Originally Posted by Daniil View Post
    Hi,

    Here is the related post regarding Ext.NET v1:
    http://forums.ext.net/showthread.php...ll=1#post57861

    There is the same situation in Ext.NET v2. But the PreventBodyReset property has been removed, the substitution is the StyleHtmlContent property.
    http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-cfg-styleHtmlContent

    Or you can just prevents all Ext.NET CSS to be rendered setting up
    RenderStyles="None"
    for the ResourceManager, if you don't need it.

    Be careful, because the Ext.NET widgets are inextricably linked to its CSS and can just stops working or looks ugly. So, if you need the initial view of the widgets, it's not an option.

    Thanks for your update.

    For the present i did some workaround to fix those issues.

Similar Threads

  1. [CLOSED] Calender View in Razor - Version issue
    By MTSI in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Jul 05, 2012, 9:28 AM
  2. Replies: 2
    Last Post: Jun 06, 2012, 8:50 PM
  3. [CLOSED] Bottom Bar rendering issue with Razor viewgine
    By T3rryChan in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 23, 2012, 8:00 PM
  4. Replies: 1
    Last Post: Mar 26, 2012, 9:11 PM
  5. Version 2 stylesheet
    By kagster in forum 2.x Help
    Replies: 2
    Last Post: Mar 19, 2012, 1:13 AM

Tags for this Thread

Posting Permissions