Put component next to User Control - asp.net

I have a table in which I put a User Control in one row. I would like to put something to its right (like divide the td in two)
<table id="table1" cellspacing="0" cellpadding="0" width="100%" border="0">
<tr valign="top">
<td>
<div>
<uc3:Quicksportselection ID="QuickSportSelection1" runat="server"></uc3:Quicksportselection>
</div>
<div class="sBody">
<hr />
<asp:RadioButtonList runat="server" ID="SponsorListRad" RepeatDirection="Vertical" RepeatLayout="Flow" CssClass="labels">
<asp:ListItem Text="Eurosport" Value="Eurosport"></asp:ListItem>
<asp:ListItem Text="Discovery" Value="Discovery"></asp:ListItem>
</asp:RadioButtonList>
</div>
</td>
</tr>
</table>
Doing such thing will put my 'SponsorListRad' UNDER the UserControl. How can I put it next to it on the right?

The <hr> tag defines a thematic break in an HTML page and it's used to separate content and in this case - should be delete.

Related

target panel of CollapsiblePanelExtender not visible on load, need to collapse then expand to see it

I have inherited an app that has a CollapsiblePanelExtender. The codebehind populates the control that's inside the panel when it loads. I set the CollapsiblePanelExtender to be expanded in the codebehind, but the target panel isn't visible, even though the CollapsiblePanelExtender is expanded.
If I then collapse the CollapsiblePanelExtender, and then expand it again, the panel shows up. The html is there, but it isn't showing.
Any clues would be appreciated, thanks.
<div class="contentBoxTitle">
<asp:Panel ID="expandCTL" runat="server" Width="100%">
<asp:Image ID="expandIMG" ImageUrl="~/images/itemOpen.gif" runat="server" />
Client
</asp:Panel>
</div>
<asp:Panel ID="profilePanel1" runat="server" >
<div class="profileTable">
<table width="350" border="0" cellpadding="2" cellspacing="0">
<tr bgcolor="ffffff">
<th width="100" height="20" bgcolor="ffffff"><div align="right">Name:</div></th>
<td>
<asp:Label ID="name" runat="server" Text=""></asp:Label> </td>
</tr>
...
(more fields here)
...
</table>
</div>
</asp:Panel>
</div>
<ajaxToolkit:CollapsiblePanelExtender runat="server" TargetControlID="profilePanel1" CollapsedSize ="1" ID="profilePanelCollapser"
ExpandDirection="Vertical" ImageControlID="expandIMG" ExpandedImage="~/images/itemOpen.gif"
CollapsedImage="~/images/itemClosed.gif" Collapsed="false" ExpandControlID="expandCTL" CollapseControlID="expandCTL" />

How can you remove the table-tags in CreateUserWizard control

How can I use the CreateUserWizard control without having it render html tables?
I've customized the layout of the CreateUserWizard, and I'm using css to style it. My button is too far away from my form, due to the <table> tags asp.net is rendering by default.
<table cellspacing="0" cellpadding="0" id="cphContent_CreateUserWizard1" style="border-collapse: collapse; ">
<tbody>
<tr style="height: 100%; ">
<td>
<table cellspacing="0" cellpadding="0" style="height: 100%; width: 100%; border-collapse: collapse; ">
<tbody>
<tr>
<td style="height: 100%; width: 100%; ">
<fieldset>
...
</fieldset>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
The CreateUserWizard doesn't have the RenderOuterTable property, but you can remove the table by using a LayoutTemplate and PlaceHolders (just like the ListView control).
This is an example:
<asp:CreateUserWizard runat="server" ActiveStepIndex="1">
<LayoutTemplate>
<asp:PlaceHolder ID="WizardStepPlaceHolder" runat="server" />
<asp:PlaceHolder ID="navigationPlaceHolder" runat="server" />
</LayoutTemplate>
<HeaderTemplate>
Header
</HeaderTemplate>
<StepNavigationTemplate>
<asp:LinkButton runat="server" CausesValidation="False" CommandName="MovePrevious" Text="Previous" ID="StepPreviousButton">Previous</asp:LinkButton>
<asp:LinkButton ID="NextLinkButton" runat="server" CommandName="MoveNext">Next</asp:LinkButton>
</StepNavigationTemplate>
<WizardSteps>
<asp:CreateUserWizardStep runat="server">
<ContentTemplate>
</ContentTemplate>
</asp:CreateUserWizardStep>
<asp:CompleteWizardStep runat="server">
<ContentTemplate>
</ContentTemplate>
</asp:CreateUserWizardStep>
</WizardSteps>
</asp:CreateUserWizard>
You can do this from design view and have visual studio generate the markup into template you can modify. In design view, click on the createUserWizard control, click on the angle bracket (>) at the top-right corner, then click Customize Create User Step. Switch to code and edit the markup to taste!!
You simply can not remove the table-tag from the control because the control is formatted this way.

asp.net ajax doesn't keep textarea values in async postback

I have a dialog popup with a textearea, two listboxes and one button. By selecting a value in the first listbox and pressing the button ">" the selected value is passed to the second listbox. This is done with asp.net ajax.
<td>
<div align="center">
<textarea style="height:50px; overflow:hidden;";rows="20"
cols="40"
id="editor1"
class="tinymce">
</textarea>
</div>
</td>
I put the 2 listboxes and the button between asp.net uploadpanel. Like this:
<td>
<asp:UpdatePanel runat="server" id="updatePanel1">
<ContentTemplate>
<table width="100%" align="left">
<tr>
<td colspan="5">
<hr align="left" style="width:95%" />
</td>
</tr>
<tr>
<td valign="top">
<cc1:SWCListBox
ID="SWCListBox1"
runat="server"
Width="100"
SelectionMode="Single"
CssClass="VW1">
</cc1:SWCListBox>
</td>
<td
valign="top"
width="50"
align="center">
<cc1:SWCButton
Text=" > "
ID="SWCBtnAddValue"
CssClass="VW1 VWButton"
runat="server"
ToolTip="Add to list"
OnClick="AddValue_Click"
CausesValidation="false"
/>
<td valign="top">
<cc1:SWCListBox
id="SWCListBox2"
CssClass="VW1"
runat="server"
Width="100"
SelectionMode="Single"
/>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
The probles is that when I type something in the textarea and make an async postback the text typed fades.
How can I keep the textarea value within async postbacks?
thank you.
This problem is because you use UpdatePanel, and the textarea is not an asp.net control. You have two solutions.
1) Make it asp.net control by placing the run="server" (or)
2) Place the post back value manually as:
<div align="center">
<textarea style="height:50px; overflow:hidden;";rows="20"
cols="40"
id="editor1"
name="editor_1"
class="tinymce">
<asp:Literal runat="server" id="txtEditor1" />
</textarea>
</div>
and on code behind
txtEditor1.Text = Server.HtmlEncode(Request.Form["editor_1"].ToString());
(because you use UpdatePanel its important to use Literal to add this value and not use <%=%>, or else its throw an error.

How to remove the effect of all the parent containers on any child control

Q:
I have the following problem , I use RadDatePicker in a table td and i have more than container(div).the problem is the (next and previous navigation text is reversed).
I mean >> instead of << and > instead of < and vice versa.i tried to set the properties related to this issue but in vain .some parent container effect reverse any thing.
When i take the control out of any container every thing goes okay . What i wanna is to remove any effect of the containers' CSS on my date picker.Because i don't know which property exactly make this strange effect.
My source code:
<div class="toggle_container">
<div class="block">
<h4 align="right" dir="rtl">
:</h4>
<hr style="width: 745px;" align="right" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div id="masterDiv" align="center" style="width: 800px">
<div id="masterControls" style="text-align: center; width: 780px;">
<table align="center" cellpadding="3" cellspacing="1" width="98%" dir="rtl">
<tr bgcolor="#f1ece2">
<th colspan="3" align="right" valign="middle">
</th>
</tr>
<%-- more markup --%>
<tr bgcolor="#f1ece2">
<td align="right" class="title" colspan="2" style="text-align: center" width="40%">
الفترة (من):
</td>
<td align="right">
<telerik:RadDatePicker ID="rad_dateFrom" runat="server" Culture="Arabic (Egypt)"
Skin="Web20">
</telerik:RadDatePicker>
</td>
</tr>
<tr bgcolor="#f1ece2">
<td align="right" class="title" colspan="2" style="text-align: center" width="40%">
الفترة (الى):
</td>
<td align="right">
<telerik:RadDatePicker ID="rad_dateTo" runat="server" Culture="Arabic (Egypt)" Skin="Web20">
<Calendar Skin="Web20" UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False"
ViewSelectorText="x">
</Calendar>
<DatePopupButton HoverImageUrl="" ImageUrl="" />
</telerik:RadDatePicker>
</td>
</tr>
<%-- more markup --%>
</table>
</div>
</div>
</ContentTemplate>
<Triggers>
</Triggers>
</asp:UpdatePanel>
</div>
</div>
From Firebug:
<a id="ctl00_ContentPlaceHolder1_rad_dateFrom_calendar_FNN" class="rcFastNext" href="#" title=">>">>></a>
This is the fast next navigation and what has shown to me is << how to convert it to >>.
Thanks in advance.
Inspect the element in question and see what styles have been overwritten. It's hard to say more without live example. Just for the look of your code writing-mode comes to mind.
Thanks a lot. the answer is so simple. just the table direction is rtl.and this is the problem.

Simple jQuery task failing: hide child elements of <div> tag

There has to be a simple explanation for this.
I have a parent <div> tag containing a number of child divs that need to be hidden depending on their class. Problem is, I can't even seem to get a handle to my parent div. What on earth is the problem here? I'm going out of my gourd.
The jQuery code (snippet) looks like this:
$(function() {
$('#dasummary').children().hide();
The offending <div> section and all its content is as follows:
<asp:ListView ID="lvLedger" runat="server" DataSourceID="ldsLedger">
<LayoutTemplate>
<h2>Current Day Activity Summary</h2>
<div id="#dasummary">
<div id="itemPlaceholder" runat="server" />
</div>
</LayoutTemplate>
<ItemTemplate>
<div id="toggleRow" runat="server" class="group">
<asp:Image ID="imgToggle" runat="server"
ImageUrl="~/App_Themes/SunDIAL/images/maximize.png"
ImageAlign="Left" />
<%# Eval("Key") %> (<%# Eval("Count") %> entries)
</div>
<!-- Add nested ListView control for individual items here -->
<asp:ListView ID="lvItems" runat="server" DataSource='<%# Eval("Tasks") %>'>
<LayoutTemplate>
<div class="activity_summary">
<table>
<thead>
<tr>
<th class="first" />
<th>Day</th>
<th>Job</th>
<th>Batch</th>
<th>Duration</th>
</tr>
</thead>
<tbody>
<tr id="itemPlaceholder" runat="server" />
</tbody>
</table>
</div>
</LayoutTemplate>
<ItemTemplate>
<tr id="item" runat="server" class="itemRow">
<td class="first" />
<td>
<h4>
<a><%# Eval("Day") %></a>
</h4>
</td>
<td><%# Eval("Project") %></td>
<td><%# Eval("Name")%></td>
<td><%# Eval("Hours") %>:<%# Eval("Minutes","{0:00}") %></td>
</tr>
</ItemTemplate>
</asp:ListView>
</ItemTemplate>
</asp:ListView>
The rendered HTML looks (as far as I can see) just fine. Let me know if you want the whole thing; here's the important bit:
<div id="#dasummary">
<div id="ctl00_ContentPlaceHolder1_dashboardFrame_ctl00_ActiveDayLedger1_lvLedger_ctrl0_toggleRow" class="group">
<img id="ctl00_ContentPlaceHolder1_dashboardFrame_ctl00_ActiveDayLedger1_lvLedger_ctrl0_imgToggle" src="App_Themes/SunDIAL/images/maximize.png" align="left" style="border-width:0px;" />
Wednesday (2 entries)
</div>
<!-- Add nested ListView control for individual items here -->
<div class="activity_summary">
There has to be a reason I'm failing at such a simple operation. Can you spot it?
The id of your div is wrong. In the html it must be dasummary, not #dasummary, so you can grab it by jQuery with $("#dasummary")
"#" in jQuery selector means that jQuery should select elements by id. So, in your case there are two ways:
Use id without "#"
Change jQuery query to smth like "##dasummary". It should work.
That's right, you should have
<div id="dasummary">
Also, it might be needed to use the each function:
$("div", "#dasummary").each(function() {
$(this).hide();
});

Resources