My ASPX code is:
<span>
<igsch:WebDateChooser ID="ContractPeriod2Start" runat="server"
NullDateLabel="" Editable="True" EnableAppStyling="True">
</igsch:WebDateChooser>
<igsch:WebDateChooser ID="ContractPeriod2End" runat="server"
NullDateLabel="" Editable="True" EnableAppStyling="True">
</igsch:WebDateChooser>
<span>Remove</span>
</span>
I want it to render that top-level span all in the same line/row. However infragistics renders that out into a bunch of tables and divs, some greyed out in firebug
<span>
<input ... />
<input ... />
<table ... >...</table>
<div>...</div>
<input ... />
<input ... />
<table ... ></table>
<div ... ></div>
<span>Remove</span>
</span>
which renders out into 3 lines (one for each of two IG controls, one for my Remove span)
How do I make all this generated HTML into the same line?
Assuming the third party control has no way to control the output, the quickest idea I can come up with is to wrap everything in a table. You still would not be controlling the output of each individual control, but you would force the three elements into one line.
So, not pretty, but:
<table>
<tr>
<td><!-- First igsch control here --></td>
<td><!-- Second igsch control here --></td>
<td><span>Remove</span></td>
</tr>
</table>
There is probably some way to write an adapter to generate different html, such as the CSS Friendly Control Adapters, but that would take a much greater effort.
Related
Is there a simple way to do this? I have a checkbox and some text defined like so in an aspx file:
<div id="div01" class="someClass" runat="server">
<asp:CheckBox ID="chkBox01" Checked="True" runat="server" />
<asp:Label ID="lblSomeText" runat="server" Text="" meta:resourcekey="lblSomeText1"></asp:Label>
</div>
..the problem is that when rendered we have a checkbox and a span, and when the label's text is long enough the checkbox appears above the label, rather than at the left. The resulting html structure looks like:
<div>
<input type="checkbox"></input>
<span>some fairly long text</span>
</div>
I'd like to force that checkbox to be on the same line as the label no matter the text length. I can do this in html easily enough but is there a way to ensure it when coding the web components? I'm not a CSS pro and have tried some float:left and float:right stuff to no avail.
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 was wondering why the following code:
<asp:ComboBox ID="DropDown1" runat="server" Width="30px" AutoCompleteMode=None
AutoPostBack=false DropDownStyle=DropDown EnableViewState="True">
</asp:ComboBox> <asp:Literal ID="myid1" runat="server" Text="Days"></asp:Literal>
produces the combobox with label "Days" to the right off of it in IE9 and FireFox but when I run it using Chrome the "Days" label appears below the combo box?
How do I make it to be drawn to the right off the combo box like the rest of the browsers?
First up the Combo Box is not part of the "Standard" asp.net controls. I'm assuming you are using the asp.net AJAX Toolkit for this. As the Combo box is a compound control it does not render "Clean HTML" eg:
<select id="DropDown1"></select> Days
Instead it renders:
<div id="DropDown1" style="display:inline-block;">
<table id="DropDown1_Table"
class="ajax__combobox_inputcontainer"
cellspacing="0"
cellpadding="0"
border="0"
style="display:inline-block;border-width:0px;border-style:None;border-collapse:collapse;position:relative;top:5px;">
<tr>
<td class="ajax__combobox_textboxcontainer">
<input name="DropDown1$TextBox"
type="text"
id="DropDown1_TextBox"
autocomplete="off"
style="width:30px;" />
</td>
<td class="ajax__combobox_buttoncontainer">
<button id="DropDown1_Button"
type="button"
style="visibility:hidden;"></button>
</td>
</tr>
</table>
<input type="hidden"
name="DropDown1$HiddenField"
id="DropDown1_HiddenField"
value="-1" />
</div> Days
Which for me in chrome 14 displays with the Days in the same line as the drop down.
The thing to note is the div wrapping up the combo box control. Either the version on chrome you are using is ignoring the display:inline-block; style or you have some CSS somewhere that is somehow overriding this.
Maybe look at using the standard controls and use jQuery and page methods to roll your own combo box, or better still look at FlexBox.
Which version of chrome on which OS is causing the issue?
If you don't need AJAX functionality just use the standard ASP:Dropdown control.
UPDATE:
Using Microsoft's Combo Box Sample page reproduces your issue in Chrome. Looking at the rendered code it is different in IE and Chrome. This leads me to believe I have a different version of the tool kit to yourself and Microsoft (probably older!)
IE uses display:inline-block while chrome renders display:inline which would be causing the display anomaly.
To work around the issue with the version of the toolkit you are using, I would try the following:
<div style="display:inline-block">
<asp:ComboBox ID="DropDown1" runat="server" Width="30px" AutoCompleteMode=None AutoPostBack=false DropDownStyle=DropDown EnableViewState="True">
</asp:ComboBox>
</div>
<asp:Literal ID="myid1" runat="server" Text="Days"></asp:Literal>
I guess no one gets the "correct answer" check for this one.
Here's how I was able to "patch it" -- again, good ol' table came to rescue...
<table width="100%" border=0 cellpadding=0 cellspacing=0>
<tr>
<td valign="bottom" width="1%"><asp:ComboBox ID="DropDown1" runat="server" Width="30px" AutoCompleteMode=None AutoPostBack=false DropDownStyle=DropDown EnableViewState="True"></asp:ComboBox></td>
<td valign="bottom" width="99%"> <asp:Literal ID="myid1" runat="server" Text="Days"></asp:Literal></td>
</tr>
</table>
On the side note, I don't know guys how you can use that ASP.NET & VS2010. Both are such a headache and I'm so glad that my short stint with it is over!!!
"why do I need to wrap attributes into quotes"
Yes, you do need to pick up a good book on HTML / CSS and study it.
I am facing a bizzare issue. The asp:Buttons are creating div tags and are aligning vertically but not horizontally. I want them to align horizontally or in css way "inline". can anyone suggest a work around to this one. or can you tell me what I need to do get things working. All other asp buttons are aligning inline in the page except of these three.
The alignment issue is in IE 7-9.
Things look good in Chrome and Firefox
This is the markup in asp:
<td class="FieldsetButtons" align="right">
<asp:Button id="y" runat="server" Width="100px" Text="Apply"
Enabled="False" onclick="y_Click" ValidationGroup="mail"
meta:resourcekey="yResource1"></asp:Button>
<asp:Button id="p" runat="server" Width="100px" Text="Verify"
ENABLED="False" onclick="p_Click" ValidationGroup="mail"
meta:resourcekey="pResource1"></asp:Button>
<asp:Button id="l" runat="server" Width="100px" Text="Reset"
CausesValidation="false" onclick="l_Click"
meta:resourcekey="lResource1"></asp:Button>
</td>
This is the markup that is being created in HTML:
<div id="ctl00_ctl00_ContentPlaceHolder1_lServer1_yPanel">
<input type="submit" name="ctl00$ContentPlaceHolder1$lServer1$y" value="#Apply#" id="ctl00_ContentPlaceHolder1_lServer1_y" disabled="disabled" style="width:100px;" />
</div>
<div id="ctl00_ctl00_ContentPlaceHolder1_lServer1_pPanel">
<input type="submit" name="ctl00$ContentPlaceHolder1$lServer1$p" value="#Verify#" id="ctl00_ContentPlaceHolder1_lServer1_p" disabled="disabled" style="width:100px;" />
</div>
<div id="ctl00_ctl00_ContentPlaceHolder1_lServer1_lPanel">
<input type="submit" name="ctl00$ContentPlaceHolder1$lServer1$l" value="#Reset#" id="ctl00_ContentPlaceHolder1_lServer1_l" style="width:100px;" />
</div>
Float them all to the left or right.
Add this to your style sheet:
.FieldsetButtons div {float:right;width:100px;}
That will make all child divs align horizontally right and should be browser friendly.
What does your style class FieldsetButtons contain? My guess is that something in your CSS is messing it up. Maybe consider using Firebug to determine what style is affecting the layout of those buttons.
you could use table inside and create a single row in it with 3 columns...
`
`
I'm thinking that the meta:resourcekey tags are generating the divs to be able to apply styling from the resource file, but i have not tested this theory. Have you tried a test without the meta:resourcekey tags to see if the divs go away?
I am using asp.net and C#.
I have a image and three line. Which I want to place like this
Like the one you can see in this below URL .
http://www.campaignmonitor.com/gallery/
Image is on the left side and parallel to image we can write text.
I know that the same can be acheived by HTML table / ASP.NET table like this
<table>
<tr>
<td>
<img src="#"/>
</td>
<td>
first line <br />
second line <br/>
third line <br />
</td>
</tr>
</table>
but my problem is that I can't use table, so please let me know how can i acheive the above task without using tables.
Might be <span> or <div> tag can do the trick. but I am really dumb in html. and I can't ever search the exact answer to my problem on google..
Using CSS, you can float the image to the left, which will cause the text to appear to the image's right.
For example, take the following:
<html>
<head><title>Example</title></head>
<body>
<div style="float:left"> <!-- I've floated the div containing the image to the left -->
<img src="http://www.google.com/images/srpr/nav_logo13.png">
</div>
This is text that is to the right of the image.
</body>
</html>