PDA

View Full Version : [CLOSED] stylesheet issue - Razor



MTSI
Jul 12, 2012, 8:38 AM
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.

geoffrey.mcgill
Jul 12, 2012, 9:13 AM
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.

MTSI
Jul 12, 2012, 11:17 AM
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.

Daniil
Jul 12, 2012, 12:39 PM
Hi,

Here is the related post regarding Ext.NET v1:
http://forums.ext.net/showthread.php?13877&p=57861&viewfull=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 (http://docs.sencha.com/ext-js/4-1/#%21/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.

MTSI
Jul 12, 2012, 2:27 PM
Hi,

Here is the related post regarding Ext.NET v1:
http://forums.ext.net/showthread.php?13877&p=57861&viewfull=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 (http://docs.sencha.com/ext-js/4-1/#%21/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.