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.
Related
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.
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; }
asp.net
need to use css to style this dropdown list...
<style type="text/css">
.cascadingDropDownList{ background-color:Red;}
.cascadingDropDownList button{ background-color:Green; }
</style>
<asp:DropDownList ID="ddlVehicleMake" runat="server" CssClass="cascadingDropDownList" />
The background color is red for the textbox part but not green for the button. How can I get access to the button's css properties?
I add hover images to .Net LinkButtons using the following method:
.rollover a
{
background-image:url(/images/shoppingcart/butpill_continue.gif);
}
.rollover a:hover
{
background-image:url(/images/shoppingcart/butpill_continue_over.gif);
}
<div class="rollover">
<asp:LinkButton ID="btnContinue" runat="server"></asp:LinkButton>
</div>
This works fine with regular link buttons.
I need to add this to my next/previous buttons in a DataPager. I tried setting the ButtonType to "Link" and applying the ButtonCssClass="rollover" but this doesn't work. Is there a way to accomplish this?
Try changing your css to
a.rollover { background-image:url(/images/shoppingcart/butpill_continue.gif); }
a.rollover:hover { background-image:url(/images/shoppingcart/butpill_continue_over.gif); }
Or just
.rollover { background-image:url(/images/shoppingcart/butpill_continue.gif); }
.rollover:hover { background-image:url(/images/shoppingcart/butpill_continue_over.gif); }
You'll also have to change your other images to something like this
<asp:LinkButton ID="btnContinue" runat="server" CssClass="rollover" />