I am developing a page where a list of people are sorted randomly. The page consists of a series of gridviews containing names with a checkbox. When i click on the checkbox and click submit button, the particular row should be colored. My issue is that I am unable to override the css of the gridviews.
This is the gridview css:
.GridCss
{
margin: 0px;
padding: 0px;
width: 260px;
height:700px;
box-shadow: 10px 10px 5px #888888;
border: 1px solid #ffffff;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
border-bottom-left-radius: 0px;
-moz-border-radius-bottomright: 0px;
-webkit-border-bottom-right-radius: 0px;
border-bottom-right-radius: 0px;
-moz-border-radius-topright: 0px;
-webkit-border-top-right-radius: 0px;
border-top-right-radius: 0px;
-moz-border-radius-topleft: 0px;
-webkit-border-top-left-radius: 0px;
border-top-left-radius: 0px;
}
.GridCss table
{
border-collapse: collapse;
border-spacing: 0;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.GridCss tr:last-child td:last-child
{
-moz-border-radius-bottomright: 0px;
-webkit-border-bottom-right-radius: 0px;
border-bottom-right-radius: 0px;
}
.GridCss table tr:first-child td:first-child
{
-moz-border-radius-topleft: 0px;
-webkit-border-top-left-radius: 0px;
border-top-left-radius: 0px;
}
.GridCss table tr:first-child td:last-child
{
-moz-border-radius-topright: 0px;
-webkit-border-top-right-radius: 0px;
border-top-right-radius: 0px;
}
.GridCss tr:last-child td:first-child
{
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
border-bottom-left-radius: 0px;
}
.GridCss tr:hover td
{
background-color: #e5e5e5;
}
.GridCss th
{
vertical-align: middle;
background: -o-linear-gradient(bottom, #ffffff 5%, #e5e5e5 100%);
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #e5e5e5) );
background: -moz-linear-gradient( center top, #ffffff 5%, #e5e5e5 100% );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#e5e5e5");
background: -o-linear-gradient(top,#ffffff,e5e5e5);
background-color: #ffffff;
border: 1px solid #ffffff;
border-width: 0px 1px 1px 0px;
text-align: left;
padding: 7px;
font-size: 14px;
font-family: Arial;
font-weight: normal;
color: #000000;
}
.GridCss td
{
vertical-align: middle;
background: -o-linear-gradient(bottom, #ffffff 5%, #e5e5e5 100%);
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #e5e5e5) );
background: -moz-linear-gradient( center top, #ffffff 5%, #e5e5e5 100% );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#e5e5e5");
background: -o-linear-gradient(top,#ffffff,e5e5e5);
background-color: #ffffff;
border: 1px solid #ffffff;
border-width: 0px 1px 1px 0px;
text-align: left;
padding: 7px;
font-size: 12px;
font-family: Arial;
font-weight: normal;
color: #000000;
}
.GridCss tr:last-child td
{
border-width: 0px 1px 0px 0px;
}
.GridCss tr td:last-child
{
border-width: 0px 0px 1px 0px;
}
.GridCss tr:last-child td:last-child
{
border-width: 0px 0px 0px 0px;
}
.GridCss tr:first-child td
{
background: -o-linear-gradient(bottom, #cccccc 5%, #b2b2b2 100%);
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #cccccc), color-stop(1, #b2b2b2) );
background: -moz-linear-gradient( center top, #cccccc 5%, #b2b2b2 100% );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#b2b2b2");
background: -o-linear-gradient(top,#cccccc,b2b2b2);
background-color: #cccccc;
border: 0px solid #ffffff;
text-align: center;
border-width: 0px 0px 1px 1px;
font-size: 14px;
font-family: Arial;
font-weight: bold;
color: #000000;
}
.GridCss tr:first-child:hover td
{
background: -o-linear-gradient(bottom, #cccccc 5%, #b2b2b2 100%);
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #cccccc), color-stop(1, #b2b2b2) );
background: -moz-linear-gradient( center top, #cccccc 5%, #b2b2b2 100% );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#b2b2b2");
background: -o-linear-gradient(top,#cccccc,b2b2b2);
background-color: #cccccc;
}
.GridCss tr:first-child td:first-child
{
border-width: 0px 0px 1px 0px;
}
.GridCss tr:first-child td:last-child
{
border-width: 0px 0px 1px 1px;
}
I am applying css class to the selected row through c#
row.CssClass = "blue";
where blue css class is (which i created by just changing the background in .GridCss td)
.blue
{
vertical-align: middle;
background: -o-linear-gradient(bottom, #ffffff 5%, #e5e5e5 100%);
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #8880C5), color-stop(1, #3C49AB) );
background: -moz-linear-gradient( center top, #ffffff 5%, #e5e5e5 100% );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#e5e5e5");
background: -o-linear-gradient(top,#ffffff,e5e5e5);
background-color: #ffffff;
border: 1px solid #ffffff;
border-width: 0px 1px 1px 0px;
text-align: left;
padding: 7px;
font-size: 12px;
font-family: Arial;
font-weight: normal;
color: #FFF;
}
Button click event code:
protected void btnSubmit_Click(object sender, EventArgs e)
{
GridView[] _grdArray = { GridView1, GridView2, GridView3, GridView4, GridView5 };
foreach (GridView gridview in _grdArray)
{
foreach (GridViewRow row in gridview.Rows)
{
if (row.RowType == DataControlRowType.DataRow)
{
CheckBox chkRow = (row.Cells[0].FindControl("chkCtrl") as CheckBox);
if (chkRow != null && chkRow.Checked)
{
row.CssClass = "blue";
}
}
}
}
}
But it is showing only the original style. When I check through the browser the particular row has been assigned the class blue (tr class="blue"). I even tried to assign css to individual cells in the row but no change is observed. How can I achieve that.
try !important in css class
.blue
{
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #8880C5), color-stop(1, #3C49AB) ) !important;
//same as .GridCss
}
or You can do it like :
add RowDataBound event to Your GridView and then
protected void gvDocsVerPrev_RowDataBound(object sender, GridViewRowEventArgs e)
{
//Get data row view
DataRowView drview = e.Row.DataItem as DataRowView;
if (e.Row.RowType == DataControlRowType.DataRow)
{
CheckBox chkbox= e.Row.FindControl("chkbox") as CheckBox ;
if (chkbox.Selected)
{
e.Row.CssClass = "blue";
}
}
}
Please check the selector precedence section in https://stackoverflow.com/tags/css/info.
Your definition has less precedence that .GridCss tr, to solve this you should use at least tr.blue as:
tr.blue
{
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #8880C5), color-stop(1, #3C49AB) );
//same as .GridCss
}
Furthermore I do not like to use !important as it can be very confusing in reading code or further change/refactoring.
I have the following code in ASP.net which displays a header and a ListBox:
<div id="divEntMain">
<div class="clsEntMain">
<h3>Entities</h3>
<div class="clsLBHolder">
<asp:ListBox ID="lbEnt" ClientIDMode="Static" runat="server"></asp:ListBox>
</div>
</div>
</div>
The CSS defines the look:
.clsEntMain h3
{
background: #F06600;
color: #fff;
text-shadow: 0 -1px 1px rgba(0,0,0,0.7);
border-radius: 10px 10px 0 0;
padding: 13px 20px;
font-size: 12px;
text-align: left;
text-transform: uppercase;
}
#divEntMain
{
width: 100%;
text-align: center;
padding: 0;
margin: 0;
}
#lbEnt
{
width: 100%;
height: 140px;
margin: 0;
padding: 0;
}
Here is the output:
If I modify to this The ListBox moves up just a little bit but I don't want to as the spacing might change based on screen resolution.:
<div style="margin-top: -5px;" class="clsLBHolder">
Why is there a space between the orange H3 and the ListBox?
The default margin for h3 is :
margin-before: 1em;
margin-after: 1em;
margin-start: 0;
margin-end: 0;
To override this, you could
h3{
margin: 0;
}
More info about default properties for html elements here: http://www.w3.org/TR/html-markup/h3.html
I have two model popup windows in my project. When i clcik a search button first modul popup will popp in the window. This model popup have option to view details. When i click on it i need another popup to pop and show details.
Now problem is when i click on the view option the second popup is coming behind first popup and its not visible.
What may be the mistake i have done
if (e.CommandName.Equals("View"))
{
ModalRearrangement.Show();
ModalViewDocument.Show();
}
In the above code ModalRearrangement is the first popup.
Update
CSS
.modalBackground
{
background-color: Black;
filter: alpha(opacity=60);
opacity: 0.6;
}
.modalPopup
{
background-color: #FFFFFF;
width: 300px;
border: 3px solid #3CB371;
border-radius: 12px;
padding:0
}
.modalPopup .header
{
background-color: #2FBDF1;
height: 30px;
color: White;
line-height: 30px;
text-align: center;
font-weight: bold;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.modalPopup .body
{
min-height: 50px;
line-height: 30px;
text-align: center;
font-weight: bold;
}
.modalPopup .footer
{
padding: 6px;
}
This is common css for both popup.
Add This To your HTML in Popup Div
Give z-index : 990 To First Pop up
And z-index : 9990 To Second Pop up
How to verify the text or title of a pop up visible for few seconds using C# selenium webdriver. which appears under a certain conditions.
This is the code I have:
<div class="blockUI blockMsg blockPage" style="z-index: 100001; position: fixed; padding: 5px; margin: 0px; width: 350px;
top: 10px; text-align: center; color: rgb(255, 255, 255); border: medium none; background-color: rgb(0, 0, 0); cursor:
default; right: 10px; opacity: 0; border-radius: 10px;">
I'm not able to align the label and Ajax Rating Control in a single line.
Code is,
<label class="Informlabel" style="font-size: 13px; font-weight: bold; float: left;
width: 100%; overflow: auto; display: block; vertical-align: top;">
Rating :</label>
<asp:Rating ID="Rating1" runat="server" MaxRating="5" CurrentRating="0" CssClass="ratingStar"
StarCssClass="ratingItem" WaitingStarCssClass="Saved" FilledStarCssClass="Filled"
EmptyStarCssClass="Empty" AutoPostBack="false">
</asp:Rating>
Here is the css of Rating tool
li
{
clear:both;
margin-bottom:1em;
border-bottom:1px solid #eee;
}
/* ****************** RatingStar ****************** */
.ratingStar
{
white-space:nowrap;
margin:1em;
height:17px;
vertical-align:top;
}
.ratingStar .ratingItem {
font-size: 0pt;
width: 20px;
height: 16px;
margin: 0px;
padding: 0px;
display: inline-block;
background-repeat: no-repeat;
cursor:pointer;
}
.ratingStar .Filled {
background-image: url(Images/Rating/Selected.gif);
}
.ratingStar .Empty {
background-image: url(Images/Rating/Empty.gif);
}
.ratingStar .Saved {
background-image: url(Images/Rating/Hover.gif);
}
Can you Help me out ??
It's because you have display:block on your label, it should be display: inline-block; same for the output of Ajax Rating Control