.labelOne { border-width:thin;
border-style:solid;
border-color:Red;
background-color:Silver; }
<asp:Label ID="Label1" runat="server" CssClass="labelOne">
<h1>Hello world</h1>
</asp:Label>
<br /><br />
<asp:Label ID="Label2" runat="server"
BorderColor="Black"
BorderStyle="Solid"
BorderWidth="1px"
BackColor="Silver">
<h1>Hello world</h1>
</asp:Label>
Hello. In the code sample above I have 2 Label controls with their contents set to an h1 header tag. The first Label is styled using css, and the second with the Label's inline properties (both Labels have identical styling). But the first Label doesn't output properly, it's border is broken. If I replace the first Label's markup with plain "Hello world" text it renders properly, but it breaks again when I use markup. Can someone explain why this is happening?
You're rendering invalid html. Label controls put their contents inside a span or label html tag by default, so now when you put h1 tags inside the label you have a block element inside an inline element, which is invalid.
You should wrap your h1 tags outside the label control, and then perhaps use a literal control instead — like this:
<h1 class="LabelOne"><asp:Literal ID="Label2" runat="server">
Hello world
</asp:Literal></h1>
Note that you could also easily apply inline styles to h1 if you wanted... not that I recommend inline styles, though.
Add this to your CSS:
display:inline-block;
Apparently Asp.Net adds that css style for you when you use the inline styles on a label.
By the way, I was able to spot the difference between the styles applied to the 2 labels (span tags) very quickly by bringing it up in Firebug.
Label is the wrong control to be using here as it renders a html <label>, which defines a label for an input element.
It would make more sense to use a Panel which will render as a <div>.
A span-element (which is what the asp:Label outputs) is an inline element, and can not contain block level elements like h1. This might be the reason why it breaks.
Related
When I add a tool tip attribute to asp drop-down list, its not showing any tool tip,When I include this drop-down in the div tag and give title attribute for the div tag, then i can see the tool-tip.
<div title="Professions">
<asp:Dropdownlist runat="server" ID="ddlProfession" DataValueField="ProfessionName" DataTextField="ProfessionName" Width="260px">
</asp:Dropdownlist>
</div>
But I don't want to add any extra div or any other container. directly i want the drop-down to show the tool tip.even it is fine, if you can guide me how to add title attribute for input tag of asp drop-down list which comes after rendering.
It should work:-
<asp:Dropdownlist runat="server" ID="ddlProfession" DataValueField="ProfessionName"
DataTextField="ProfessionName" Width="260px" ToolTip="Some Text">
</asp:Dropdownlist>
Please note it will render Html select with title attribute as Some Text. So you don't need any extra div.
<asp:ListBox
ID="ddlPA"
ClientIDMode="Static"
runat="server"
AutoPostBack="true"
SkinID="x"
CssClass="ListBoxCssClass"
SelectionMode="Multiple"
OnSelectedIndexChanged="ddlPA_SelectedIndexChanged">
</asp:ListBox>
When i select an item in asp:listbox , the selected item color changes to gray, i want to change the color to blue.
how can i do the same?
Recently searched for this and never found a reasonable solution so I created one with CSS only. I switched from a ListBox to a CheckBoxList and hid the checkbox.
In this example to keep it simple I just made the checkbox invisible for all items (option in CSS), and set the sibling text font-weight to 600 for the selected item (label in CSS) - you can CSS to your heart's desire once you have the selector setup correctly - background, pseudo :before image or border, etc. Keep in mind if you go with something before the item you can create spacing issues - I will include a CSS sample (after the first sample) for the "not checked" items so you can add padding/margin to make up for this offset. Lots of ways to do this but this will get you there until you feel like exploring other options.
ASPX:
<asp:CheckBoxList ID="chkList" CssClass="someclassname" runat="server" </asp:CheckBoxList>
CSS:
.someclassname input {display: none;}
.someclasssname input:checked + label {font-weight: 600;}
Personally I prefer line breaks and indents for CSS but easier reading here without.
Here is a CSS selector for the other non-checked items.
CSS:
.someclass input:not(:checked) + label {font-weight: 400;}
Again, we are hiding the checkbox and then formatting the text to the right of the checkbox. One additional nice feature here is that now a user can select multiple items with a touch based input device - no need for a ctrl or space key.
Also, unlike the ListBox, the CheckBoxList does not allow you to restrict the user to one selection. If you need this behavior then you can switch to a RadioButtonList.
You can set background colors from the .aspx page by specifying either the CssClass, or the BackColor property.. it looks like:
<asp:ListBox CssClass="MyListBox" BackColor="#e0e0e0"></asp:ListBox>
Setting the selected item is a little trickier... I don't believe there is an attribute for this directly. You can set it in javascript, or jQuery, something like:
<script type="text/javascript">
$(document).ready(function() {
$('#MyListBox').click(function() {
$("#MyListBox option:selected").css("background-color", "#e0e0e0");
});
});
</script>
I have a PlaceHolder component in my project, but I want to place it in right part of the page, as now it's placed in the top. Is there any opportunity to change it's alighn?
<asp:PlaceHolder ID="PlaceHolder1" runat="server" Visible="true">
<dx:ReportParametersPanel ID="reportParameterPanel1" runat="server" ReportViewerID="ReportViewer1">
</dx:ReportParametersPanel>
</asp:PlaceHolder>
I think you should enclose the entire Place Holder code in a Div and set the Style of the Div to Float:Right.
For more controlled positioning of the Div, use:
Position:Absolute;
work on C# asp.net vs 05. I have a requirment, I have to fill text box with some data on gridview , which is coming from database and make it read-only
After that user can not enter any text on gridview template field. If I set textbox Enabled=false, then i lose text color, but i want to show text color. Just textbox to not be editable. I just want users to not be able to write anything in my textbox.
Isn't there a readonly property for the text box.
If then you can use
ReadOnly="true"
for the text box.
If you can use a label then I would prefer that one.
For wrapping contents inside a label you can use
word-wrap
word-wrap: break-word
Inside the properties choose your column field and in the properties.
Under Styles section
You can give a CssClass to the column.
If you specify CssClass as 'TextStyle'
the css looks like this
.TextStyle
{
color: #a9a9a9
}
In the color attribute give either the color name like 'red' or the hexcode like '#000000' for the text.
Enabled="false"
I'd use CSS to make a label look like a textbox.
Why does everyone insist on using an asp:label for this sort of thing? Just because it renders a <span> if you don't supply an AssociatedControlId?
You should look at using an asp:Panel or possibly an asp:Literal or asp:PlaceHolder for this as they will give you greater control over the output, and cleaner markup.
Panel would be better, as this will render the contents in a <div> rather than the PlaceHolder or Literal which won't add any extra markup.
The content you are putting in here is a semantic division, and so should really be marked up as such, and by default, <div>s are treated as a block display type, rather than as inline (<span>).
Here's a quick proof of concept I just knocked up.
<head runat="server">
<style>
.readTest
{
border: none;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox runat="server" Text="Do something" ReadOnly="true"
ID="txtOne" CssClass="readTest"></asp:TextBox>
</div>
</form>
</body>
</html>
Personally I would use a label, though you could write a custom control that renders a textbox or a label, depending on the state your app is in.
I'd prefer to write the text directly to the cell using a literal or String() output rather than using a control. It's a bit cleaner and will help minimize the amount of ViewState being written. Either that, or turn off ViewState for those controls being added.
Specify your CSS for the TextBox in the row created event of the GridView.
I have an ASP:Label control on my page, and I would like to give it some CSS formatting. I know I could give it a CssClass name, however, it seems wrong because I want to give it a specific positioning therefore I'm looking for something more similar to the regular "id" attribute of html elements.
The ID of the label is the one used by the ASP, but in the actual html produced, I get a different ID.
Any suggestions?
Thanks.
The next version of ASP.Net will make it easier to specify an exact clientID for the control. At the moment, you have several options to work around this issue:
Inline Styles
<asp:Label runat="server" ID="MyLabel" style="..." />
CssClass
Just use a css class, as you mentioned in your quesiton. Nothing stops you from making those unique if you have to.
Write a handler to serve your style sheet
When you write your style sheet, leave placeholder in the file for client IDs. Then use an http handler to substitute in the actual rendered IDs on each request. This isn't exactly simple because the style sheet request is separate from the html page request, but it is certainly possible and so worth mentioning.
Use a container
Since a label renders as a span tag, if that span is unique within a specific naming container you can select it that way:
<div id="MyContainer"><asp:Label ID="MyLable" runat="server" /></div>
And in your style sheet:
#MyContainer span { /*...*/ }
Use a container + a class
If the container is not specific enough, you can use the class just to narrow it down within that container:
<div id="MyContainer"><asp:Label ID="MyLable" runat="server" CssClass="MyClass"/></div>
and in your style sheet:
#MyContainer span.MyClass { /*...*/ }
ASP.net essentially breaks the CSS ID selector. To get around this sometimes I will place this id in the CssClass attribute.
<style type="text/css">
input.first-name { /* style me */ }
</style>
<asp:TextBox runat="server" ID="firstName" CssClass="first-name" />
You can also add multiple class names in the CssClass attribute
<style type="text/css">
input.first-name { /* style me */ }
input.text-input { /* because ie 6 won't do input[type=text] */ }
</style>
<asp:TextBox runat="server" ID="firstName" CssClass="first-name text-input" />
I try as much as possible to not use inline style or to use the additional styling attributes provided by the controls.
Your only options are to use CssClass or inline styles. As ASP.NET auto-generates the ID's of server side controls you should never try to second guess what these will be. It can be a major pain getting Webforms to work with elegant CSS layouts.
ASP.NET 4.0 will introduce the ClientID property that should make it easier to work with ID attributes in the future.
I think you can do something like:
<asp:Label ID+"lblID" style=" [whatever style you want goes in here "] runat="server />
Remember when the control gets rendered, it gets rendered as with the ctrl.etc....
Or if you are doing positioning, can't you wrap the label in a <div>
Yeah - a major headache with web forms - the id is made up of all the contentsections, panels etc that the label (or other control) sits within.
your best bet really is to add a CssClass to the control.