編輯後的行的自定義樣式GridView ASP.NET

我正在尋找在我的GridView中正在編輯的行的樣式。編輯後的行的自定義樣式GridView ASP.NET

我知道如何更改背景顏色和字體，但我需要的是它看起來像是在網格上方，就像陰影一樣，編輯的行必須真正突出顯示。

我的styles.css：

.grid_normalRow /*on mouse out event*/ 
{ 
     background-color:white; 
} 
.grid_highlightedRow /*on mouse over event*/ 
{ 
     background-color:aqua; 
} 
.grid_editedRow /*on row editing event - The one i need to change */ 
{ 
     background-color:yellow; 
     font-weight: bold; 
     height: 30px; 

}

我找不到apropiate CSS樣式acomplish我的要求。

來源

2016-03-03 DiegoS

盒的方式 - 陰影？你試過了嗎？ –

是的，我做了，但它並沒有在網格中產生陰影效果.. – DiegoS

對於外部陰影（如果隱藏在周圍的框中），您可以添加：position：relative如果所有元素都是靜態的，如果已經定位，則增加z -index值:)你是jsfiddle還是codepen的html/css呈現？ –

您對這種方法有什麼看法？

編輯：如果您正在使用表格，您可以通過在tr上添加display: block來使Box Shadow工作。我更新了Codepen以顯示它的工作原理。

.grid_editedRow 
 
/*The one i need to change*/ 
 

 
{ 
 
    background-color: lemonchiffon; 
 
    font-weight: bold; 
 
    height: 30px; 
 
    border: 1px solid; 
 
    box-shadow: 0 0 5px black; 
 
} 
 
.grid_normalRow 
 
/*on mouse out event*/ 
 

 
{ 
 
    /* adding bg color messes with the shadow effect */ 
 
    /* background-color:white; */ 
 
} 
 
.grid_highlightedRow 
 
/*on mouse over event*/ 
 

 
{ 
 
    background-color: aqua; 
 
} 
 
tr { 
 
    display: block; 
 
}

<table> 
 
    <tr class="grid_normalRow"> 
 
    <td>yet</td> 
 
    <td>another</td> 
 
    <td>grid</td> 
 
    <td>row</td> 
 
    </tr> 
 
    <tr class="grid_editedRow"> 
 
    <td>Hi</td> 
 
    <td>How</td> 
 
    <td>Are</td> 
 
    <td>you?</td> 
 
    </tr> 
 
    <tr class="grid_normalRow"> 
 
    <td>yet</td> 
 
    <td>another</td> 
 
    <td>grid</td> 
 
    <td>row</td> 
 
    </tr> 
 
    <tr class="grid_highlightedRow"> 
 
    <td>yet</td> 
 
    <td>another</td> 
 
    <td>grid</td> 
 
    <td>row</td> 
 
    </tr> 
 
</table>

你可以看到在這個Codepen

來源

2016-03-03 02:16:56 Wazaraki

陰影不顯示在網格行中，如果我在按鈕或div中使用相同的樣式它沒關係，但它不適用於網格行。 – DiegoS

請看我更新的回答:) – Wazaraki

這種風格正是我在尋找的東西，但它也不管用！ – DiegoS

第一所產生的效果在你的GridView行編輯功能設置行的CSS。

protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e) 
    { 
     GridView1.EditIndex = e.NewEditIndex; 
     GridView1.EditRowStyle.CssClass = "EditRow"; 
     GridView1.DataBind(); 
    }

然後設置css來

.EditRow 
    { 
    background-color:yellow; 
    border-radius: 5px; 
    box-shadow: 1px 1px 6px 4px #000; 
    font-weight: bold; 
    height: 30px; 
    }

可以圍繞一點玩的邊界半徑和箱陰影值，使其你最喜歡的

來源

2016-03-03 03:36:51 Creator

該風格不在GridView行中工作..只有背景顏色效果可見.. – DiegoS

@DiegoS然後其他東西一定是錯的，因爲它的工作。「你在使用gridview的RowEditing事件嗎？「也許你會在其他地方覆蓋設置，嘗試一個新的表單和一個新的gridview，你會看到它的工作原理 – Creator

編輯後的行的自定義樣式GridView ASP.NET

回答

相關問題