I have a usercontrol which I inset in to the page with the following code:
<table id="MainFrame" runat="server" style="border-style: solid; border-width: 0px 3px 3px 3px;table-layout :fixed; width :562px; text-align :center; background-color :White;" cellpadding ="0" cellspacing ="0">
<tr>
<td style="width:5px;"><div style="width:5px;height:10px"></div></td>
<td>
<div runat="server" id="divTextLink" style="padding-top: 10px;">
<Ligdol:TextLink ID="TextLink1" runat="server" Visible="False" />
</div>
</td>
</tr>
In the code-behind I have an if statment which sets the visibility to true.
I put a breakpoint on the line and it's hit, but the visibility does not change.
I tried adding to the td, but that doesn't help either.
If I put the control outside of the table, everything works as it should.
Edit: The usercontrol code
<%# Control Language="C#" AutoEventWireup="true" CodeFile="TextLinks.ascx.cs" Inherits="NewChannels_Controls_TextLinks" %>
<img style="float: right;" src="/Ligdol/Upload/textlinks.png" />
<asp:HyperLink runat="server" ID="txtLink"></asp:HyperLink>
Change this
<td>
<div runat="server" id="divTextLink" style="padding-top: 10px;">
<Ligdol:TextLink ID="TextLink1" runat="server" Visible="False" />
</div>
</td>
to this
<td style="padding-top: 10px;">
<Ligdol:TextLink ID="TextLink1" runat="server" Visible="False" />
</td>
I can't see no other reason to this not work.
Related
I have a link on update panel,when i clicked on Cure Loan,model extender pop up should come up but instead of one popup all the popup on the page is come up
so please give me the solution how to use update panel with model extender pop up
here is my code
<asp:UpdatePanel ID="UPCureLoan" runat="server">
<ContentTemplate>
<td style="border: 0.5px solid #000000; border-collapse: separate; height: 44px;" bgcolor="#CCCCCC">
<asp:Label ID="CFMessage" runat="server" Visible="False"></asp:Label>
<br />
<asp:LinkButton ID="LinkButton2" runat="server" OnClick="LinkButton2_Click">Cure Loan</asp:LinkButton>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="LinkButton2" EventName="click" />
</Triggers>
Panel->
<table style="width: 100%; background-color: #DDE2E5;">
<tr style="background-color: #522E8B; color: white; height: 50px">
<td colspan="4" style="text-align: center; font-size: medium"><b>Notification</b></td>
</tr>
<tr>
<td>
<br />
<br />
</td>
</tr>
<tr>
<td colspan="3" style="font-size: medium;"> I confirm that I have discussed the borrowers concerns with the borrower.<br />
Please enter your initials to confirm
<asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<br />
<br />
</td>
</tr>
<tr>
<td></td>
<td colspan="3" style="text-align: center">
<asp:CheckBox ID="CheckBox4" runat="server" Style="transform: scale(2) !important;" Height="20px" Width="20px" /><b> Resend Borrower Survey 1 </b></td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr style="text-align: center">
<td> </td>
<td>
<td>
<asp:Button ID="Button4" runat="server" Text="Close" Height="30px" Width="120px" />
<asp:Button ID="Button5" OnClick="popupConfirm1" runat="server" Text="Confirm" Height="30px" Width="120px" /></td>
</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<%-- <cc1:CalendarExtender ID="CalendarExtender2" TargetControlID="TXTDate" Format="MM/dd/yyyy" runat="server" />--%>
</asp:Panel>
Model extender Popup->
ID="Modalpopupextender5" runat="server"
PopupControlID="Panel5" TargetControlID="hidForModel"
BackgroundCssClass="gridView" OkControlID="ButtonSave">
</cc1:ModalPopupExtender>
You are not using the UpdatePanel control properly.
All you're doing there is placing some HTML code (which is incorrect) inside the ContentTemplate.
<ContentTemplate>
<%-- Where is your <table> etc? --%>
<td style="border: 0.5px solid #000000; border-collapse: separate; height: 44px;" bgcolor="#CCCCCC">
<asp:Label ID="CFMessage" runat="server" Visible="False"></asp:Label>
<br />
<asp:LinkButton ID="LinkButton2" runat="server" OnClick="LinkButton2_Click">Cure Loan</asp:LinkButton>
</ContentTemplate>
You also have your other code outside of the UpdatePanel.
All your code that has to be controlled by the Panel and the modalpopup, must be inside the UpdatePanel. BUT your ModalPopupExtender itself can be outside the UpdatePanel. In fact, it should if you're treating the UpdatePanel as a "popup box".
This is how I use UpdatePanels with AJAX:
Firstly set up your styles for the background, the panels and the popup itself.
<style type="text/css">
.pnlCIR
{
position: absolute; top: 20%; left: 22%; width: 400px; border: 3px solid LightSlateGray;
background-color: #E0E8F0; padding: 3px; font-family: Arial; font-size: small;
}
.modalBackground
{
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
position:fixed;
overflow:hidden;
}
</style>
Next define your AJAX popup:
<asp:Button ID="btnCIR" runat="server" Text="Suggest Improvement (CIR)" CausesValidation="false" />
<ajaxToolkit:ModalPopupExtender ID="mpeCIR" runat="server"
BackgroundCssClass="modalBackground"
PopupControlID="upCIR"
TargetControlID="btnCIR">
</ajaxToolkit:ModalPopupExtender>
Next define your UpdatePanel as a "wrapper" around your code that you want to be inside the panel (in my case the "CIR" panel)
<asp:UpdatePanel ID="upCIR" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="pnlCIR" runat="server" CssClass="pnlCIR" Width="700px">
<your code>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
Note:
You must use UpdateMode conditional
You must have a Panel inside the UpdatePanel, so that the Panel is the actual popup, and the UpdatePanel is the control that keeps postbacks inside the UpdatePanel, avoiding the dread "postback flash" on your entire screen.
I have a custom control, which has a Button + image, if image(down arrow) is clicked, a DIV should display, just like Dropdownlist.
However, its pushing the page contents to down to display the DIV. How to fix this.
It should just behave like dropdown
List should display on top of Button instead button
<table id="container" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<asp:Button ID="btnPost" runat="server" CssClass="postButton" OnClick="btnPost_Click" />
<asp:Button ID="btnDropDown" runat="server" CssClass="dropdownButton" OnClick="btnDropDown_Click" />
</td>
</tr>
<tr>
<td>
<div runat="server" id="divDropDownPanel" visible="false" style="text-align: left;
overflow: scroll; float: left; border: thin solid lightgrey; width: 160px; height: 120px;
background-color: #FFFFFF; position: absolute; z-index: 999;">
<asp:Repeater ID="rptDropDownContent" runat="server" OnItemDataBound="rptDropDownContent_ItemDataBound">
<HeaderTemplate>
<table>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td align="left">
<asp:CheckBox ID="chkChannel" runat="server" />
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</tr> </table>
</FooterTemplate>
</asp:Repeater>
<br />
</div>
</td>
</tr>
Here what I've done and whats my problem. First of all i got a big table with a lot of td the first td on top of my table containt anoter table and (here come my problem) theres a space under that little table and I don't know why.
Here's the code for my table:
<div runat="server" class="ReportPage" >
<table runat="server" class="ListReportBigTable" align="center">
<tr>
<td class="style13" colspan="3" >
<table width="46%" align="center"style="height:50%; "cellpadding="0">
<tr>
<td align="left">
<asp:Label ID="LB_ChooseReport" runat="server"
Text="Choisissez un dossier médical: " Font-Size="Small">
</asp:Label>
</td>
</tr>
<tr>
<td style="vertical-align:bottom" align="left">
<asp:UpdatePanel ID="UpdatePanel3" runat="server">
<ContentTemplate>
<div id="div_Filter" runat="server" visible="false" align="left">
<asp:Label ID="LBL_FilteredBy" runat="server" width="18%" Text="Patient : "
Font-Size="Small" style="margin-left: 0px"></asp:Label>
<asp:DropDownList ID="DDL_FilterSelect" runat="server" AutoPostBack="true"
Width="25%" CssClass="DDL_Filter" Font-Size="Small" Height="18px"></asp:DropDownList>
</div>
</ContentTemplate>
</asp:UpdatePanel></td></tr></table>
<br />
</td>
and here the CSS:
.ListReportBigTable
{
height:25%;
width:55%;
text-align:center;
vertical-align:middle;
border: thick solid black;
margin-left: 0px;
}
thx in advance
I don't know if it's a typo but you are closing with a </td> after your closing </table> tag. In addition you have a <br /> before the closing misplaced </td> which would obviously add space to the bottom.
Try changing the closing </td> to </table></div> and removing the <br />
In addition, in your CSS try adding margin-bottom: 0px; and padding-bottom: 0px; to see if this has an effect.
Also, what is after the table? Maybe whatever is being displayed after the table has it's own top margin/padding?
Do you have a link to the actual page where this is occuring so we can examine with Firebug or similar and try to figure it out?
I have a Ajax HTMLEditor in my web page inside a panel which is targeted by the collapsible panel extender.
When the panel is expanded, there is a big empty space without any of the controls inside the panel being displayed.
The issue here is the panel is expanded but there is nothing visible inside it including any buttons and the Html editor. When i scroll up and down though the controls sometimes become visible.
<cc1:CollapsiblePanelExtender ID="ColPnlExtEvents" runat="server" TargetControlID="pnlAddContentEvents"
BehaviorID="ColPnlExtEventsBehavior" TextLabelID="lblShowEvents" SuppressPostBack="true"
CollapsedImage="~/images/expand.jpg" ExpandedImage="~/images/collapse.jpg" CollapsedText="(Show Details...)"
ExpandedText="(Hide Details...)" ImageControlID="ImgBtnEvents" Collapsed="True" CollapsedSize="1"
CollapseControlID="pnlEvents" ExpandControlID="pnlEvents">
</cc1:CollapsiblePanelExtender>
<asp:Panel Style="cursor: pointer" ID="pnlEvents" runat="server" CssClass="collHeader">
<div style="padding: 2px; cursor: pointer; vertical-align: middle;">
<div style="float: left;">
<asp:Label ID="abnormalEventsLabel" runat="server">Add Abnormal Events</asp:Label></div>
<div style="float: left; margin-left: 20px;">
<asp:Label ID="lblShowEvents" runat="server">(Show Details...)</asp:Label>
</div>
<div style="float: right; vertical-align: middle;">
<asp:ImageButton ID="ImgBtnEvents" runat="server" ImageUrl="~/images/expand.jpg"
AlternateText="(Show Details...)" />
</div>
</div>
</asp:Panel>
<asp:Panel Style="overflow: hidden" ID="pnlAddContentEvents" runat="server" CssClass="collPanel"
Height="0px">
<table id="tblEventsDetails" width="100%" runat="server">
<tr>
<td align="left">
<a class="labelText">Description</a>
</td>
<td style="width: 75%">
<uc:RichTextBox ID="abnormalEventsDescriptionRichTextBox" runat="server" />
</td>
</tr>
<tr>
<td class="blankRow">
</td>
</tr>
<tr>
<td colspan="2" align="right">
<asp:LinkButton CssClass="btnSimpleSave" ID="abnormalEventSaveLinkButton" runat="server"
OnClick="abnormalEventSaveLinkButton_Click" OnClientClick="javascript:return ParticularClosureRichTextBoxValidation('ctl00_cphMain_abnormalEventsDescriptionRichTextBox_HTMLText','Abnormal Events');">Save</asp:LinkButton>
<asp:LinkButton CssClass="btnSimpleCancelForSubSections" ID="abnormalEventCancelLinkButton"
runat="server" CausesValidation="false" OnClick="abnormalEventCancelLinkButton_Click">Cancel</asp:LinkButton>
</td>
</tr>
</table>
</asp:Panel>
Many times, different JS libraries does not mix well today - you might have encountered the same.
Personally, I prefer pure js based approaches (such as jquery or jquery plugin) over control based approaches (as done in Ajax Control Toolkit). For collapsible panel, you can use jquery sliding functions. For example, see this fiddle that I had put up for another SO question to illustrate multiple collapsible panels
I am using an ajax collapsiblepanel extender in a webapp (asp.net) designed for IE 6. Currently for making the application compatible with IE 8 i have added a metatag - .
Everything in the application works fine except the collapsible panels using the ajax control.
These panels are always expanded.
Any idea on how to ensure the panels collapse and expand as expected in IE 8.
Note - i have tried changing the css class for collPanel where overflow:hidden is present to display:none but this kept the panel only collapsed.
Code snippet:
<cc1:CollapsiblePanelExtender ID="ColPnlExtAddUser" runat="server" TargetControlID="pnlAddContentUser"
ExpandControlID="pnlAddHeaderUser" CollapseControlID="pnlAddHeaderUser" Collapsed="True"
ImageControlID="ImgBtnAddUser" ExpandedText="(Hide Details...)" CollapsedText="(Show Details...)"
ExpandedImage="~/images/collapse.jpg" CollapsedImage="~/images/expand.jpg" SuppressPostBack="true"
TextLabelID="lblShowUser" BehaviorID="ColPnlExtAddUserBehavior">
</cc1:CollapsiblePanelExtender>
<asp:Panel Style="cursor: pointer" ID="pnlAddHeaderUser" runat="server" CssClass="collHeader">
<div style="padding: 2px; cursor: pointer; vertical-align: middle;">
<div id="Div2" style="float: left;">
<asp:Label ID="labelUserManagement" runat="server" Text="Add User"></asp:Label>
</div>
<div style="float: left; margin-left: 20px;">
<asp:Label ID="lblShowUser" runat="server">(Show Details...)</asp:Label>
</div>
<div style="float: right; vertical-align: middle;">
<asp:ImageButton ID="ImgBtnAddUser" runat="server" ImageUrl="~/images/expand.jpg"
AlternateText="(Show Details...)" />
</div>
</div>
</asp:Panel>
<asp:Panel Style="overflow: hidden" ID="pnlAddContentUser" runat="server" CssClass="collPanel"
Height="0px">
<table id="tblAddUserDetails" width="100%" runat="server">
<tbody>
<tr>
<td align="left">
<a class="labelText">First Name</a>
</td>
<td>
<asp:TextBox ID="firstNameTextbox" runat="Server" MaxLength="20" Width = "48%"></asp:TextBox>
</td>
</tr>
<tr>
<td align="left">
<a class="labelText">Last Name</a>
</td>
<td >
<asp:TextBox ID="lastNameTextbox" runat="Server" MaxLength="20" Width = "48%"></asp:TextBox>
</td>
</tr>
<tr>
<td align="right" colspan="2">
<asp:LinkButton ID="saveUserLinkButton" runat="server" CssClass="btnSimpleSave" OnClick="saveUserLinkButton_Click" >Save</asp:LinkButton>
</td>
</tr>
</tbody>
</table>
</asp:Panel>
ya sometime it support by some version of IE, i suggest you to use Jquery, it is easy and powerful.