I'm a beginner in CSS and i need to set the style for all the asp:Labels i got in my page.
I can do this for html label control:
label
{
color:red;
}
<label ID="mylabel" runat="server">My Text</label>
but that doesn't work for asp:Label control.
I could find online that i can do it adding a CSSClass attribute to each asp:Label control and then set the attributes of my CSSClass at the top of the page.
.myclass
{
color:red;
}
<asp:Label ID="mylabel" runat="server" CSSClass="myclass">Test</asp:Label>
But this way i'll have to go through all the asp:Label controls and give them CSSClass="myclass". Is there a way i style all my asp:labels in the same way i styled the html labels above?
The asp label renders like a span tag. So try to give style for a span tag.
label, span { color:Red; }
See here for more information
You can use inline style sheet as follows:
<asp:Label ID="Label1" runat="server" Text="Label" style="color:Red;
font: 12pt Verdana;font-weight:700;"></asp:Label>
You can do it from the back end also:
VB:
Label1.Attributes.CssStyle.Add("color", "Red")
C#:
myDiv.Attributes.CssStyle.Add("color", "Red");
Related
I want to increase the space between two textboxes without using the line break. I've created a CSS rule but it has no effect when displaying the page.
These are the textboxes
<asp:Label ID="Discount" CssClass="textboxcontainer" runat="server" Text="Discount: "></asp:Label><asp:TextBox ID="TextBoxDiscount" runat="server"></asp:TextBox><br />
<asp:Label ID="TotalAfterDis" CssClass="textboxcontainer" runat="server" Text="Total : "></asp:Label><asp:TextBox ID="TextBoxTotal" runat="server"></asp:TextBox> <br />
I have this CSS rule in CSS file
div#page .textboxcontainer{
margin: 10px auto;
Any help is really appreciated
margin doesn't work on asp:label, since asp:label is rendered into span, which is an inline element
Try adding display:inline-block to your css rule.
Your <asp:Label> will render as an HTML span, which displays inline by default, causing top and bottom margin to be ignored. Add display: block or display: inline-block to your .textboxcontainer rule.
ASP Label controls render in a <span> tag at runtime. This is what is giving you trouble. Simply wrap the label and textbox control in their own div and you will get that block separation. Add a class to that div and give it a margin-bottom: XXpx and you are on your way
<div class="form-group">
<asp:Label ID="Discount" CssClass="textboxcontainer" runat="server" Text="Discount: "></asp:Label>
<asp:TextBox ID="TextBoxDiscount" runat="server"></asp:TextBox>
</div>
<div class="form-group">
<asp:Label ID="TotalAfterDis" CssClass="textboxcontainer" runat="server" Text="Total : "></asp:Label>
<asp:TextBox ID="TextBoxTotal" runat="server"></asp:TextBox>
</div>
CSS
.form-group{
margin-bottom: 10px;
}
I want to write css for textbox in asp.I'm familiar with html,php. Struck to convert html css to asp css.
css for html input
input[type=text],textarea,select,input[type=password]{
float:right;
margin-right:20%;
width:155px;
}
I want to convert this to input boxes
<asp:textbox runat="server"></asp:textbox>
<asp:dropdownlist runat="server"></asp:dropdownlist>
You need to find something which has the type attribute equal to text in HTML
CSS
input:not([type]), input[type="text"] {
background: green;
}
or make the HTML explicit.
<input name='t1' type='text' id='txt1' />
Now you can customize the CSS attribute according to your requirement.
Hope it helps
You can use CssClass property and then style it as you require. For example
<asp:TextBox runat="server" ID="MyTextBox" CssClass="MyCss"></asp:TextBox>
and then style it using MyCss
Further info here
I have the following code but it doesnt seem to work:
<td align="center" style="padding-bottom:52.5px">
<asp:ImageButton CssClass="RightArrow" ID="Image2" runat="server" ImageUrl="/_layouts/Right_GrayArrow.png"/>
</td>
And a CSS class to change image on hover:
.RightArrow:hover
{
background-image: url('/_Layouts/Right_GreenArrow.png') !important;
}
Please advise.
Thanks
I prefer this way:
<asp:ImageButton CssClass="RightArrow" ID="Image2" runat="server" ImageUrl="/_layouts/Right_GrayArrow.png" onmouseover="this.src='/_layouts/Right_GreenArrow.png'" onmouseout="this.src='/_layouts/Right_GrayArrow.png'"/>
bye
An ImageButton controls renders as a <input type="image" /> element with the ImageUrl property becoming the src attribute like:
<input type="image" src="/_layouts/Right_GrayArrow.png" />
Therefore you are applying a background image to this, which you cannot see as the src image is being overlayed on top of it.
You have 2 choices:
1) Change the ImageButton to use a background image:
.RightArrow
{
width: /* width of image */
height: /* height of image */
background-image:url('/_layouts/Right_GrayArrow.png');
}
.RightArrow:hover
{
background-image: url('/_Layouts/Right_GreenArrow.png');
}
If you are going to use this method though, I would recommend using an <asp:Button /> instead. It seems pointless using an <asp:ImageButton /> if you're not even making use of the src attribute.
2) Use jQuery to change the image on hover:
$(".RightArrow").hover(function(){
$(this).attr("src", "/_Layouts/Right_GreenArrow.png");
},
function(){
$(this).attr("src", "/_Layouts/Right_GrayArrow.png");
});
Worth noting this will only work with javascript enabled, and you must include the jQuery library.
The ImageUrl property isn't the same as setting the background-image. Remove the CSS and set the onmouseout and onmouseover properties in your page.
I'm using the HtmlEditorExtender control of the AJAX Control Toolkit and I want to change the editor's background color to another color.
How can I do that?
You just have to target the css class that the AJAXControlToolkit uses to style that element. In this case, it is the ajax__html_editor_extender_texteditor class. The following css would make the background of the HTML editor orange:
.ajax__html_editor_extender_texteditor
{
background-color:#FFA500;
}
If you put the control and extender into a table, you can set the background color in the tag like so:
<td style="background-color: white;">
<asp:TextBox ID="myTextBox" MaxLength="1000" Width="250px" Height="250px" TextMode="MultiLine" Rows="10" Wrap="true" runat="server" />
<ajaxToolkit:HtmlEditorExtender ID="HtmlEditorExtender1" TargetControlID="myTextBox" runat="server"/>
</td>
Put all inside this div. Works nicely!
div style="background-color: white; width: 100%;background-color:white;padding:0px 10px 6px 0px;"
You try to define a css and set it to the CssClass attribute of HtmlEditorExtender.
E.g
<style type="text/css">
.generalbox {
background-color:#F90
}
</style>
<cc2:Editor ID="txtDescription" CssClass="generalbox" runat="server" Height="300px" AutoFocus="true" Width="100%" />
I have a DropDownList in my aspx file like this:
<asp:DropDownList runat="server" ID="MaxRec">
<asp:ListItem>10</asp:ListItem>
<asp:ListItem>50</asp:ListItem>
<asp:ListItem>100</asp:ListItem>
<asp:ListItem>150</asp:ListItem>
<asp:ListItem Selected="True">200</asp:ListItem>
</asp:DropDownList>
In Chrome it renders like this:
How can i set the alignment on all ListItems to be to the right so that values are properly aligned?
I tried setting style="text-align:right" on the DropDownList and on the ListItems but it doesn't have any effect.
I need a solution that also works on Chrome.
Thanks for replies!
Adding the following style will align the numbers as required but will move the drop down arrow to the left instead of the right.
Other than using this I assume the inability to right align select options may be a limitation in Chrome.
.drop-down-list
{
direction: rtl;
}
the below code works for me
<head>
<style type="text/css">
select.myDropDownList {
text-align: right;
}
</style>
</head>
<asp:DropDownList ID="myDropDownList" Runat="server" CssClass="myDropDownList">
<asp:ListItem>10</asp:ListItem>
<asp:ListItem>50</asp:ListItem>
<asp:ListItem>100</asp:ListItem>
<asp:ListItem>150</asp:ListItem>
</asp:DropDownlist>