I have a simple asp.net web page that contain a table with about 5 TR and each row have 2 TD .. in the page load I get user data ( 5 property ) and view them in this page the following are first 2 rows :
<table>
<tr>
<td>
FullName
</td>
<td>
<span id="fullNameSpan" runat="server"></span>
</td>
</tr>
<tr>
<td>
Username
</td>
<td>
<span id="userNameSpan" runat="server"></span>
</td>
</tr>
</table>
I always used <asp:Label to set value by code but i always notice that label converted in runtime to span so i decided to user span by making him runat=server to be accessed by code, so
Which is better to use asp:label or span with runat=server ??
The answer is: Whatever works best for you.
asp controls have a different object model from html controls. There is no databinding for html controls, for instance.
EDIT:
Something to consider is whether or not you need a span element at all. Span is an html element used for inline items, and canoot hold ceratin kinds of other items (such as block items). If your html markup make sense to semantically include a span (such as you want to style the text in a specific way) then use it.
Unless you need to control attributes on the span tag, it would be better to do something like this though:
<span class="foo"><asp:Literal id="litFoo" runat="server" /></span>
You should only make an element runat="server" if you need to specifically modify the tag itself (not necessarily just it's contents). For instance, if you need to hide the span at runtime, then you make the span runat="server" so you can access it's Visible property at runtime. Otherwise, it should be left as standard html.
If all your doing is displaying something then your better off using a literal tag which add's no extra markup. Infact 99% of the time literal should be used over label.
Edit: The performance between label/span would be so tiny, if any difference between them at all, that the only reason you would be worrying about that sort of performance was if you were facebook.
Related
How do I select the radio from a list of tr's where the only unique element is 'Some unique value'?
<tr>
<td>
<input type="radio" name="myradioname" value="4" onclick="myevent">
</td>
<td>
Some value
</td>
<td>Some unique value</td>
</tr>
While this cannot be done using pure CSS, it can be achieved using jQuery's :contains selector..
Working jsFiddle
The selector you're looking for is:
$("tr:contains('Some unique value')").find('input[type="radio"]')
First you look for a <tr> that contains 'Some unique value', then you find input[type="radio"] within it.
Works like a charm. In the jsFiddle only the radio near 'Some unique value' gets checked on page load using this selector.
Notes:
There are other ways you can go about it, for e.g finding the <td> that contains 'Some unique value' then looking for the <input> inside its siblings.. However I think the way presented here is most efficient.
If you can select the table first and search only the rows inside it do it, for it will run faster.. e.g: $("#myTable tr:contains('Some unique value')").find('input[type="radio"]').
If you still want to do it using CSS alone I would recommend viewing your server side code and using a conditional statement for adding a class to that specific <tr> for example class="special" then adding a CSS rule like so: .special input[type="radio"]{...}
All example skins I've seen use <div id="SomethingSomethingPane" runat="server"></div>. Is it possible to use something other than a div? Ideally I'd like to use something that doesn't require additional HTML mark up, such as an <asp:Literal> tag.
You have four methods at your disposal for creating Panes in a DNN Skin, as of DNN 5
TD
<table>
<tr>
<td id="ContentPane" runat="server"></td>
</tr>
</table>
DIV
<div id="ContentPane" runat="server" />
SPAN
<span id="ContentPane" runat="server" />
P
<p id="ContentPane" runat="server" />
If you need to remove the tag altogether, have some jquery run upon page load that strips that tag (select by ID), although an empty span is pretty harmless in most cases.
References
Page 468 of this book - div, span, td
DNN Source - p, search for "//load the skin panes"
Yes. You can use something other than a div such as a span.
I try to set two control in a td.
1. use a panel. as follow.
<td style="display: inline;">
<asp:Panel ID="pContainer" runat="server" Wrap="false">
<telerik:RadTextBox ID="rtxtBookingID" runat="server"></telerik:RadTextBox>
<asp:RequiredFieldValidator ID="rfvBookingID"
runat="server" ControlToValidate="rtxtBookingID" ErrorMessage="|Booking ID"
Display="Dynamic"></asp:RequiredFieldValidator>
<telerik:RadButton ID="rbtnOpen" runat="server" Text="Browse" OnClientClicked="openViewWindow()"/>
</asp:Panel>
</td>
how to solve the problem.
if I use two td to place the two control . but the first control in the td will gernerate a div. so the two control distance is far?
As long as it works and you get ok behaviour you are fine and for layout issues you should use css. The way you place the controls on the page also depends on overall page design and structure, keep in mind that usage of tables to control layout is not promoted anymore and you should use divs and css whenever possible... again depending on whole page design of course.
I have a lot of code that I am reworking in which a single item is wrapped in a div block with a single linked cssstyle. There doesn't seem to be any real difference between wrapping the .Net object in the div and applying the style with the "cssstyle" property. Is there any real difference?
<div class="grid_1">
<asp:FormView ID="FormView8" runat="server" DataSourceID="odsInst">
<ItemTemplate>
<asp:LinkButton ID="LinkButton1" runat="server" ToolTip='<%# Eval("TestScoresPageNrStudents")%>'>(?)</asp:LinkButton>
</ItemTemplate>
</asp:FormView>
</div>
vs
<asp:FormView ID="FormView8" runat="server" DataSourceID="odsInst" CssClass="grid_1">
<ItemTemplate>
<asp:LinkButton ID="LinkButton1" runat="server" ToolTip='<%# Eval("TestScoresPageNrStudents")%>'>(?)</asp:LinkButton>
</ItemTemplate>
</asp:FormView>
The difference would be in the first case, it would render:
<div class="grid_1">
<table>...</table>
</div>
versus:
<table class="grid_1">...</table>
This would have an impact on how you would be able to design your css. My thought is that the first case (the <div>) would be preferable since it would gain more flexibility in designing your css classes -- mainly, you would not be restricted to being solely within a table. Of course, if the grid_1 class is solely for styling tabular data, then the second case would be fine.
It depends on what you need, but basically I guess you should be OK with the second approach since the ASP.NET controls will render some HTML element with the class attribute set to what you specified in CssClass="...".
I think it's best if you look at the HTML code rendered by the ASP.NET controls and if that's OK for you, then you can use the second approach (CssClass="...").
On the other hand, some controls might not exactly render the HTML code you need. E.g. the GridView probably renders a TABLE - if for some reason you really need a DIV element, then you'll have to wrap it as shown in approach one.
If you're keeping this a single item, no. However keep in mind, CSS priority is based on nested levels.
The lower the CSS is applied, the higher the priority it takes over other style classes.
Also, if you add more elements within this div, they will be effected if you keep the style on the container div.
In the first case, the "grid_1" class attribute is applied to the container tag.
In the second case, the "grid_1" class attribute is applied to the main tag of the asp:FormView control.
It is possible to define custom CSS rules for different tags, whose class equals "grid_1"
Is there a way I can limit the width of a textbox to be equal to the MaxLength property? In my case right now, the textbox control is placed in a table cell as in this snippet:
<td class=TDSmallerBold style="width:90%">
<asp:textbox id="txtTitle" runat="server"
CausesValidation="true"
Text="Type a title here..be concise but descriptive. Include price."
ToolTip="Describe the item with a short pithy title (most important keywords first). Include the price. The title you provide here will be the primary text found by search engines that index Zipeee content."
MaxLength="60"
Width="100%">
</asp:textbox>
(I know I should not use HTML tables to control layout..another subject for sure) but is there a way to constrain the actual width to the max number of characters allowed in the typed box?
You could set it from code (called in your Page_Load) as such:
txtTitle.Width = new Unit(txtTitle.MaxLength, UnitType.Em);
Our system is database driven and we have a meta data table that stores a length property for each variable. I personally used the meta data by iterating over the ControlCollection and for each TextBox item, pulling the length of the variable's meta data and then assigning it to MaxLength and to Width though if you already have MaxLength set, you could have it do Widths in this manner.
It won't be precise, because characters can vary in width. But if you were really serious about this, you could do it with a bit of Javascript (jQuery). The steps would be:
Create a span offscreen (top:-1000px or something)
Make sure the span has the same styles/classes as your text box
Fill the span with 60 characters
Use jQuery to measure the width of the span
Apply that width to the text box
It's a technique similar to the auto-expanding textareas you see on Facebook and such: http://james.padolsey.com/javascript/jquery-plugin-autoresize/
(In this case, you are doing it horizontally instead of vertically.)
If you need real code, let me know, I'll do my best.
I use the HTML property cols
So for your example I would use
<td class=TDSmallerBold style="width:90%">
<asp:textbox id="txtTitle" runat="server"
CausesValidation="true"
Text="Type a title here..be concise but descriptive. Include price."
ToolTip="Blah Blah I don't like horizotal scroll-bars"
MaxLength="60"
Width="100%"
Cols="60"
>
</asp:textbox>
I have never tried this but i wonder if there is a way to tie both together. So setting MaxLength also sets to cols, would be an interesting exercise
I realise that this is a old question, but for those people who come across it looking for how to style text boxes based on the MaxLength attribute I use the following CSS:
input[maxlength='2'] { width: 40px;}
If you have lots of text boxes with different MaxLengths, then this probably isn't going to be the solution for you. However if you want the presentation of a text box to match what is to be input into it, I think it's a good solution.
$(':input[maxlength]').each(function (i, e) {$(e).width(e.maxLength * 10)});
This is making an assumption that characters are roughly 10px. It works quite well for my needs.
I realise this is a very old post - here's my answer for future reference for others!
Use the Style property to set width to 100% instead of the width property on its own.
e.g.
<td class=TDSmallerBold style="width:90%">
<asp:textbox id="txtTitle" runat="server"
CausesValidation="true"
Text="Type a title here..be concise but descriptive. Include price."
ToolTip="Blah Blah I don't like horizontal scroll-bars"
MaxLength="60"
Style="Width: 100%"
>
</asp:textbox>
This is tried and tested in a production environment I work on. It's simpler than using Javascript and works in the existing HTML.
As to exactly why this works, unfortunately I am short of knowledge.