This is my code for ModelPopupExtender:
<asp:View ID="ViewCDB" runat="server">
<div id="cdbupbar" style="padding:2px">
<asp:Button ID="btnCDB" runat="server" CssClass="CButton"
onclick="btnCDB_Click" Text="Create New Discussion Board" />
<asp:Panel ID="Panel13" runat="server">
<asp:Button ID="Button9" runat="server" Text="Cancel" CssClass="newButton" />
<uc2:CreateNewCDB ID="CreateNewCDB1" runat="server" />
</asp:Panel>
<asp:modalpopupextender id="ModalPopupExtender1" runat="server"
targetcontrolid="btnCDB" popupcontrolid="Panel13" CancelControlID="Button9"
backgroundcssclass="ModalPopupBG">
</asp:modalpopupextender>
</div>
</asp:View>
The problem is that, whenever I click btnCDB button, it shows the model popup but it is displayed on left hand side of the window instead in middle. I tried to add it in <div> and <td> and assigning their alignment property to "middle" but didn't worked. The container that holding this code is set to left aligned. I can't change it because its website's main container, changing its alignment will cause all website content to middle. That I don't want. Also I checked all CSSes, they didn't effect the alignment property.
<asp:Panel ID="Panel13" runat="server" style="margin-left:35%;">
try this and if it makes any difference, u better define a css class for your panel.
Related
I'm having surprisingly bad luck finding a decent resource for this. But What I'm doing is creating a list of tickets using a ListView. One of the controls in the item template is a link button that shows the header of the ticket. When the user clicks the link button, I want to open a modal window that shows the ticket in readable format. To get the ticket, I'll be passing that page a variable and it'll do the rest; nothing complicated. The page will have 3 buttons and the windows needs to close when you click one of them.
Now, I figured out how to use the ModalPopupExtender from the Ajax tookit more or less. You create the panel in it's own div which stays hidden. I created a click event that basically uses a webclient to download the html from the page and insert it into that div's innerHtml. This seems to work the first time. But as soon as you click a different link, the page pukes and says something about it being in an illegal state.
I'm not sure if I'm going about this wrong, and I can't find any decent examples of how to do this. Well there's one, but the english is hard to understand and it's in VB instead of C#. Any help?
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<form id="form1" runat="server">
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<br />
<asp:ModalPopupExtender
DropShadow="true"
OkControlID="btnOk"
CancelControlID="btnClose"
runat="server"
PopupControlID="Panel1"
id="ModalPopupExtender1"
TargetControlID="Button1" />
<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" style="display:none;">
This is basic modal popup.
<br /><br />
<asp:Button ID="btnOk" runat="server" Text="Ok" />
<asp:Button ID="btnClose" runat="server" Text="Close Me" />
<iframe src="http://www.google.com"></iframe>
</asp:Panel>
<asp:Button ID="Button1" runat="server" Text="First Modal Popup" />
</div>
</form>
Try this it should work.
I have several ImageButtons on the top of my page, then I have a textbox and button in the middle. If you type in the textbox then hit enter on the keyboard the browser follows the link of the first ImageButton instead of the submit button next to the textbox. I have ran into this in the pase and had to put the imagebuttons on the bottom of the page for it to work correctly, that is not an ok fix in this case. I tried setting UseSubmitBehavior="true" , but that does nothing. I tried putting the textbox and button in a separate DIV and a separate panel, didn't work either
TOP of the page
<div style="position:absolute; left: 70% ; top: 5%;">
<asp:ImageButton ID="imgFB" runat="server" ImageUrl="Images/facebook_icon.jpg" PostBackUrl="http://www.facebook.com/832586561" />
<asp:ImageButton ID="imgLI" runat="server" ImageUrl="Images/linkedin_logo.jpg" PostBackUrl="http://www.linkedin.com/pub/scott-selby/33/304/44a" />
<asp:ImageButton ID="imgCB" runat="server" ImageUrl="Images/careerbuilder_logo.jpg" PostBackUrl="http://www.careerbuilder.com" />
<asp:ImageButton ID="imgCP" runat="server" ImageUrl="Images/codeplex_logo.jpg" PostBackUrl="http://www.codeplex.com" />
</div>
Middle of Page
<div ID="formPanel" runat="server" style="position:absolute; top:235px;">
<asp:TextBox ID="txtNewCity" runat="server"></asp:TextBox>
<asp:Button ID="btnChangeCity" runat="server" Text="Change City" UseSubmitBehavior="true" />
</div>
You may set the default button via <form/> attribute.
<form defaultbutton="btnChangeCity" id="form1" runat="server">
...
</form>
Or use Panel control to set default button.
<asp:Panel ID="Panel1" runat="server" DefaultButton="btnChangeCity">
<asp:TextBox ID="txtNewCity" runat="server"></asp:TextBox>
<asp:Button ID="btnChangeCity" runat="server" Text="Change City" />
</asp:Panel>
You surround your controls with <div> which is a good idea, but to have it run at all you also need <form>. In case you just didn't include it, the submit button also has to have OnClick="sub" attribute.
Read more here.
I'm using crystal reports for VS 2010 in a web application. The control I'm having a problem with is the Report Viewer. I have it wrapped in a modal popup, and whenever the popup is triggered the report viewer shows up just fine as expected. HOWEVER, after the report viewer appears, there is about 1000px worth of unwanted height that is added to my body.
I've tried multiple styling changes in the code behind to counteract this, but nothing seems to be working. I cannot do overflow:hidden because I must be able to scroll the page. If anyone has had experience with this problem and can help, it would be greatly appreciated. Thank you!
<asp:UpdatePanel ID="upReportViewer" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="btnPrint" runat="server" Text="Print" class="PrintPaneButton" OnClick="btnPrint_Click" OnClientClick="displayViewer();" />
<input type="button" id="btnHidden" style="display: none;" runat="server" />
<asp:ModalPopupExtender ID="ModalPopupExtender1" PopupControlID="parentPanel" CancelControlID="btnCancel"
TargetControlID="btnHidden" runat="server">
</asp:ModalPopupExtender>
<asp:Panel ID="parentPanel" runat="server" Width="900px" BackColor="#BCC8DA" BorderWidth="2px"
BorderColor="#003366">
<asp:ImageButton ID="btnCancel" ImageUrl="Images/CloseButton.bmp" runat="server"
CssClass="btnCancel" />
<asp:Panel ID="previewPanel" Width="900px" Height="350px" runat="server" ScrollBars="Vertical"
BackColor="#BCC8DA">
<CR:CrystalReportViewer ID="CrystalReportViewer1" runat="server" BestFitPage="False"
HasExportButton="True" HasPrintButton="True" HasSearchButton="True" HasToggleGroupTreeButton="False"
HasCrystalLogo="False" HasPageNavigationButtons="True" CssClass="hide" AutoDataBind="true" />
</asp:Panel>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
In doing some reworking of my web application I encountered the following issue:
Although an ASP UpdatePanel does not have a height property it does not automatically expand to fill its parents container. Instead, it grows with its children's dimensions. In my scenario, the child does not have dimensions -- it should expand to fill its parents container. This causes both the UpdatePanel and its child to have very small heights.
Before I had:
[Parent Container] -> [Child Container] with both ParentContainer and ChildContainer's height property unset so that they will fill containers higher up in the hierarchy.
Now I have:
[Parent Container] -> [Update Panel] -> [Child Container]. Parent Container's dimensions are not guaranteed to be non-empty, so I am unable to programatically set ChildContainer's dimensions in all cases. As such, I would like my UpdatePanel to work in the same fashion as the controls it is wrapped around.
Is my best bet to go into the CSS and do something like:
.UpdatePanel
{
height: 100%;
}
or do I have other, cleaner options available to me? I am creating these controls server-side, so I don't have the opportunity to wrap them in divs (nor do I want to).
EDIT:
I (can't?) use Panel instead of UpdatePanel because I would like to use the functionality of being able to update conditionally. I have a timer on my page which calls UpdatePanel.Update() on controls -- this functionality does not exist in panel AFAIK.
The body of my page is height: 100% and here is the static structure hierarchy.
The location where RadPane2 is declared is where an UpdatePanel will be slipped in. It needs to be between the RadPane and the CormantRadDockZone controls. This is only the 'base' implementation, however. Users have the ability to stack more RadPane/UpdatePanel/CormantRadDockZone 1:1:1 contents onto the page. As such, I have UpdatePanels being generated dynamically -- which means I can't apply the CSS to just an UpdatePanel's ID.
<telerik:RadSplitter ID="RadSplitter2" runat="server" BorderSize="0" Height="100%" HeightOffset="155" Skin="Web20" Width="100%" PanesBorderSize="0">
<telerik:RadPane ID="RadPane_DefaultExpand" runat="server" CssClass="allRoundedCorners" Scrolling="None">
<telerik:RadMultiPage ID="RadMultiPage1" Runat="server" SelectedIndex="0">
<telerik:RadPageView ID="RadPageView1" runat="server">
<telerik:RadSplitter ID="RadSplitter1" Runat="server" BorderSize="0" Height="100%" Skin="Web20" Width="100%">
<telerik:RadPane ID="RadPane1" Runat="server" CssClass="leftRoundedCorners" Scrolling="None" Width="20px">
<telerik:RadSlidingZone ID="RadSlidingZone1" Runat="server" ClickToOpen="True" Width="20px">
<telerik:RadSlidingPane ID="RadSlidingPane1" Runat="server" BackColor="#ECF4FD" IconUrl="~/Content/Dashboard/Icons/configuration.png" MinWidth="160" Scrolling="Y" TabView="ImageOnly" Title="Configuration" Width="160px" EnableDock="False">
<telerik:RadListBox ID="lstBxSettings" runat="server" EnableDragAndDrop="True" onclientdragging="OnClientDragging" ondropped="LstBxSettings_Dropped" Skin="Web20" Width="100%" onclientdropped="OnClientDropped">
<Items>
<telerik:RadListBoxItem Text="Horizontal Bar" Value="Horizontal"/>
<telerik:RadListBoxItem Text="Vertical Bar" Value="Vertical" />
</Items>
</telerik:RadListBox>
</telerik:RadSlidingPane>
<telerik:RadSlidingPane ID="RadSlidingPane2" Runat="server" IconUrl="~/Content/Dashboard/Icons/chart.png" TabView="ImageOnly" BackColor="#ECF4FD" MinWidth="160" Scrolling="Y" Title="Custom Widgets" Width="160px" EnableDock="False">
<telerik:RadListBox ID="lstBxCustom" runat="server" EnableDragAndDrop="True" onclientdragging="OnClientDragging" onclientdropped="OnClientDropped" ondropped="RadListBox_Dropped" Skin="Web20" Sort="Ascending" Width="100%" />
</telerik:RadSlidingPane>
<telerik:RadSlidingPane ID="RadSlidingPane3" Runat="server" BackColor="#ECF4FD" IconUrl="~/Content/Dashboard/Icons/historical.png" MinWidth="160" Scrolling="Y" TabView="ImageOnly" Title="Historical Widgets" Width="160px" EnableDock="False">
<telerik:RadListBox ID="lstBxHistorical" runat="server" EnableDragAndDrop="True" onclientdragging="OnClientDragging" onclientdropped="OnClientDropped" ondropped="RadListBox_Dropped" Skin="Web20" Sort="Ascending" Width="100%" />
</telerik:RadSlidingPane>
<telerik:RadSlidingPane ID="RadSlidingPane4" Runat="server" IconUrl="~/Content/Dashboard/Icons/settings_global.png" onclientbeforeexpand="ShowDashboardGlobalSettings" TabView="ImageOnly" EnableDock="False" />
</telerik:RadSlidingZone>
</telerik:RadPane>
<telerik:RadPane ID="RadPane2" Runat="server" BackColor="White" BorderColor="White" CssClass="rightRoundedCorners" Scrolling="None" onclientresized="OnClientResized">
<cc1:CormantRadDockZone ID="RadDockZone1" runat="server" />
</telerik:RadPane>
</telerik:RadSplitter>
</telerik:RadPageView>
</telerik:RadMultiPage>
</telerik:RadPane>
</telerik:RadSplitter>
UpdatePanel will translate to a div or span on client side so as long as you set the css class properly, this should work. Going via CSS is the cleanest approach.
Here's how you can set the css class (if you want to use this in a css file, make sure you've PerformSubstitution set to true):
#<%=UpdatePanel1.ClientID%> {
height: 100;
}
Also, based on browser type, you may have to reset margin and padding to 0.
Make sure that the UpdatePanel's parent has height set too.
Update: use a Panel to wrap UpdatePanel (not substitute it)
<asp:Panel ID="Panel1" runat="Server">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
</asp:UpdatePanel>
</asp:Panel>
Noticed RadPane has a CssClass property so you can just add it there.
<telerik:RadPane ID="RadPane2" Runat="server" BackColor="White" BorderColor="White" CssClass="rightRoundedCorners myCssClass" Scrolling="None" onclientresized="OnClientResized">
<cc1:CormantRadDockZone ID="RadDockZone1" runat="server" />
</telerik:RadPane>
Update:
There was actually a hidden panel with validator in the user control that was causing page not to be valid on the first postback. Consider this issue resolved.
This is first time I am using this control and it is behaving rather strange. I have to click on the "Next" button twice for it to move to the next step. I tried explicitly setting active index, using MoveTo etc. Nothing works. Here is the markup for the control. Anybody has any ideas why?
<asp:Wizard ID="UserWizard" runat="server" ActiveStepIndex="0"
StartNextButtonImageUrl = "~/App_Themes/Default/images/buttons/continue.gif" StartNextButtonType="Image"
StepNextButtonType="Image" StepNextButtonImageUrl="~/App_Themes/Default/images/buttons/continue.gif"
FinishPreviousButtonImageUrl="~/App_Themes/Default/images/buttons/back.gif"
FinishPreviousButtonType="Image" FinishCompleteButtonImageUrl="~/App_Themes/Default/images/buttons/save.gif"
FinishCompleteButtonType="Image" CancelButtonType="Image" CancelButtonImageUrl="~/App_Themes/Default/images/buttons/back.gif"
DisplaySideBar="false" >
<WizardSteps>
<asp:WizardStep Title="User Profile" ID="UserProfile" runat="server">
<uhc:ctlUserProfileEdit ID="ctlUserProfileEdit" runat="server">
</uhc:ctlUserProfileEdit>
<br clear="all" />
<div>
<asp:ImageButton ID="cmdResetPassword" runat="server" ImageUrl="~/App_Themes/Default/images/buttons/resetpassword.gif" />
</div>
<div>
<asp:UpdatePanel ID="upSchools" runat="server" ChildrenAsTriggers="true">
<ContentTemplate>
<uhc:ctlSchoolLocationSelector ID="ctlSchoolLocationSelector" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:WizardStep>
<asp:WizardStep Title="Roles" ID="Roles" runat="server">
<uhc:ctlPermissionInternal ID="ctlPermissionInternal1" runat="server"></uhc:ctlPermissionInternal>
<uhc:ctlPermissionExternal ID="ctlPermissionExternal1" runat="server"></uhc:ctlPermissionExternal>
</asp:WizardStep>
</WizardSteps>
</asp:Wizard>
I don't know for sure if this is what's causing it, but I find it strange that there is an UpdatePanel within the Wizard control, rather than the Wizard Control within the update panel. This may be causing some strange behavior.
Can you change this and see if the problem resolves itself?