Develop Reference

How to have lots of textboxes to have similar properties in CSS?

I want the textboxes to have the same color and the same size. However, the textboxes don't seem to change when I do the CSS. I also would like to know how to do it for multiple textboxes as I'm planning to add a lot more textboxes.
My CSS:
.TxtBox + .TxtBox{
border-style: none;
border-color: inherit;
border-width: 0;
position:absolute;
outline: 0;
height: 25px;
width:530px;
padding-left: 10px;
background-color: rgb(204, 204, 204);
top: 25px;
left: 165px;
}
And this is my Html using the Asp.Net framework:
<asp:TextBox class ="TxtBox" ID="TextBox2" runat="server" Height="20px"></asp:TextBox>
<asp:TextBox class="TxtBox" ID="TextBox1" runat="server" Height="16px"></asp:TextBox>

The "+" operator means "only the first child", so:
.TxtBox + .TxtBox{
means that you want to apply the style to the first textbox inside a textbox (assuming you set the class TxtBox to all of them)
Since you want to apply the style to all of the elements with that class, just do:
.TxtBox {

How to change background color of a div based on asp.net label value? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have an asp.net label (lblFriday) and a div next to it. lblFriday is showing the number data retrieved from database table. I want the div next to lblFriday to show a red triangle if the text of lblFriday is a negative number and green triangle if the text of lblFriday is a positive number.
Currently I've set the css class of the div manually with red color. Here is the code,
HTML / ASPX :
<asp:Label ID="lblFriday" runat="server" CssClass="label_target"></asp:Label>
<div class="arrow-down"></div>
CSS :
.arrow-down
{
float:right;
width: 0;
margin-top:5px;
height: 0;
text-align:left;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid red;
}
Any ideas will be helpful.
Thanks.

The first thing that you need to do is adding id and runat="server" attribute to the div so it will be accessible from the code behind.
<asp:Label ID="lblFriday" runat="server" CssClass="label_target"></asp:Label>
<div id="divTriangle" runat="server"></div>
then you need to fix your css as follows, where arrow-down will show a red triangle facing down and arrow-up will show a green triangle facing up
.arrow-down
{
float:right;
width: 0;
margin-top:5px;
height: 0;
text-align:left;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 10px solid red;
}
.arrow-up
{
float:right;
width: 0;
margin-top:5px;
height: 0;
text-align:left;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid green;
}
then set the CSS class of divTriangle in your code behind based on the value of lblFriday.Text. Let's say the value is a decimal retrieved from database, here's what your code behind should look like:
decimal stockValue = ....; // get the value from database
lblFriday.Text = stockValue.ToString();
if (stockValue > 0)
{
// set css class to arrow-up
divTriangle.Attributes["class"] = "arrow-up";
}
else if (stockValue < 0)
{
// set css class to arrow-down
divTriangle.Attributes["class"] = "arrow-down";
}
else
{
// no css class if stockValue is zero
divTriangle.Attributes["class"] = "";
}

Depending on how you are binding the data to the label, you could do:
<asp:Label ID="lblFriday" runat="sever" Text='<%# Eval("DATA") %>'
OnPreRender="lblFriday_PreRender" CssClass="label_target" />
Then in the code behind:
protected void lblFriday_PreRender(object sender, EventArgs e)
{
Label lblFriday = sender as Label;
decimal d;
if(Decimal.TryParse(lblFriday.Text, out d))
{
lblFriday.CssClass += d < 0 ? " negative" : d > 0 ? " positive" : String.Empty;
}
}
And finish with some CSS:
.label_target.negative::after
{
content: '\25BC';
color: Red;
}
.label_target.positive::after
{
content: '\25B2';
color: Green;
}

Change color of an asp.net button on mouse hover using css

I have a button :
<div class="HeaderBarThreshold">
<asp:LinkButton ID="SetThreshold" OnClick="btnSetThreshold_Click" runat="server">Threshold</asp:LinkButton>
</div>
I am trying to change the color of the button on mouse hover :
Here is my css :
.HeaderBarThreshold
{
padding-left: 10px;
font-weight: bold;
}
.HeaderBarThreshold:hover
{
color: Red;
}
It doesnt work somehow. Please let me know.

Try using the CssClass Property of ASP.NET controls. This will directly point the LinkButton itself to the CSS class, instead of having to use the div tag. For example:
<asp:LinkButton ID="SetThreshold" OnClick="btnSetThreshold_Click" runat="server" CssClass="HeaderBarThreshold">Threshold</asp:LinkButton>

Here is a fiddle http://jsfiddle.net/zpfw7/
.HeaderBarThreshold
{
padding-left: 10px;
font-weight: bold;
width:300px;
height:30px;
border:1px solid #000;
text-align:center;
}
.HeaderBarThreshold:hover
{
color: Red;
background:blue;
}

try this thing:
.HeaderBarThreshold a:hover
{
color: Red;
}

Add the CSS class attribute to your web control
<asp:LinkButton CSSClass="HeaderBarThreshold" ID="SetThreshold" OnClick="btnSetThreshold_Click" runat="server">Threshold</asp:LinkButton>
Also your CSS is wrong anyway because you don't have anything assigned to class "HeaderBarThreshold".

just try this
.HeaderBarThreshold:hover a
{
color: Red !important; // !important may not be necessary
}

.upda_link {
font-size: 15px !important;
color: white;
font-weight: bolder;
}
.upda_link:hover {
text-decoration: none;
color: white;
}
<asp:LinkButton ID="LinkButton1" runat="server" Text="Update" CssClass="upda_link" CausesValidation="false">
</asp:LinkButton>

Item overlap on its container

i got trouble with my gridview, which overlap on its container,
and here's my code for datagridview :
<asp:GridView ID="gvData" runat="server" AllowPaging="True" AutoGenerateColumns="False"
CellPadding="4" DataKeyNames="PayId" Font-Size="11px" ForeColor="Black" PageSize="20"
Width="100%" BorderColor="Black" CssClass="zebra" AlternatingRowStyle-CssClass="even" >
and when i generate the row , on datagridvie bound, i use :
Protected Sub gvData_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles gvData.RowDataBound
For i As Integer = 0 To e.Row.Cells.Count - 1
e.Row.Cells(i).Attributes.Add("style", "white-space:nowrap;")
Next
End Sub
for the container i already set em on master page, with css class :
for the wholoe page :
#PublicWrapper.width100 {
width: 92%;
padding-left: 2%;
padding-right: 2%;
float:left;
left: 50%;
position:relative;
margin-left: -48%;
}
for the body :
body.modern{
background-image: url(../Images/);
font-family: Arial;
color: rgb(0, 0, 0);
background-color: #353f5b;
line-height: normal;
font-size: 12px;
background-position: 0% 0%;
background-repeat: repeat;
background-attachment: scroll;
padding: 0px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
and for the grid container :
body #PublicWrapper .placeholder_5.sf_cols {
background-color: #a2a2a2;
}
i already add display: inline-block; but the container and the body didn't display on center screen, but my problem is resolved. is there any tricks on css should i use to make the body fit on center screen but the grid didint overlap?

Don't use percentage in your width ,use pixel size
can you change the Width="100%" to Width="1000px"

Maintain the SelectedNodeStyle of treeview while navigating Treeview on masterpage

Hi all i applied selectednodestyle for a treeview which works fine when i am not navigating. But on navigating i am unable to see the applied color for the treeview selected node. Here is my design in master page
<asp:TreeView ID="TreeViewCategories" runat="server" ExpandDepth="0" Style="min-height: 200px;
max-height: 500px;" NodeIndent="0" LeafNodeStyle-CssClass="LeafNodesStyle" CssClass="TreeView"
NodeStyle-CssClass="NodeStyle" ParentNodeStyle-CssClass="ParentNodeStyle" RootNodeStyle-CssClass="RootNodeStyle"
SelectedNodeStyle-CssClass="SelectedNodeStyle" LeafNodeStyle-Width="100%" NodeStyle-Width="100%"
ParentNodeStyle-Width="100%" RootNodeStyle-Width="100%" Font-Size="12pt">
<Nodes>
<asp:TreeNode Text="All Items" NavigateUrl="~/Default3.aspx" SelectAction="SelectExpand"
Value="All Items">
<asp:TreeNode Text="Hello" Value="Hello"></asp:TreeNode>
</asp:TreeNode>
</Nodes>
</asp:TreeView>
This is my css
<style type="text/css">
.TreeView
{
border-bottom: 1px dotted #B2B2B2 !important;
}
.TreeView div
{
margin-left: 5px;
}
.TreeView table
{
border-top: 1px dotted #B2B2B2 !important;
}
.TreeView div table
{
border-bottom: none !important;
border-top: none !important;
}
.TreeView table td
{
padding: 2px 0;
}
.LeafNodesStyle
{
}
.RootNodeStyle
{
}
/* ALL ELEMENTS */.NodeStyle
{
}
.ParentNodeStyle
{
/*background:yellow;*/
}
.SelectedNodeStyle
{
font-weight: bold;
color: #6799D1;
display: block;
padding: 2px 0 2px 3px;
}
</style>
But i am unable to apply the color for selected node after navigating to a page can any one help me

your codes are working Ok so is the CSS. if you will notice the text of the one youve selected became bold.
If your basis is in change of color of the text, there is some problem. If you would look at the source code, not only SelectedNodeStyle css style is applied on the item, but these also
NodeStyle FooterContent_TreeViewCategories_2 LeafNodesStyle FooterContent_TreeViewCategories_8 SelectedNodeStyle FooterContent_TreeViewCategories_10
so I suggest putting some !important on your css color for the change in color to take effect.
.SelectedNodeStyle
{
font-weight: bold;
color: #6799D1 !important;
display: block;
padding: 2px 0 2px 3px;
}