I have an ASP.NET website that is not passing the W3C XHTML validation.
It doesn't pass validation because I place <div> content into a <asp:Label>, and so the resulting markup looks like:
<span><div>stackoverflow</div></span> <!-- INVALID; DIV INSIDE SPAN -->
However, after replacing all my <asp:Label> with <asp:Literal>, I get errors that <asp:Literal> cannot be nested inside another <asp:Literal>.
I don't really understand how I'm suppose to be solving this, since <asp:Literal> sounds like it would have otherwise been exactly what I wanted.
Is the correct solution to use <asp:PlaceHolder>?
Try this solution
<div id="div" runat="server">
</div>
in code behind
div.InnerHtml = "<div>Example HTML</div>";
Duplicate, answered in: Using Panel or PlaceHolder
Short answer, an <asp:Panel> becomes a <div>, so you want something like
<asp:Panel>
<asp:Label .../>
</asp:Panel>
Related
I have one div as the following:
<div>
<% # IIF(DataBinder.Eval (Container.DataItem,"Specifiction2").ToString()<> "","")
<div>
I want to hide the above div when "spcefication2" is blank on a .aspx page.
How can I do it?
A couple of things.
You are using IIF, but IIF should never be used. Always use IF instead. The only reason to use IIF is you are stuck with a pre-2008 compiler, and even then, you should use something else.
The easiest way to do what you are describing is via an id and runat="server", you can then either set the visible property (which will mean that the div never gets emitted) or set the style to display:none
If you want to do it inline, per your example, the code is
<div style="display:
<%# IF(string.isnullorwhitespace(DataBinder.Eval(Container.DataItem,"Specifiction2").ToString), "none", "block") %>">
</div>
You are using Eval and container.dataitem, you should look into using ItemType For your grid/repeats, then referencing the value as item.Specification
The above would be much easier if you declared a function in your code behind, taking a string and returning the string none/block.
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"
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
I have the following HTML code:
<div style="background-image:url(~/Images/MyImage.jpg); width:100%; height:100%">
I'm not too familiar with HTML, but form all the articles I've seen, this should work fine. If I show the image in an asp.net image control then it shows fine. However, I want to put text on top of it. Can anyone tell me what I'm doing wrong, please?
By default, you cannot use the ~ in the paths of normal HTML elements. That would only be understood by ASP.NET, but your element is being treated as markup and simply sent to the browser without being processed by the server-side script.
You should either add an id attribute and the attribute runat="server" to your <div> so that it is recognized by ASP.NET, or else you would have to use a relative or absolute URL without the ~ in the path:
<div id="mydiv" style="background-image:url(~/Images/MyImage.jpg);" runat="server">
or
<div style="background-image:url(/Images/MyImage.jpg);">
Your div is not evaluated as a server control, thus the "~" char is not recognized as it should. Not 100% sure, but adding runat="server" should work...
<div style="background-image:url(~/Images/MyImage.jpg); width:100%; height:100%" runat="server">
In the case above whatever text you put between the <div ...> </div> would come over the background image.
Also as the runat = server tag is missing it won't even be touched by asp.net. So your url is also wrong by using ~.
I don't understand it.
The ids of html elements in the master page are changed by the same id but with a prefix and it's breaking the css design.
In the master page I have:
<div id="container" runat="server">
<asp:ContentPlaceHolder ...
...
The above code is rendered
<div id="ctl00_ctloo_container">
...
And the CSS styles are gone obviously.
How do I stop it?
Thanks!
WebForms should only rewrite the ID's of server controls (like <asp:ContentPlaceHolder />, not ordinary HTML element like <div id="container"> without runat="server"
You cannot prevent the framework from rewriting ID's on server controls. You can use class names instead, though.
AFAIK you cannot do this. This is the default behaviour because of the control tree.
If you would like to use CSS then set the CSS class directly, don't depend on IDs, like
<asp:Whatever runat="server" id="whatever" CssClass="whateverClass">
Update: Here is a similair thread, but it won't help on your CSS problem.
Do you need the runat="server" tag? If you do not do anything with the div element in your code-behind, remove it.
I do not need the runat="server" tag and have removed it. Don't know why it was there ... Ids are not changed now. Thanks