Format WebGrid dans le Fichier CSS

J'ai un webgrid dans une de mon point de vue. Je tiens à ajouter quelques propriétés de style, mais il ne fonctionne pas quand je les ajouter dans le projet du fichier css. Cependant, lorsque je l'ajouter dans la balise style dans la vue, il fonctionne. Aussi, tous les autres éléments de l'affichage obtenir mis en forme selon le fichier css s'attendre à la webgrid.

Pouvez le webgrid être mis en forme à partir d'un fichier CSS?

MODIFIER

var grid = new WebGrid(canPage: true, rowsPerPage: 10, canSort: true, ajaxUpdateContainerId: "grid");
grid.Bind(model, rowCount: Model.ToList().Count(), autoSortAndPage: false);
grid.Pager(mode:WebGridPagerModes.All, 
    firstText:"First", lastText:"Last", 
    previousText:"Previous", 
    nextText:"Next", 
    numericLinksCount: 15);
    @grid.GetHtml(htmlAttributes: new { id = "grid" },
    tableStyle: "webgrid",
    headerStyle: "webgrid-header",
    footerStyle: "webgrid-footer",
    alternatingRowStyle: "webgrid-alternating-row",
    selectedRowStyle: "webgrid-selected-row",
    rowStyle: "webgrid-row-style",
    columns: grid.Columns(
        grid.Column(columnName: "column1", header: "column 1r"),
        grid.Column(columnName: "column2", header: "column 2", canSort:true),
        grid.Column(format: (item) => Html.ActionLink("Detail", "Detail", new { JobNumber = item.JobNumber, @style="color:#CCC;" })),
        grid.Column(format: (item) => Html.ActionLink("Edit", "Edit", new { EmployeeID = item.JobNumber }))
));

Et voici le css

.webgrid
{
 width: 100%;
 border: 0px;
 border-collapse: collapse;
 white-space:nowrap;
 }

.des {
    width:50%;
}

.webgrid a
{
color: #000;
}

.webgrid-header
{
padding: 6px 5px;
text-align: center;
background-color: #e8eef4;
border-bottom: 2px solid #3966A2;
height: 40px;
border-top: 2px solid #D6E8FF;
border-left: 2px solid #D6E8FF;
border-right: 2px solid #D6E8FF;
}

.webgrid-footer
{
padding: 6px 5px;
text-align: center;
background-color: #e8eef4;
border-top: 2px solid #3966A2;
height: 30px;
border-bottom: 2px solid #D6E8FF;
border-left: 2px solid #D6E8FF;
border-right: 2px solid #D6E8FF;
 }

.webgrid-alternating-row
{
height: 30px;
background-color: #f2f2f2;
border-bottom: 1px solid #d2d2d2;
border-left: 2px solid #D6E8FF;
border-right: 2px solid #D6E8FF;
}

Pouvez-vous mettre un peu de code? Le problème est probablement que votre sélecteurs CSS ne ciblent pas les éléments de la grille correctement.
veuillez voir modifier
Tout a l'air correct ... je ne suis pas sûr de ce que pourrait être à la hausse. Tout ce que je peux suggérer, c'est, à l'utilisation de Firebug ou quelque chose de similaire pour identifier exactement pourquoi les styles ne sont pas appliquées.

OriginalL'auteur jpo | 2012-12-13

1

Je suppose que vous avez tort, inclus le fichier CSS. Assurez-vous d'avoir utilisé un helper url de référence le fichier au lieu de coder en dur l'adresse url. Afin de mettre ces règles dans un fichier CSS spécifique et ensuite inclure ce fichier comme ceci:
```
<link href="@Url.Content("~/Content/MyCustomStyle.css")" rel="stylesheet" type="text/css" />
```
OriginalL'auteur Darin Dimitrov

Vous devez vous connecter pour publier un commentaire.