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"
Related
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've just replaced Telerik controls in a small web project with DevExpress controls, but now, despite my adding an inline display div as container, these controls are no longer rendered inline. What could have caused this, and what can I do to get these errant controls back inline?
<div style="display: inline;">
<label>
Department:</label>
<dx:ASPxComboBox ID="deptCombo" runat="server" AutoPostBack="false" ValueField="DeptId" TextField="DeptName" Width="250px" OnSelectedIndexChanged="deptCombo_SelectedIndexChanged">
</dx:ASPxComboBox>
<label>
Production Date:</label>
<dx:ASPxDateEdit ID="productionDatePicker" runat="server" DisplayFormatString="{0:dd/MM/yyyy}" EditFormat="Custom" EditFormatString="dd/MM/yyyy"
ondatechanged="productionDatePicker_DateChanged">
</dx:ASPxDateEdit>
</div>
Sounds like the DevX controls have some CSS that you'll need to override.
For starters, I'd try adding the !important flag to the style:
<div style="display: inline !important;">
If that doesn't work, switch back to the RadControls. They are far superior :)
Almost all of DevExpress controls are rendered as tables. The main advantage of this approach is that this way provides good cross-browser capability, since when nested divs are used, it might be hard to synchronize their positions and sizes for all browsers. However, using tables allows end-users to get rid of this problem.
[CSS] add this line on your css
.DXControlsInline {display: inline-table;}
[ASPx] add CssClass="DXControlsInline" on controls you want to make inline
<dx:ASPxLabel ID="ckArboviralDiseaseChikungunyaOtherSpecify" runat="server" CssClass="DXControlsInline" Text="Specify:"></dx:ASPxLabel>
<dx:ASPxTextBox ID="tbArboviralDiseaseChikungunyaOther" CssClass="DXControlsInline" ClientInstanceName="tbArboviralDiseaseChikungunyaOther" runat="server" Width="350px"></dx:ASPxTextBox>
Source : http://www.theedgesearch.com/2016/04/how-to-arrange-devexpress-controls.html
The task is not directly related to our controls and can be implemented without them in a similar way. In the case of ASPxTextBox, define a CssClass property to it with the following rule:
<dx:ASPxTextBox ID="txt1" runat="server" Width="170px" CssClass="txtStyle"></dx:ASPxTextBox>
.txtStyle {
display: inline-block;
}
I've prepared a small sample to demonstrate how it works. See also CSS display Property.
UPDATED:
When a caption is specified for ASPxTextBox, it is rendered as a table. That is why the suggested approach does not work in this case. To resolve this issue, I suggest you place each text box in a div element and set the 'display' property for it. Let me know if this helps.
Source
<asp:DataList ID="ItemsList" RepeatDirection="Vertical" runat="server">
<ItemTemplate>
<asp:LinkButton
ID="SecondLevelItem" runat="server" CommandName="second"
OnCommand="SecondLevelItem_Onclick" CommandArgument="<%# Container.DataItem %>"
Text="<%# Container.DataItem %>" >
</asp:LinkButton>
</ItemTemplate>
</asp:DataList>
everything works fine. except that I do not have any control over the styling on the items. I mean I have the styling on the datalist externally but I want to add some spacing (vertically) between each item. How do I do tht? Thanks
In general, to control style, you can apply the <ItemStyle> tag inside the <asp:DataList>.
You can optionally inject CSS properties into the asp:LinkButton tag, either with the class attribute or directly with style, controlling the height or other CSS properties.
If it's applicable, you can still add a on the bottom of the template (but this will add a vertical space to the last item too, and I don't know if you want it).
Hope to have been of help.
In the code behind databound method for the list, you may be able to add a css class via the attributes collection.
In fact you may be able to that declartively too, just checking now...
eg asp:DataList id="blah" runat="server" ItemStyle-CssClass="someClass"
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.
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.