When I try to drag the popup, first I have to click on draging position. But when I try to click on the draging enable area, popup window goes to another position. Even I try again it continuously happens.
here is my mark up:
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server" TargetControlID="btnEditAddress"
PopupControlID="Panel1" BackgroundCssClass="modalBackground" OkControlID="btnOKAddress"
CancelControlID="btnCancelAddress" DropShadow="true" PopupDragHandleControlID="headHolder"
X="270" Y="130" />
<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Style="width: 320px;
display: none;">
<div>
<div id="headHolder" runat="server" class="addressEditHead" style="height: 20px;
padding-top: 5px;">
<span style="padding-left: 5px;" id="addressType" />
</div>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div style="height: 25px; text-align: center;">
<asp:Button ID="btnOKAddress" runat="server" CssClass="button" Text="Save" OnClientClick="saveAddress();" />
<asp:Button ID="btnCancelAddress" runat="server" CssClass="button" Text="Cancel" />
<asp:HiddenField ID="hdnRelatedTable" runat="server" />
<asp:HiddenField ID="hdnRelatedID" runat="server" />
</div>
</div>
</asp:Panel>
Hi, All I found the solution. I upgrade the ajaxtoolkit to latest version. Now It's working coreclty
I found the solution. I upgraded the ajaxtoolkit to latest version. Now It's working coreclty.
Related
I am trying to implement ngx-infinite-scroll
I am unable to get it to do what I want which is listen to my browser or window scroll so I may scroll content and load when needed.
What's happening is can implement this library ONLY when I set the scroll to listen to some other div so the result is two scroll bars (1) browser window scroll bar (2) content div scroll bar - this is not desirable and creates a real messy UX.
You will notice a setting in the template "scrollWindow" I have tried changing this value without any success I'm not too sure what i'm doing wrong here...
Environment
Angular 8 with Angular Material
Template and Styling:
.container {
height: 100vh;
width: 70vw;
font-family: Arial, Helvetica, sans-serif;
padding-top: 20px;
overflow-y: auto;
}
HTML
<app-navigation-bar></app-navigation-bar>
<app-userpost></app-userpost>
<div *ngIf="loading">
<app-progress-spinner></app-progress-spinner>
</div>
<!-- infinite scroll div -->
<div
class="container"
infiniteScroll
[infiniteScrollContainer]="container"
[scrollWindow]="false"
[infiniteScrollDistance]="2"
[infiniteScrollThrottle]="5"
[infiniteScrollThrottle]="300"
(scrolled)="onScrollDown()"
>
<mat-card *ngFor="let post of postObjects">
<mat-card-header>
<img mat-card-avatar src={{post.profile_picture}} alt="no profile image">
<mat-card-title>{{post.email}}</mat-card-title>
<mat-card-subtitle> {{post.upload_date | date:"medium"}} </mat-card-subtitle>
</mat-card-header>
<img mat-card-image src={{post.photo}}>
<mat-card-content>
<p>
{{post.author_comment}}
</p>
</mat-card-content>
<!-- This fills the remaining space of the current row -->
<mat-card-actions class="action-buttons">
<button mat-button color="primary" (click)="post_like(post.post_id)">
<mat-icon>thumb_up_alt</mat-icon> {{post?.post_likes?.length}} Likes
</button>
<button mat-button color="primary" (click)="post_dislike(post.post_id)">
<mat-icon>thumb_down</mat-icon> {{post?.post_dislikes?.length}} Dislikes
</button>
<button mat-button color="primary">
<mat-icon>share</mat-icon> Share
</button>
<a mat-button color="primary" target="_blank">
<mat-icon>visibility</mat-icon> View
</a>
</mat-card-actions>
<mat-accordion>
<div *ngIf="post?.post_comments?.length > 0">
<mat-expansion-panel>
<mat-expansion-panel-header>
<div class="comment-header">
<span class="label label-primary">{{post?.post_comments?.length}} Comments</span>
</div>
</mat-expansion-panel-header>
<mat-list>
<div *ngIf="post?.post_comments?.length > 0">
<div *ngFor="let postSection of post.post_comments; let i = index">
<mat-accordion>
<mat-expansion-panel>
<mat-expansion-panel-header collapsedHeight="80px" expandedHeight="30px">
<mat-panel-title>
<div style="max-height: 53px; text-overflow: ellipsis">
<img mat-card-avatar
src="https://source.unsplash.com/random/200x200"
style="padding: 5px">
<strong
style="padding: 5px">{{postSection?.comment_author}}</strong>
<small style="padding: 5px">
{{postSection?.date | date:"medium"}}</small>
</div>
</mat-panel-title>
</mat-expansion-panel-header>
<hr>
<p>{{postSection?.post_comment}}</p>
</mat-expansion-panel>
</mat-accordion>
</div>
</div>
</mat-list>
</mat-expansion-panel>
</div>
</mat-accordion>
<form [formGroup]="PostComment">
<div class="input-group">
<div id="container">
<div id="profile_img">
<div class="actions">
<div class="avatar">
<img class="d-flex mr-3 rounded-circle" src={{userAvatar}} alt="Cannot Load Photo"
width="30" height="30">
</div>
</div>
</div>
<mat-form-field class="example-full-width" style="margin-top: 10px;">
<textarea matInput formControlName="post_comment" #message maxlength="500"
placeholder="Leave a comment"></textarea>
<mat-hint align="start">
<strong>Say something constructive..</strong>
</mat-hint>
<mat-hint align="end">{{message.value.length}} / 500</mat-hint>
</mat-form-field>
<div class="post-button">
<button mat-raised-button (click)="createComment(post.post_id)">Post</button>
</div>
</div>
</div>
</form>
</mat-card>
<div *ngIf="end_of_data">
<strong><h3>No More Data To Load..</h3></strong>
</div>
</div>
change this [infiniteScrollContainer]="container" by [infiniteScrollContainer]="'.container'"
I create a web page with a listbox and button, the problem is that when page loads, a white space appear at the right of both components, but if resize the page the spaces disappear.
<zk xmlns="http://www.zkoss.org/2005/zul">
<div apply="org.zkoss.bind.BindComposer" viewModel="#id('vm') #init('com.valid.pmngr.product.ProductViewModel')" height="100%" width="100%" style="border: 3px solid red;">
<style src="/css/style.css"/>
<div height="94%" width="100%" style="border: 3px solid orange;">
<vbox vflex="1" hflex="1" style="border: 3px solid blue;">
<hbox align="end" width="100%" style="background-color:#282425; padding: 30px 0px 15px 60px">
<separator height="58px"/>
<image src="/img/Logo.png"/>
</hbox>
<separator height="15px"/>
<grid>
<auxhead>
<auxheader label="Products" zclass="auxheader-g"/>
</auxhead>
<columns />
</grid>
<listbox model="#load(vm.productStatusList) #template((vm.displayEdit and each.editingStatus) ? 'editable' : 'noneditable')"
vflex="1" >
<listhead sizable="true">
<listheader label="Name" align="center"/>
<listheader label="Vertical" align="center"/>
<listheader label="Business unit" align="center"/>
<listheader/>
</listhead>
<template name="noneditable">
<listitem>
<listcell>
<label width="98%" value="#bind(each.product.name)" />
</listcell>
<listcell>
<label width="98%" value="#bind(each.product.vertical)" />
</listcell>
<listcell>
<label width="98%" value="#bind(each.product.businessUnit)" />
</listcell>
<listcell>
<button image="/img/edit.png" onClick="#command('edit')"/>
<button image="/img/delete.png" onClick="#command('delete')" />
</listcell>
</listitem>
</template>
</listbox>
</vbox>
</div>
<div vflex="min" style="border: 3px solid purple;">
<vbox hflex="1" vflex="1" style="border: 3px solid black;">
<button label="New" onClick="#command('newProduct')" />
</vbox>
</div>
</div>
</zk>
When page loads in full screen:
1
And after resize:
2
what is the problem?
EDIT
The white spaces appear in chrome, firefox and iExplorer and the version of zk is 8.0.1.1
I edited your fiddle to this. Can you check it out it meets your requirements?
I altered some things, for correctness :
Using spacing attribute in separator in stead of height.
vbox changed to vlayout as the align attribute is absolute here, and vlayout is lighter in generated html.
Removing the width and hflex where it is not needed.
Removing height and vflex where not needed and only set where needed.
I have the problem of panel overlapping in IE7 whereas the same code works in IE8.
Has anyone faced this kind of problem?
In the code below, i have a link button, on clicking this, the products frame would be displayed. But this overlaps with the "client products" :
<%# Control Language="C#" AutoEventWireup="true" CodeFile="ClientSummary.ascx.cs" Inherits="ClientSummary" %>
<%# Register Src="~/Controls/ClientSession/CounselorMenuFrame.ascx" TagName="CounselorMenuFrame" TagPrefix="UCC" %>
<%# Register Src="~/Controls/ClientSession/ProductsFrame.ascx" TagName="ProductsFrame" TagPrefix="UCC" %>
<%# Register Src="~/Controls/ClientSession/ProductDetailFrame.ascx" TagName="ProductDetailFrame" TagPrefix="UCC" %>
<%# Register Src="~/Controls/ClientSession/ClientDetailFrame.ascx" TagName="ClientDetailFrame" TagPrefix="UCC" %>
<asp:Panel ID="pnlClntSummary" runat="server" EnableViewState="true" >
<asp:Panel ID="pnlClientDetailFrame" runat="server" Style="width: 950px;" >
<UCC:ClientDetailFrame id="clientDetailFrame" runat="server" />
</asp:Panel>
<asp:Panel ID="pnlProductDetailFrame" runat="server" Style="width: 950px;" >
<UCC:ProductDetailFrame id="productDetailFrame" runat="server"/>
</asp:Panel>
<div id="slider" style="width:950px;">
asp:Panel ID="pnlProductsFrame" runat="server" Style="width: 950px;" >
<table style="width:900px;" >
<tr><td></td><td>
<asp:LinkButton Text="Client Information" ID="clientDetail" Font-Underline="true"
Font-Bold="true" Font-Names="Calibri" Font-Size="Medium" runat="server"
onclick="clientDetail_Click"/>
</td>
</tr>
<tr>
<td valign="top" style="float:left" align="left">
<div style="float:left;vertical-align:top;">
<div id="content" class="contentMenu">
<UCC:ProductsFrame id="productsFrame" runat="server" />
</div>
</div>
</td>
<td valign="top" style="width:900px;" align="left">
<div id="header1" style="float:left;position:relative;width:45px;">
<table border="0">
<tr>
<td valign="top" style="width:30px;"
onclick="verticalprocessClick(document.getElementById('header1'))">
<div style="padding: 2px; cursor: pointer; vertical-align: top;">
<div style="float: left; vertical-align: bottom;">
<table>
<tr onclick="ImageChangePFrame(imgPF)">
<td class="VerticalLine">
</td>
<td>
<img id="imgPF" src="../Images/icon_expand.png" alt="(Show Details...)"
onload="ProductFrameHide(this)"/>
<div id="divClientProducts" runat="server"
style="float:left;font-family:Calibri;top:1%;left:25%;position:relative;font-size:13px;
color:Gray;text-align:center;">
C<br />
L<br />
I<br />
E<br />
N<br />
T<br />
<br />
P<br />
R<br />
O<br />
D<br />
U<br />
C<br />
T<br />
S<br />
</div>
</td>
<td class="VerticalLine">
</td>
</tr>
</table>
</div>
</div>
</td>
<td>
</td>
</tr>
</table>
</div>
<div id="divTransactionDesktop" style="float:left;width:600px; height:100px;" >
<asp:UpdatePanel ID="updatePanel" runat="server" UpdateMode="conditional" ChildrenAsTriggers="false">
<ContentTemplate>
<asp:PlaceHolder ID="MainFrameHolder" runat="server"></asp:PlaceHolder>
</ContentTemplate>
</asp:UpdatePanel>
<asp:HiddenField ID="hdnRowValue" runat ="server" Value="0" />
</div>
</td>
</tr>
</table>
</asp:Panel>
</div>
<asp:HiddenField ID="hdnLastFocus" runat="server" />
<asp:HiddenField ID="hdnKeyMapping" runat="server" />
</asp:Panel>
I found a solution for overlapping of panels in IE7. It was the height attribute which made a difference. Removing the height attribute or mentioning the exact value in pixels, solves this problem.
I have added an assembly to my project and then uses the assembly as follows:
<%# Page Title="" Language="C#" MasterPageFile="~/Global.Master" AutoEventWireup="true" CodeBehind="Calendar.aspx.cs" Inherits="Permias.Calendar" %>
<%# Register TagPrefix="ec" Namespace="ControlSample" Assembly="EventCalendar" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div id="content">
<div class="post">
<ec:EventCalendar runat="server" ID="eventscalendar" DataSourceID="sqldatasource1"
BorderWidth="0" DayField="starttime" ShowTitle="true" CssClass="eventmonthtable">
<DayHeaderStyle CssClass="caldays" />
<DayStyle CssClass="calcurrentmonth" />
<TodayDayStyle CssClass="calcurrentday" />
<WeekendDayStyle CssClass="calweekend" />
<OtherMonthDayStyle CssClass="calothermonth" />
<DayNumberStyle CssClass="dayNumber" />
<HeaderTemplate>
<table width="100%">
<tr align="center">
<td>
<asp:LinkButton ID="PrevMonth" runat="server" Text='<%# "« " + Container.PrevMonth.ToString("MMMM yyyy") %>'
CommandName="PrevMonth" />
</td>
<td>
<h3>
<asp:Label ID="label2" runat="server" Text='<%# Container.CurrentMonth.ToString("MMMM yyyy") %>' /></h3>
</td>
<td>
<asp:LinkButton ID="NextMonth" runat="server" Text='<%# Container.NextMonth.ToString("MMMM yyyy") + " »" %>'
CommandName="NextMonth" />
</td>
</tr>
</table>
<div class="dashedline">
</div>
</HeaderTemplate>
<DayEventTemplate>
<div style="padding: 3px;">
<asp:HyperLink ID="HyperLink1" runat="server" Text='<%#Eval("title") %>' NavigateUrl='<%# "Events_view.aspx?Eventid=" + Convert.ToString(Eval("ID"))%>'
ToolTip='<%# SharedRoutines.truncate((string)Eval("description")) %>' /></div>
</DayEventTemplate>
</ec:EventCalendar>
</div>
</div>
</div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="splash" runat="server">
<div id="splash"> </div>
</asp:Content>
However it generates an error saying that:
Compiler Error Message: CS0103: The name 'SharedRoutines' does not exist in the current context
Why is this?
You need to include the namespace containing the SharedRoutines class at the top of the page, like this:
<%# Import Namespace="Your.Namespace" %>
You can also include it globally in Web.config:
<pages>
<namespaces>
<add namespace="Your.Namespace" />
</namespaces>
</pages>
I'm trying to create draggable web parts in ASP.NET 3.5 but the thing just doesn't want to be dragged. I already tried the workarounds for making it compatible with Firefox, by using AJAX, but still doesn't work.
This is code I have on my page:
<asp:WebPartManager ID="WebPartManager1" runat="server">
</asp:WebPartManager>
<uc2:DisplayModeMenu ID="DisplayModeMenu1" runat="server" />
<div>
<table>
<tr>
<td>
<asp:WebPartZone ID="SidebarZone" runat="server" HeaderText="Sidebar">
<ZoneTemplate>
<asp:Label runat="server" ID="linksPart" title="My Links">
ASP.NET site
<br />
GotDotNet
<br />
Contoso.com
<br />
</asp:Label>
<uc1:SearchUserControl ID="SearchUserControl1" runat="server" title="Search" />
</ZoneTemplate>
</asp:WebPartZone>
</td>
<td>
<asp:WebPartZone ID="MainZone" runat="server" HeaderText="Main">
<ZoneTemplate>
<asp:Label ID="lbl" Text="Some text" Title="Content" runat="server"></asp:Label>
</ZoneTemplate>
</asp:WebPartZone>
</td>
<td>
<asp:EditorZone ID="EditorZone1" runat="server">
<ZoneTemplate>
<asp:AppearanceEditorPart ID="AppearanceEditorPart1" runat="server" />
<asp:LayoutEditorPart ID="LayoutEditorPart1" runat="server" />
</ZoneTemplate>
</asp:EditorZone>
</td>
</tr>
</table>
</div>
I never get the drag cursor when I hover the titles.
Any idea on what I may be doing wrong?
EDIT:
I am in the page in Edit mode, not Browse mode....
Tks in advance.
As a reference, I solved the problem by adding a css to the div containing the web part controls:
<style type="text/css">
.container
{
padding: 0px;
margin-top: 5px;
margin-left: 20px;
margin-bottom: 0px;
/* position: relative; */
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
height: 550px;
width: 990px;
}
</style>
It has to do with the position element.
Hope it helps someone facing the same problem.