how can i make this modal popup fill 80% of the screen in the x and y direction. i.e a margin of 10% on each side
Markup
<!-- Add Files Modal Form -->
<asp:HiddenField ID="AddFilesForModal" runat="server" />
<ajaxToolkit:ModalPopupExtender runat="server" ID="AddFilesModal" BehaviorID="modalPopupExtenderAddFiles"
TargetControlID="dummyButtonAddToPendingList" PopupDragHandleControlID="PanelAddFilesOuter" PopupControlID="PanelAddFilesOuter"
OkControlID="dummyButtonAddToPendingList" BackgroundCssClass="ModalTreeviewBackgroundz" DropShadow="false"
Drag="true">
</ajaxToolkit:ModalPopupExtender>
<ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender4" runat="server" TargetControlID="PanelAddFilesInner">
</ajaxToolkit:RoundedCornersExtender>
<asp:Panel ID="PanelAddFilesOuter" runat="server" BackColor="Transparent" Style="display: none;">
<asp:Panel ID="PanelAddFilesInner" runat="server" BackColor="White" >
<ContentTemplate>
<div id="AddFilesContainer">
<br />
<div style="max-height:800px;overflow:auto;">
<asp:TreeView ID="TreeViewAddItems" runat="server" BorderStyle="Solid" ShowCheckBoxes="Leaf"
Width="99%" ImageSet="XPFileExplorer" NodeIndent="15" PathSeparator="\" ShowExpandCollapse="true"
EnableClientScript="true" OnTreeNodeCheckChanged="OnTreeNodeCheckChanged" OnAdaptedTreeNodeCheckChanged="OnTreeNodeCheckChanged" ShowLines="True">
<HoverNodeStyle Font-Underline="True" ForeColor="#6666AA" />
<NodeStyle Font-Names="Tahoma" Font-Size="8pt" ForeColor="Black" HorizontalPadding="2px"
NodeSpacing="0px" VerticalPadding="2px" />
<ParentNodeStyle Font-Bold="False" />
<SelectedNodeStyle BackColor="#B5B5B5" Font-Underline="False" HorizontalPadding="0px"
VerticalPadding="0px" />
</asp:TreeView>
</div>
<br />
<div class="base">
<asp:LinkButton ID="lnkAddToPendingList" runat="server" OnClick="BtnAddToPendingList_Click" BorderStyle="Solid" BackColor="#CCCCCC">Add selected items to list</asp:LinkButton>
<asp:Button CssClass="Button" ID="dummyButtonAddToPendingList" runat="server" Style="display: none;" />
<asp:Button CssClass="Button" ID="CancelAddFiles" runat="server" Text="Cancel" OnClientClick="$find('modalPopupExtenderAddFiles').hide(); return false;" />
</div>
</div>
</ContentTemplate>
</asp:Panel>
</asp:Panel>
<!-- End Add Files Modal Form -->
Look at the resulting HTML, and style it with CSS. The CSS likely will look something like this:
.modal {
display: block;
width: 90%;
height: 90%;
margin: auto;
}
Related
HoverMenuExtender only works after postback in gridview. Weird behavior.
<asp:TemplateField>
<HeaderStyle CssClass="CenterAligner" />
<ItemTemplate>
<asp:Image ID="imgNotes" runat="server" ImageUrl="Images/information.png" Style="position: relative" />
<asp:Panel ID="pnlNotes" runat="server" BackColor="GhostWhite" BorderColor="Black" BorderStyle="Solid" BorderWidth="1" Width="500px" Visible="true">
<div style="position: relative">
<div style="padding: 10px; margin: 10px; text-align: justify">
<asp:Label ID="lblCreditInfo" runat="server" Font-Size="9pt" ForeColor="Black"></asp:Label>
<asp:Label ID="lblCreditWebSite" runat="server" Font-Size="9pt" Text='<%# Bind("CreditWebSite") %>' Visible="false"></asp:Label>
<asp:Label ID="lblCreditUserName" runat="server" Font-Size="9pt" Text='<%# Bind("CreditUserName") %>' Visible="false"></asp:Label>
<asp:Label ID="lblCreditPassword" runat="server" Font-Size="9pt" Text='<%# Bind("CreditPassword") %>' Visible="false"></asp:Label>
</div>
<br />
</div>
</asp:Panel>
<ajaxToolkit:HoverMenuExtender ID="hmeNotes" runat="server" PopupControlID="pnlNotes" PopupPosition="left" TargetControlID="imgNotes">
</ajaxToolkit:HoverMenuExtender>
</ItemTemplate>
<ItemStyle HorizontalAlign="center" />
<HeaderStyle HorizontalAlign="Left" />
</asp:TemplateField>
Before Postback After Postback
I was missing the panel for the balloon extender that was also on the page.
I am having a problem when I mark some checkbox checked in a grid view, the page itself will jump back to the top instead of staying at the same position when auto post back. Here is how I set up my grid view:
<UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Repeater ID="Repeater1" runat="server" OnItemDataBound="Repeater1_ItemDataBound">
<ItemTemplate>
<!-- COLLAPSIBLE PANEL EXTENDER -->
<asp:Panel ID="pHeader1" runat="server" CssClass="cpHeader">
<!-- Collapsible panel extender header -->
<div class="form-group" style="background-color: #ffb848; height: 30px; vertical-align: middle">
<div class="col-md-3">
<div style="float: left; color: White; padding: 5px 5px 0 0">
<asp:Label ID="lblCategory" Text='<%# DataBinder.Eval(Container.DataItem, "categoryName") %>' runat="server" />
</div>
</div>
<div class="col-md-9">
<div style="float: right; color: White; padding: 5px 5px 0 0">
<asp:Label ID="lblHeaderText1" runat="server" />
</div>
</div>
<div style="clear: both"></div>
</div>
</asp:Panel>
<!-- Collapsible panel extender body -->
<asp:Panel ID="pBody1" runat="server" CssClass="cpBody">
<asp:Label ID="lblBodyText1" runat="server" />
<!-- Grid view to show products based on each category -->
<asp:GridView ID="gvProduct" runat="server" AutoGenerateColumns="False" Width="998px" CellPadding="4" ForeColor="#333333" GridLines="None" ShowHeader="False" DataKeyNames="id">
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
<Columns>
<asp:TemplateField ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:CheckBox ID="cbCheckRow" runat="server" AutoPostBack="true"/>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="name" HeaderText="Name" ItemStyle-Width="650px" />
<asp:BoundField DataField="inventoryQuantity" HeaderText="Total Unit" />
<asp:TemplateField HeaderText="Quantity" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="200px">
<ItemTemplate>
<asp:TextBox ID="tbQuantity" runat="server" Width="40" Text="0" OnTextChanged="tbQuantity_TextChanged" AutoPostBack="true"/>
<asp:Label ID="lblCheckAmount" runat="server" ForeColor="#a94442"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EditRowStyle BackColor="#999999" />
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#ffb848" ForeColor="White" />
<PagerStyle BackColor="#d8d8d8" ForeColor="#333333" HorizontalAlign="Left" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#E9E7E2" />
<SortedAscendingHeaderStyle BackColor="#506C8C" />
<SortedDescendingCellStyle BackColor="#FFFDF8" />
<SortedDescendingHeaderStyle BackColor="#6F8DAE" />
</asp:GridView>
</asp:Panel>
<asp:CollapsiblePanelExtender ID="cpe1" runat="server" TargetControlID="pBody1" CollapseControlID="pHeader1"
ExpandControlID="pHeader1" Collapsed="true" TextLabelID="lblHeaderText1" CollapsedText="Show"
ExpandedText="Hide" CollapsedSize="0"
ScrollContents="false">
</asp:CollapsiblePanelExtender>
</ItemTemplate>
</asp:Repeater>
</ContentTemplate>
</UpdatePanel>
I've added the update panel. So far from my research, I know that we should use update panel to prevent the page jump up when auto post back. However, mine does not work. Any guides?
Thanks in advance.
You can use the MaintainScrollPositionOnPostback attribute of page Directive. See Sample below:
<%# Page MaintainScrollPositionOnPostback="true" %>
Edit:
Current layout:
Im trying to work out how within my ASP webpage design I can posistion a div (server side) under another div.
To my question further I'll use the following screenshots:
Currently this is my layout:
I want to position 2 more div one under another to give me a 'title' div and a 'description' div tat will later be populated by my database results, as shown:
This is my current source code. Can someone push me in the right direction of how i go about implementing these divs one of top of another like this?
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Show.aspx.cs" Inherits="ViewCDs.Show" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div style=" float:left;">
<asp:Image ID="Image1" runat="server" Height="145px" ViewStateMode="Enabled"
Width="185px" />
</div>
<div style=" float:left; width: 395px; height: 140px;">
<asp:FormView ID="FormView1" runat="server">
<EditItemTemplate>
coffeeName:
<asp:TextBox ID="coffeeNameTextBox" runat="server"
Text='<%# Bind("coffeeName") %>' />
<br />
coffeeOrigin:
<asp:TextBox ID="coffeeOriginTextBox" runat="server"
Text='<%# Bind("coffeeOrigin") %>' />
<br />
coffeeStrength:
<asp:TextBox ID="coffeeStrengthTextBox" runat="server"
Text='<%# Bind("coffeeStrength") %>' />
<br />
coffeeGrind:
<asp:TextBox ID="coffeeGrindTextBox" runat="server"
Text='<%# Bind("coffeeGrind") %>' />
<br />
coffeePrice:
<asp:TextBox ID="coffeePriceTextBox" runat="server"
Text='<%# Bind("coffeePrice") %>' />
<br />
coffeeQty:
<asp:TextBox ID="coffeeQtyTextBox" runat="server"
Text='<%# Bind("coffeeQty") %>' />
<br />
coffeeRRP:
<asp:TextBox ID="coffeeRRPTextBox" runat="server"
Text='<%# Bind("coffeeRRP") %>' />
<br />
<asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True"
CommandName="Update" Text="Update" />
<asp:LinkButton ID="UpdateCancelButton" runat="server"
CausesValidation="False" CommandName="Cancel" Text="Cancel" />
</EditItemTemplate>
<InsertItemTemplate>
coffeeName:
<asp:TextBox ID="coffeeNameTextBox" runat="server"
Text='<%# Bind("coffeeName") %>' />
<br />
coffeeOrigin:
<asp:TextBox ID="coffeeOriginTextBox" runat="server"
Text='<%# Bind("coffeeOrigin") %>' />
<br />
coffeeStrength:
<asp:TextBox ID="coffeeStrengthTextBox" runat="server"
Text='<%# Bind("coffeeStrength") %>' />
<br />
coffeeGrind:
<asp:TextBox ID="coffeeGrindTextBox" runat="server"
Text='<%# Bind("coffeeGrind") %>' />
<br />
coffeePrice:
<asp:TextBox ID="coffeePriceTextBox" runat="server"
Text='<%# Bind("coffeePrice") %>' />
<br />
coffeeQty:
<asp:TextBox ID="coffeeQtyTextBox" runat="server"
Text='<%# Bind("coffeeQty") %>' />
<br />
coffeeRRP:
<asp:TextBox ID="coffeeRRPTextBox" runat="server"
Text='<%# Bind("coffeeRRP") %>' />
<br />
<asp:LinkButton ID="InsertButton" runat="server" CausesValidation="True"
CommandName="Insert" Text="Insert" />
<asp:LinkButton ID="InsertCancelButton" runat="server"
CausesValidation="False" CommandName="Cancel" Text="Cancel" />
</InsertItemTemplate>
<ItemTemplate>
<b>Origin:</b>
<asp:Label ID="coffeeOriginLabel" runat="server"
Text='<%# Bind("coffeeOrigin") %>' />
<br />
<br />
<b>Grind:</b>
<asp:Label ID="coffeeGrindLabel" runat="server"
Text='<%# Bind("coffeeGrind") %>' />
<br />
<br />
<b>Price: £</b>
<asp:Label ID="coffeePriceLabel" runat="server"
Text='<%# Bind("coffeePrice") %>' />
<br />
<br />
<b>Strength:</b>
<asp:Label ID="coffeeStrengthLabel" runat="server"
Text='<%# Bind("coffeeStrength") %>' />
<br />
<br />
<b>Stock Level:</b>
<asp:Label ID="coffeeQtyLabel" runat="server" Text='<%# Bind("coffeeQty") %>' />
<br />
</ItemTemplate>
</asp:FormView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:CoffeeConnectionString %>"
SelectCommand="SELECT [coffeeName], [coffeeOrigin], [coffeeStrength], [coffeeGrind], [coffeePrice], [coffeeQty], [coffeeRRP] FROM [Coffees]">
</asp:SqlDataSource>
<br />
</div>
<div style=" float:left; width: 339px; height: 140px;">
<br />
<div style=" float:left; width: 165px; height: 25px;">
<b><asp:Label ID="Label1" runat="server" Text="Select Coffee Grind:"></asp:Label> </b>
</div>
<div style=" float:right; width: 165px; height: 25px;">
<asp:DropDownList ID="DropDownList1" runat="server" Height="21px" Width="161px">
<asp:ListItem>Beans</asp:ListItem>
<asp:ListItem>Smooth</asp:ListItem>
<asp:ListItem>Course</asp:ListItem>
</asp:DropDownList>
</div>
<div style=" float:left; width: 165px; height: 40px;">
<br />
<b><asp:Label ID="Label2" runat="server" Text="Quantity:"></asp:Label></b>
</div>
<div style=" float:right; width: 165px; height: 40px;">
<br />
<asp:TextBox ID="TextBox1" runat="server" Width="40px">1</asp:TextBox>
</div>
<div style=" float:left; width: 165px; height: 40px;">
<br />
<asp:Button ID="Button1" runat="server" Text="Buy" />
</div>
</div>
You would simply need to add two more divs beneath that code.
<div id="title"> </div> <br/>
<div id="description"> </div> <br/>
However if you would like to control their attributes such as visibility then you would just need to make those asp.net panels.
<asp:Panel runat="server" ID="title"> </asp:Panel> <br/>
<asp:Panel runat="server" ID="description"> </asp:Panel> <br/>
I have a problem with Javascript not load in asp.net when an updatepanel postback to the server and the problem is that javascript code is not in the same page where the updatepanel is so I can put it in pageLoad() function it is like this:
<script src="js/keyboard.js" type="text/javascript"></script>
and i use ASP.Net 4 and c# and this is my code code:
<link href="css/keyboard.css" rel="stylesheet" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div style="text-align: left; padding-right: 140px">
<dx:aspxcombobox id="comboBoxLangauge" clientinstancename="comboboxLang"
cssclass="combo" runat="server" width="140px" clientidmode="Static">
<Items>
<dx:ListEditItem Text="English to Kurdish" Value="1" Selected="true" />
<dx:ListEditItem Text="Kurdish to English" Value="2" />
</Items>
<ClientSideEvents SelectedIndexChanged="IndexChanged" />
</dx:aspxcombobox>
</div>
<br />
<br />
<asp:Button ID="btnTranslate" runat="server" Text="Search" ClientIDMode="Static"
CssClass="Search" OnClick="btnTranslate_Click" />
<asp:TextBox ID="txtBoxWord" runat="server" ClientIDMode="Static"
class="keyboardInput Search" Style="width: 260px; direction: ltr"></asp:TextBox>
<asp:AutoCompleteExtender ID="autocom" ClientIDMode="Static" runat="server" CompletionSetCount="10"
EnableCaching="true" MinimumPrefixLength="1" TargetControlID="txtBoxWord" ServicePath="~/translator/AutoComplete.asmx" ServiceMethod="GetCompletionList">
</asp:AutoCompleteExtender>
<asp:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server" TargetControlID="OutPanel"
Corners="All" Radius="5" BorderColor="Silver">
</asp:RoundedCornersExtender>
<br />
<br />
<div id="OutPanel" runat="server" clientidmode="Static" style="width: 440px; height: 200px; overflow: auto; margin-left: auto; margin-right: auto; padding-top: 10px;" visible="false">
</div>
</ContentTemplate>
</asp:UpdatePanel>
<div id="OutPanel" runat="server" clientidmode="Static" style="width:440px;height:200px;overflow:auto;margin-left:auto;margin-right:auto;padding-top:10px;" visible="false">
</div>
</ContentTemplate>
</asp:UpdatePanel>
"The problem is that javascript code is not in the same page where the updatepanel is"
Whereas make sure your JavaScript is available on the page with UpdatePanel to load it properly.
I have a aspx page, with a modalpopup extender, and it's work perfect.
But I place an Iframe on the end of the page, and the modelpopup work only when I click the button twice. I can't find the answer for this problem.
<asp:UpdatePanel ID="UpdatePanel4" runat="server">
<ContentTemplate>
<div class="szamlabal14">
Csatlakozási pont:
<input type="hidden" id="hdnCsatlakozasiPontKod" runat="server" value="0" />
<asp:TextBox ID="txtCsatlakozasiPont" runat="server" Width="480" onkeydown="return false;"></asp:TextBox>
<asp:Button ID="btnCsatlakozasiPont" runat="server" Text="..." />
<cc1:ModalPopupExtender ID="mpeCsatlakozasiPont" runat="server" CancelControlID="btnCancel"
TargetControlID="btnCsatlakozasiPont" OkControlID="btnOk" PopupControlID="pnPopup"
PopupDragHandleControlID="PopupHeader" Drag="true" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
<asp:Panel ID="pnPopup" Style="display: none" runat="server">
<div class="modalPopup">
<div style="position: relative; left: 670; margin: 3px;">
<asp:Button ID="btnCancel" runat="server" Text="x" CausesValidation="false" OnClientClick="return false;" />
<asp:Button ID="btnOk" runat="server" Text="Ok" Style="display: none" CausesValidation="false"
OnClientClick="return false;" />
</div>
<iframe id="ifrCsatlakozasiPont" height="350px" width="700px" src="CsatlakozasiPont.aspx"
frameborder="1"></iframe>
</div>
</asp:Panel>
</div>
</ContentTemplate>
</asp:UpdatePanel>
When I delete the following part, the modalpopup work well again.
<div style="margin-top: 10px; z-index: 10; border: 1px solid black; position: absolute;
top: 130px;">
<iframe src="http://ismts38105/viewer/ImageViewer.xbap?<%=Image%> width="1440"
height="400" />
</div>
You need to set the permissions on your Internet Explorer. XBAP requires you add the domain/IP to the trusted sites, or else you will be unable to do anything with them.