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.
Related
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
On my Master page, I have created a Horizontal menu, styled by CSS. The list items show panels with link buttons on them to take users to different pages.
The Panels always show above controls, except for one page.
The content of the page shows 2 asp:Buttons. On this page, the panel gets hidden behind the buttons, but the border for the panel still shows.
The image below will illustrate clearly:
The CSS for the horizontal menu is as follows:
/* Horizontal menue style */
ul
{
padding: 0;
margin: 0 0 0 0 ;
list-style: none;
}
li
{
cursor: default;
float: left;
position: relative;
width: 90px;
color: darkgray;
text-align: center;
background-color: white;
height: 23px;
padding-top: 2px;
}
li:hover {
background-color: white;
color: black;
padding-top: 2px;
}
li ul
{
display: none;
position: absolute;
margin: 0;
padding: 0;
margin-top: -9px;
width: 100px;
}
li > ul
{
top: auto;
left: auto;
}
li:hover ul, li.over ul
{
display: block;
}
The panel goes through a skin file:
<asp:Panel runat="server" CssClass="menuWrapper" SkinID="MenuWrapper"></asp:Panel>
.menuWrapper
{
z-index: 500;
font-size: small;
margin-top: 15px;
margin-left: -2px;
padding: 5px;
padding-left: 15px;
line-height: 25px;
background-color: white;
width: 190px;
text-align: left;
border-left: 1px lightgray solid;
border-bottom: 1px lightgray solid;
border-right: 1px lightgray solid;
border-top-right-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
}
Ive even fiddles with the z-index. How can I create a solution.
The answer lies in the z-index of the UL.
I have changed the UL css to the following:
ul
{
padding: 0;
margin: 0 0 0 0 ;
list-style: none;
z-index: 499;
}
Which has now fixed the issue.
I am using asp.NET 4.0 with C# and have recently created a custom design for my local web application. I would like that when a page is selected, it has a different background colour (usually in plain html + css we just set a menu item as active). I tried using but it is not working, it stays the same colour as the others. Does any one has any experience with this?
Code in Site Master:
<h2>Dashboard</h2>
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Vertical" >
<StaticSelectedStyle CssClass="selectedMenu" />
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="View Submissions"/>
<asp:MenuItem NavigateUrl="~/Imports.aspx" Text="Import"/>
<asp:MenuItem NavigateUrl="~/Submission.aspx" Text="Insert Submission"/>
<asp:MenuItem NavigateUrl="~/Reports.aspx" Text="Reports"/>
<asp:MenuItem NavigateUrl="~/CurrencyMaintenance.aspx" Text="Currency Maintenance" />
<asp:MenuItem NavigateUrl="~/Remittance.aspx" Text="Remittance" />
</Items>
</asp:Menu>
CSS:
/* TAB MENU
----------------------------------------------------------*/
div.hideSkiplink
{
background-color:#3a4f63;
width:100%;
}
div.menu
{
padding: 4px 0px 4px 8px;
}
div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}
div.menu ul li a, div.menu ul li a:visited
{
background-color: #FFF; /*680840*/
border: 1px #4e667d solid;
height: 20px;
width: 175px;
color: #000; /*FFF*/
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
background-color: #680840;
color: #FFF;
text-decoration: none;
}
.selectedMenu
{
background-color: #680840 !important;
color: #FFF !important;
text-decoration: none !important;
}
div.menu ul li a:active
{
background-color: #680840;
color: #cfdbe6;
text-decoration: none;
}
This is what it looks like on Hover, I would like a similar effect on selected.
This seems to be a bug with the .NET menu. There is some information regarding this here. What you might want to do then is remove the staticSelectedStyle attribute and simply add this to your css:
.menu a.static.selected
{
background-color: #680840 !important;
color: #FFF !important;
text-decoration: none !important;
}
You might also have to add some code to your master's page load to determine which should be the selected item like this:
protected void Page_Load(object sender, EventArgs e)
{
string path = Request.AppRelativeCurrentExecutionFilePath;
foreach (MenuItem item in NavigationMenu.Items)
{
item.Selected = item.NavigateUrl.Equals(path, StringComparison.InvariantCultureIgnoreCase);
}
}