Here is my problem:
<asp:Panel ID="pnlMyAddressBook" runat="server" BackColor="White" CssClass="roundcorner">
TEST<table style="width: 100%;">
Do I need to explain that the page doesn't scroll to show the list of all the validation errors?
Its a panel being shown on a modal popup... I have tried setting the height property for the panel... no use...
Also, including this (required) Jquery function in the HTML causes the panel to move to a corner... I have removed it for now from my HTML...
<script type="text/javascript">
$(function () {
$("#tabs").tabs();
});
C# code for the button opening the modal:
protected void btnEdit_Click(object sender, EventArgs e)
{
ClientScript.RegisterStartupScript(this.GetType(), "key", "launchModalV2();", true);
//ClearTextBoxes();
PopUpAddressInLightBox();
mpeTest.Show();
hdnfld.Value = "Edit";
}
HTML
<asp:Button ID="btnEdit" runat="server" Text="Edit Address pb" OnClick="btnEdit_Click" CssClass="btn" />
<asp:Button ID="btnAddNew" runat="server" Text="Add New Address pb" OnClick="btnAddNew_Click" />
I am using these 2 buttons to call the modal....
.modalBackground
{
background-color: Black;
-filter: alpha(opacity=80);
-opacity: 0.6;
z-index: 10000;
}
In the css of your modal popup, set the width of the modalpop up, then set the overflow:auto. That will give you vertical scrollbar. Example:
.ModalPopupPanel
{
height:700px;
overflow:auto;
}
So,when the content height exceed the 700px, the horizontal scrollbar will show up. The same is true for the horizontal scrollbar where you need to set the width of the modalpop.
Related
I have the following modal popup on a Asp.net/C# web application. The modal popup holds multiple placeholders. My problem occurs when I am trying to access the modal popup on small screens or on ipad/iphone/ipod screens. The page display the half of the modal popup so the information in the top are inaccessible. I have used overflow:auto;/ the following solution: Mobile ModalPopupExtender? and many others but doesn’t solved my problem.
.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7; } .modalPopup {
background-color:#ffffdd;
border-width:3px;
border-style:solid;
border-color:Gray;
padding:3px;
width:250px; }
<asp:Panel ID="Panel1" runat="server"></asp:Panel>
<asp:Button ID="btnShowPopup" runat="server" style="display:none" />
<asp:ModalPopupExtender ID="ModalPopupExtender1" PopupDragHandleControlID="Panel1" RepositionMode="None" runat="server" PopupControlID="pnlpopup"
TargetControlID="btnShowPopup" CancelControlID="btnCancel"
DropShadow="true"
BackgroundCssClass="modalBackground">
</asp:ModalPopupExtender>
<asp:Panel ID="pnlpopup" runat="server" BackColor="LightGray" style="display:none;"
CssClass="modalPopup" Width="650px" >
<asp:UpdatePanel ID="UpdatePanel3" UpdateMode="Conditional" runat="server">
<ContentTemplate>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="btnCancel" Height="30px" Width="160px" runat="server" Text="Cancel" />
</asp:Panel>
#focus: As I am using Jquery to attach ModalPopup to a button but code I used to check innerheight and then add class to my panel is:
var height = window.innerHeight;
if (height < 1000) {
$("#pnlpopup").addClass("PanelWithScroll");
}
You need to add above code in javascript and this need to be called on ModalPopupExtender click.
PanelWithScroll is a css class:
.PanelWithScroll{
height:250px;
overflow:scroll;
overflow-x:hidden;
}
Similarly, if you have problem with width too, you can check width too (http://responsejs.com/labs/dimensions/) and change class PanelWithScroll
Other thing you can do is check page height on page_load and if its less than what you want, add this class to pnlpopup Div. (This is easy solution IMO)
Update:
Add given javascript in your HTML Code in head section
$(document).ready(function () {
var height = window.innerHeight;
if (height < 1000) {
$("#pnlpopup").addClass("PanelWithScroll");
}
}
$(document).ready will only run after your page has wholly rendered. This may also help if you need help on how to put script in html (http://javascript.info/tutorial/adding-script-html)
I am trying to add dynamic button in panel
<asp:Panel ID="pnl001" runat="server" Height="300px" Width="1174px" ></asp:Panel>
How can i fix position (Left,Right,Top from panel) of that button
Please suggest
Give the panel and your button a class (IDs can sometimes be tricky with Web Forms:
<asp:Panel ID="pnl001" runat="server" Height="300px" Width="1174px" CssClass="MyPanel" >
<asp:Button ID="myButton" Text="Click Me" CssClass="MyButton" />
</asp:Panel>
Now you need to add some styles to your <head> element or your stylesheet:
<style type="text/css">
.MyPanel { position:relative; }
.MyButton {
position:absolute;
top:0;
left:0;
}
</style>
UPDATE
Since you are adding the button dynamically, remember to add the class like this in your code-behind:
btn.CssClass = "MyButton;
I hope you might be adding button to your pannel like this
Button btn = new Button ();
btn.Text = "mytext";
btn .ID = "btn1";
btn.CssClass="MyCSSClassName";
pnl001.Controls.Add(btn);
now before pnl001.Controls.Add(btn); add this line btn.CssClass="MyCSSClassName"; and add the following class in your stylesheet
<style type="text/css">
.MyCSSClassName{
//your properties for positioning the button inside a panel
}
</style>
hope this works for you.
So I'm trying to understand how this should be properly setup. I have a Updateprogress that shows a progress bar when a button is clicked. The button is wrapped in an UpdatePanel. But if there're any error, I want to stop the processing and then pop up a modal window (I used Modalpopupextender) to show the errors. My issue is, it just shows the box (or object) but without the texts that came from the Exception. Here's my code:
<asp:UpdatePanel ID="UpdatePanel_ActionButtons" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Approve" OnClick="Proccess_Click1" OnClientClick="this.disabled = true; this.value = 'Processing';" UseSubmitBehavior="false" />
</ContentTemplate>
</asp:UpdatePanel>
The Progress Bar:
<asp:UpdateProgress ID="UpdateProgress" runat="server" AssociatedUpdatePanelID="UpdatePanel_ActionButtons">
<ProgressTemplate>
<div style="background-color:Gray; filter:alpha(opacity=80); opacity:0.80; width: 100%; top: 0px; left: 0px; position: fixed; height: 800px;"></div>
<div style=" filter:alpha(opacity=100); position: fixed;
z-index: 100001;
left: 720px;
top: 105px;">
<div style="width:50px; height:50px; padding:50px; background-color:white; border:solid 1px black;">
<img alt="progress" src="../images/ajax-waiting.gif"/>
Processing...
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
The error box:
<asp:LinkButton ID="btnNotInUse" runat="server" />
<ajaxtoolkit:ModalPopupExtender ID="qaError" runat="server"
TargetControlID="btnNotInUse"
PopupControlID="pnlQAError"
BackgroundCssClass="modalPopupExtender" />
<asp:Panel ID="pnlQAError" runat="server" Style="display: none" CssClass="modalPopup">
<br />
<asp:Button ID="OkBtn" runat="server" Text="Ok" OnClick="OkBtn_Click" />
</asp:Panel>
Button Click Method:
protected void Proccess_Click1(object sender, EventArgs e)
{
List<string> validationErrors;
string returnurl;
Processrecord(out validationErrors);
if (validationErrors.Count() > 0)
{
foreach (var error in validationErrors)
{
qaFeedback.InnerHtml += error;
}
qaError.Show();
return;
}
else
{
returnurl = "toanotherpage.aspx";
}
}
So if you look as to how I add the errors, it's adding it to the "qafeedback" div. And then I would force it to show up and then return. What's happening is it would pop out the button box, with the button, but it doesn't show the texts I added. It would be helpful to know as well that when I remove the progress bar or animation, the whole thing works or shows the error messages.
Thoughts?
I have a login FORM inside a Hidden DIV, this DIV is hidden using CSS display:none; when I click on some other DIV, I show this DIV using jquery .slideDown(), so I can be able to use this form.
When I click on the button, the OnClick="Login" doesn't seem to work,and when I removed this form from this hidden div to simply another place in the body, it worked. What's the problem?
ASP.NET:
<div id="userCPContainer">
<form id="loginForm" runat="server">
<asp:Label ID="Label1" runat="server" Text="Username" class="loginLabels"></asp:Label>
<br />
<asp:TextBox ID="usernameField" runat="server" MaxLength="50" class="loginFields"></asp:TextBox>
<asp:Label ID="Label2" runat="server" Text="Password" class="loginLabels"></asp:Label>
<br />
<asp:TextBox ID="passwordField" runat="server" MaxLength="50"
TextMode="Password" class="loginFields"></asp:TextBox>
<asp:Button ID="loginButton" runat="server" Text="Log in" onclick="Loginn" class="loginButton"/>
</form>
</div>
JQUERY:
function showUserCP() {
$("#userCPContainer").slideDown(200);
$(".userCPDiv").css("background-color", "#000000");
$(".userCPDiv").css("border-color", "#000000");
}
function hideUserCP() {
$(".userCPDiv").css("background-color", "rgb(43, 147, 206)");
$(".userCPDiv").css("border-color", "rgb(43, 147, 206)");
$("#userCPContainer").slideUp(200);
}
$(".userCPDiv").click(function (e) {
//Either way, hide Main Menu
hideMainMenu();
if ($("#userCPContainer").is(":visible")) {
hideUserCP();
}
else {
showUserCP();
}
e.stopPropagation();
});
CSS:
#userCPContainer
{
overflow:hidden;
border-style:solid;
border-top-style:none;
border-color:rgb(43,147,206);
border-width:2px;
position:absolute;
right:0px;
top:0px;
display:none;
z-index:1;
width:300px;
background-color: #000000;
}
Nothing really complicated...
When you use CSS display: none; the problem is that all that's inside that DIV gets removed completely from the HTML Document and that causes that ASP.NET does not recognize this element when you show it via jQuery. I see to possible solutions:
Use visibility: hidden instead of display: none;, if you do this you will probably have some problems with the DIV height because it will take the space needed to render but it will not be visible.
Use a ScriptManager and an UpdatePanel and put the div and the form inside those elements, so the server will know when you render the Button in the client. Also, make sure that you register your jQuery scripts inside the ScriptManager
Hope this helps you
As it says in the title, I'm doing custom validation with FCK (because the RequiredFieldValidator doesn't work with FCKEditor). When validation fails, the callout appears, but it does not show up in the correctposition.
Generated style tag: visibility: visible; position: absolute; left: 0px; top: 646px; z-index: 1000;
Not that left is coming as 0px. (The top isn't quite right either, but it's close enough for now)
Here's my markup:
<FCKeditorV2:FCKeditor ID="FCKeditorBody" runat="server" Width="600" Height="150" ToolbarSet="Basic"></FCKeditorV2:FCKeditor>
<asp:CustomValidator runat="server" ID="cvBody" ControlToValidate="FCKeditorBody" SetFocusOnError="true"
ErrorMessage="Please enter a body." ClientValidationFunction="ValidateBody" ValidateEmptyText="true"
ValidationGroup="ValgrpPost" Display="None" />
<asp:ValidatorCalloutExtender runat="Server" ID="ValidatorCalloutExtender7" BehaviorID="vceBID" TargetControlID="cvBody"
HighlightCssClass="ValidatorCalloutHighlightCSS" CssClass="RecipeCalloutCSS" PopupPosition="TopLeft" />
<script type="Text/javascript">
function ValidateBody(source, args) {
var fckBody = FCKeditorAPI.GetInstance('<%=FCKeditorBody.ClientID %>');
args.IsValid = fckBody.GetXHTML(true) != "";
}
</script>
Make sure you put an element with position:relative around the FCKeditor and the validator, then it will show at the top left of the FCKeditor.
<div style="position:relative">
<FCKeditorV2:FCKeditor ... />
<asp:CustomValidator ... />
<asp:ValidatorCalloutExtender ... />
<script type="text/javascript">
function ValidateBody(source, args) {
var fckBody = FCKeditorAPI.GetInstance('<%=FCKeditorBody.ClientID %>');
args.IsValid = fckBody.GetXHTML(true) != "";
}
</script>
</div>
The message will now cover the toolbar and block the buttons untill you press the "x". A backgroundcolor should be added to the message to make it better visible.
If you wanted to show it inside the textarea of the editor, maybe PopupPosition="BottomRight" is better for that. Or you could overrule the generated css with an !important rule.
.RecipeCalloutCSS{ left:0!important; top:65px!important; }